/* 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;
}

.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;
    }

    nav ul { flex-wrap: wrap; }

    .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; }
}