/**
 * DataTables Responsive - Kaufmann Carbon Footprint
 *
 * Design: Circle-chevron expand/collapse indicator on td.dtr-control
 *
 * Pattern rationale:
 *   A <td> cannot safely be set to display:flex without breaking the
 *   browser table layout engine (column widths collapse, borders
 *   misalign). The solution is to keep the cell as table-cell and use
 *   a left padding offset that reserves space for an absolutely-
 *   positioned ::before circle. The padding-left value exactly equals
 *   the circle diameter (18px) plus the gap between circle and text
 *   (8px), totalling 26px. This makes the reserved space pixel-perfect
 *   and independent of font size.
 *
 *   The indicator is a 18x18px circle drawn with border + border-radius.
 *   Inside the circle a chevron is drawn via box-shadow inset trick
 *   (no icon font or SVG required). The chevron points RIGHT in the
 *   collapsed state ("tap to expand") and rotates to point DOWN-LEFT in
 *   the expanded state ("tap to collapse"), using CSS transform on the
 *   ::before element with a 0.25s ease transition.
 *
 *   Color semantics:
 *   - Collapsed, resting:  muted blue  (#93b8d8 border, #f0f6fb fill)
 *   - Collapsed, hovered:  full blue   (#337ab7) — matches link/accent
 *   - Expanded, resting:   brand green (#00b393) — matches active rows
 *   - Expanded, hovered:   deeper green (#009b7e)
 *
 *   This maps the expand/collapse affordance onto the same colour
 *   vocabulary already used throughout the app for interactive states.
 *
 * Color tokens (from style.css):
 *   #4e5e6a  — body text
 *   #f2f2f2  — table borders
 *   #f2f4f6  — row hover background
 *   #337ab7  — accent blue (links, Bootstrap primary)
 *   #00b393  — primary brand green (active rows, success states)
 *   #ffffff  — table cell bg (display/row-border tables)
 *   #f9fafb  — child row surface
 */


/* ============================================================
   HIDDEN COLUMNS — Responsive core (must come first)
   ============================================================ */

table.dataTable.dtr-column > tbody > tr > td.dtr-hidden,
table.dataTable.dtr-column > tbody > tr > th.dtr-hidden,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-hidden,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-hidden {
    display: none !important;
}


/* ============================================================
   EXPAND/COLLAPSE CONTROL — td.dtr-control (date cell)
   ============================================================

   Layout: the cell stays as table-cell (no display override).
   Space for the indicator is carved out via padding-left: 26px.
   The ::before circle sits absolutely at left: 4px, vertically
   centred. Using left:4px (not 0) gives a comfortable 4px margin
   from the cell border so the circle doesn't feel cramped.

   The indicator is 18px wide, so the usable interior padding for
   the date text starts at 4 + 18 + 4 (gap) = 26px. This is set
   explicitly on padding-left so no existing padding is lost on
   other sides of the cell.

   Chevron technique:
   The ::before pseudo-element is a rotated square clipped to a
   circle. The chevron arrow is rendered using two visible sides of
   an inner box: border-right + border-bottom of a 6x6 child-
   element equivalent — achieved here with the box-shadow inset
   trick which requires no child element.

   box-shadow: inset X Y spread blur color
     inset 3px -3px 0 -1.5px #color
     → draws a 1.5px-wide right + bottom border pair inside the circle
     → at 45deg rotation this becomes a right-pointing chevron
     → at -135deg rotation (expanded state) it becomes an up-left chevron

   Accessibility note:
   The cell already carries meaningful date text, so the indicator
   is purely decorative from an a11y standpoint. No aria attributes
   needed — DataTables Responsive handles row expand/collapse state
   at the JS level.
*/

table.dataTable.collapsed > tbody > tr:not(.child) > td.dtr-control {
    position: relative;
    padding-left: 30px !important; /* 6px + 16px circle + 8px gap */
    cursor: pointer;
    vertical-align: middle;
}

/* Circle indicator — 16px circle, sits at left:6px */
table.dataTable.collapsed > tbody > tr:not(.child) > td.dtr-control::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 6px;
    width: 16px;
    height: 16px;
    margin-top: -8px;    /* = -(height/2) */

    border-radius: 50%;
    border: 1.5px solid #93b8d8;
    background-color: #f0f6fb;
    box-sizing: border-box;

    /*
     * Chevron via inset box-shadow (no icon font needed).
     * Draws a right+bottom border pair → rotated 45deg = right arrow.
     */
    box-shadow: inset 2.5px -2.5px 0 -1.2px #5a9abf;

    transform: rotate(45deg);
    transition:
        background-color 0.2s ease,
        border-color     0.2s ease,
        box-shadow       0.2s ease,
        transform        0.25s ease;
}

/* Hover — amplify affordance with full brand blue */
table.dataTable.collapsed > tbody > tr:not(.child) > td.dtr-control:hover::before {
    border-color: #337ab7;
    background-color: #e8f0f8;
    box-shadow: inset 2.5px -2.5px 0 -1.2px #337ab7;
}

/* Expanded state — green palette, chevron points down */
table.dataTable.collapsed > tbody > tr.parent:not(.child) > td.dtr-control::before {
    border-color: #00b393;
    background-color: #e6f8f5;
    box-shadow: inset 2.5px -2.5px 0 -1.2px #00b393;
    transform: rotate(-135deg);
}

/* Hover on expanded control */
table.dataTable.collapsed > tbody > tr.parent:not(.child) > td.dtr-control:hover::before {
    border-color: #009b7e;
    background-color: #d4f2ed;
    box-shadow: inset 2.5px -2.5px 0 -1.2px #009b7e;
}

/*
 * Expanded parent row background tint.
 * Light green wash visually groups the parent row with the
 * detail child row that follows it, without competing with the
 * .dataTable tbody tr:hover rule in style.css (which uses #f2f4f6).
 * !important overrides the display/row-border white (#fff) set in
 * style.css on table.dataTable.row-border tbody td.
 */
table.dataTable.collapsed > tbody > tr.parent:not(.child) {
    background-color: #f0fbf8 !important;
}

table.dataTable.collapsed > tbody > tr.parent:not(.child) > td {
    background-color: #f0fbf8 !important;
    border-bottom-color: #c8ede6 !important;
}

/* Suppress the indicator on any th.dtr-control that DataTables adds
   to the header row (it should not appear there) */
table.dataTable > thead > tr > th.dtr-control::before {
    display: none !important;
}


/* ============================================================
   CHILD / DETAIL ROW
   ============================================================

   The left border uses brand green (#00b393) rather than blue.
   Rationale:
   - Blue left borders are already used for td.b-primary and the
     general expand indicator at rest. Using green here creates
     a continuous colour thread between the green expanded-state
     indicator on the parent row and the detail row below it.
   - The #f9fafb surface is slightly cooler than #fff, creating
     a subtle but clear visual separation from data rows without
     the heavy contrast of a full-colour stripe.

   The title/label column uses uppercase 11px with generous
   letter-spacing — a common convention in enterprise dashboards
   (Salesforce, Linear, Notion) for distinguishing metadata labels
   from data values.
*/

table.dataTable > tbody > tr.child {
    background-color: #f9fafb;
    border-left: 3px solid #00b393;
}

/*
 * Prevent the global row hover (style.css: .dataTable tbody tr:hover td)
 * from applying to child rows, since they are not interactive.
 */
table.dataTable > tbody > tr.child:hover,
table.dataTable > tbody > tr.child:hover > td {
    background-color: #f9fafb !important;
    cursor: default;
}

/* Child wrapper td */
table.dataTable > tbody > tr.child > td {
    padding: 0.6em 1em 0.6em 1.1em;
    border-top: none !important;
}

/* Detail list container */
table.dataTable > tbody > tr.child ul.dtr-details {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    padding: 0.45em 0;
    border-bottom: 1px solid #eef0f2;
}

table.dataTable > tbody > tr.child ul.dtr-details > li:first-child {
    padding-top: 0.2em;
}

table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
    border-bottom: none;
    padding-bottom: 0.2em;
}

/* Column label (header name used as key) */
table.dataTable > tbody > tr.child span.dtr-title {
    flex-shrink: 0;
    min-width: 140px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a9aaa;
}

/* Column value */
table.dataTable > tbody > tr.child span.dtr-data {
    color: #2c3e50;
    font-size: 13px;
    word-break: break-word;
}


/* ============================================================
   HIDDEN-COLUMN COUNT BADGE  (.dtr-hidden-info)

   Injected by the JS block in index.php onto the last visible th
   when columns are hidden. Shows "+N" to signal that the user
   can expand rows to see more data.

   Design decisions:
   - pointer-events:none  so clicking the header still sorts
   - vertical-align:middle so it doesn't raise the header height
   - Muted blue palette distinguishes it from action buttons
     (green) and status badges (varying) in the same header row
   ============================================================ */

.dtr-hidden-info {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;

    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: #5a7a99;

    background-color: #e8f0f8;
    border: 1px solid #bdd3e8;
    border-radius: 10px;
    padding: 2px 7px 3px;

    pointer-events: none;
    user-select: none;
}


/* ============================================================
   INLINE FALLBACK  (dtr-inline mode)

   Kept for any other table in the app using the inline type
   rather than column type. Uses a solid-fill circle with a
   +/- character — the traditional DataTables inline indicator,
   restyled to match the app palette.
   ============================================================ */

table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before {
    content: '+';
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);

    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-sizing: content-box;
    text-align: center;

    background-color: #337ab7;
    color: #ffffff;
    border: none;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;

    box-shadow: 0 1px 3px rgba(51, 122, 183, 0.35);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child::before {
    content: '-';
    background-color: #00b393;
    box-shadow: 0 1px 3px rgba(0, 179, 147, 0.35);
}

/* Suppress indicator inside child rows */
table.dataTable.dtr-inline.collapsed > tbody > tr.child > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.child > th:first-child::before {
    display: none;
}