/* Responsive overlay applied on top of either light or dark theme.
   Mobile-first tweaks for ~16 operators who often use phones. */

/* Theme toggle button in the header */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 12px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
}
.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
    text-decoration: none;
}
.theme-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Make header wrap nicely on narrow viewports */
#myheader {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    line-height: 1.5;
}

/* SVG action icons in the customer list — compact so the table fits without
   needing horizontal scrolling. */
.sa-actions { white-space: nowrap; padding: 2px 4px; }

.sa-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0 1px;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
}
.sa-act:hover { text-decoration: none; background: rgba(127,127,127,0.18); }
.sa-icon { display: block; }

/* Per-action accent colors. Each rule sets color on the wrapper so the SVG
   strokes (which use currentColor) match. */
.sa-act-graph { color: #4A9EE6; }
.sa-act-note  { color: #9AA4B2; }
.sa-act-edit  { color: #E89752; }
.sa-act-del   { color: #E16060; }

/* Menu icons (top navigation row) */
nav .sa-mnu-icon {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-right: 4px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Uppercase the top-nav labels for consistency (keeps lang/*.txt natural). */
nav li a {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Quick-filter toolbar above the customers table */
.sa-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 8px;
    flex-wrap: wrap;
}
.sa-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    opacity: .7;
    line-height: 1.6;
}
.sa-toggle::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: .35;
}
.sa-toggle:hover { opacity: 1; }
.sa-toggle.is-on { opacity: 1; }
.sa-toggle.is-on::before { opacity: 1; }

/* Per-filter accent colors when selected. Each uses a low-alpha wash so it
   reads on both light and dark themes without theme-specific overrides. */
.sa-toggle.is-on.sa-toggle-all {
    background: rgba(127, 127, 127, 0.18);
    border-color: currentColor;
}
.sa-toggle.is-on.sa-toggle-active {
    background: rgba(46, 139, 87, 0.18);
    border-color: #2E8B57;
    color: #2E8B57;
}
.sa-toggle.is-on.sa-toggle-stopped {
    background: rgba(184, 69, 69, 0.18);
    border-color: #B84545;
    color: #B84545;
}

/* ---------- simple-datatables theme integration ---------- */

/* The vendor stylesheet uses hard-coded greys. We override search box, pager,
   and selector to inherit the page's colors and feel native in either theme. */
.datatable-wrapper {
    margin-bottom: 16px;
}

/* Scoped horizontal scroll: only the table scrolls when it's wider than the
   viewport. The page itself never pans sideways. Visible thin scrollbar so
   the user can tell when the table has more columns off-screen. */
.datatable-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.datatable-container::-webkit-scrollbar          { height: 8px; }
.datatable-container::-webkit-scrollbar-thumb    { background: rgba(127,127,127,0.5); border-radius: 4px; }
.datatable-container::-webkit-scrollbar-track    { background: transparent; }

/* Vendor sets .datatable-table { width: 100% } which makes the browser
   redistribute column widths to fit the container — that's what was
   clipping our action cell. Force the table to size to its content. */
.datatable-container > table.datatable-table {
    width: auto !important;
    min-width: 100% !important;
    table-layout: auto !important;
}

/* The action-icons column gets a hard reserved width. The authoritative source
   is the inline width="140" on the empty <th> in inc/list.php — these CSS
   rules are belt-and-braces for the body cells. Also target td:last-child as
   a fallback in case simple-datatables ever strips our class. */
table.type1 td.sa-actions,
table.type1 td:last-child,
table.type1 th:last-child {
    width: 140px !important;
    min-width: 140px !important;
    white-space: nowrap !important;
    text-align: right;
    padding-right: 8px !important;
}

.datatable-top, .datatable-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 4px;
}
.datatable-top > nav:first-child,
.datatable-top > div:first-child,
.datatable-bottom > nav:first-child,
.datatable-bottom > div:first-child { float: none; margin-right: auto; }
.datatable-top > nav:last-child,
.datatable-top > div:last-child,
.datatable-bottom > nav:last-child,
.datatable-bottom > div:last-child { float: none; }

.datatable-input,
.datatable-selector {
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 5px;
    padding: 5px 10px;
    opacity: .85;
    font-size: 13px;
}
.datatable-input:focus,
.datatable-selector:focus { outline: 1px solid currentColor; opacity: 1; }

.datatable-info { opacity: .75; font-size: 12.5px; }

.datatable-pagination a,
.datatable-pagination button {
    color: inherit;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 4px 9px;
    opacity: .85;
}
.datatable-pagination a:hover,
.datatable-pagination button:hover { background: rgba(127,127,127,0.18); }
.datatable-pagination .datatable-active a,
.datatable-pagination .datatable-active button {
    background: rgba(127,127,127,0.30);
    opacity: 1;
}

/* Sortable column-header indicator (vendor uses a triangle char). Make it a
   subtle muted color so it doesn't compete with the header pill. */
table.type1 thead th button.datatable-sorter {
    background: transparent;
    color: inherit;
    border: 0;
    cursor: pointer;
    font: inherit;
    padding: 0;
    width: 100%;
    text-align: inherit;
}
table.type1 thead th.datatable-ascending button.datatable-sorter::after  { content: ' ▲'; opacity: .7; }
table.type1 thead th.datatable-descending button.datatable-sorter::after { content: ' ▼'; opacity: .7; }

@media (max-width: 720px) {
    body, td, th { font-size: 11pt; }

    table.type1 {
        font-size: 10pt;
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* flex-wrap is now on the base nav ul; nothing extra needed here */

    .login2_container {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .login3 { width: 100%; }

    input[type="text"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    body, td, th { font-size: 10pt; }
    #myheader { padding: 6px 8px; }
    .headerdate, .headerips { display: inline-block; }
}