/* VIDGUARD 2.0.0 — familiar burgundy, clearer hierarchy and touch targets. */
:root {
    --colMain:#8a2841;
    --colMainDark:#692035;
    --colMainLight:#ab3d57;
    --colBackground:#f4f5f8;
    --colBorder:#e2e5ec;
    --colText:#1e293b;
    --colTextLight:#536174;
    --colSuccess:#18794e;
    --colWarning:#aa6800;
    --colInfo:#236ba3;
    --sizeBodyPaddingX:32px;
    --sizeBodyPaddingY:28px;
    --fontInter:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
    --fontMontserrat:var(--fontInter);
    --fontPoppins:var(--fontInter)
}

body {
    font-size:16px;
    line-height:1.5
}

main {
    min-width:0;
    scroll-behavior:smooth
}

nav {
    border-right:1px solid var(--colBorder);
    box-shadow:none
}

nav a .nav-text {
    font-size:15px
}

nav a {
    min-height:44px
}

nav a.active {
    background:#8a284110
}

nav a:hover .nav-text,nav a:hover i {
    transform:none!important
}

button,.btn {
    min-height:44px;
    border-radius:10px;
    background:var(--colMain);
    box-shadow:none;
    font-weight:650;
    transition:background .15s
}

button:hover,.btn:hover {
    background:var(--colMainDark);
    filter:none
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
    outline:3px solid #b35d76;
    outline-offset:3px
}

input:not([type="checkbox"]):not([type="radio"]),select,textarea {
    border-radius:9px;
    border-color:#cbd1dc;
    min-height:46px;
    font-size:16px
}

textarea {
    padding:12px;
    line-height:1.5
}

h2.page-title {
    font-size:26px;
    letter-spacing:-.6px;
    margin-bottom:24px
}

table {
    border-collapse:separate;
    border-spacing:0;
    font-size:15px;
    width:100%
}

th {
    background:#f6f7fa!important;
    color:#475569!important;
    font-size:13px;
    letter-spacing:.02em;
    padding:9px 12px!important;
    border-bottom:1px solid var(--colBorder)
}

td {
    padding:8px 12px!important;
    border-bottom:1px solid var(--colBorder)
}

tbody tr:hover {
    background:#faf6f7
}

.modal {
    background:rgba(15,23,42,.58);
    backdrop-filter:blur(3px)
}

.modal-content {
    border-radius:18px!important;
    border:1px solid var(--colBorder);
    box-shadow:0 24px 80px #0f172a30!important;
    padding:24px!important;
    max-height:90dvh;
    overflow-y:auto
}

.modal-content h3 {
    font-size:22px
}

.modal-actions {
    gap:10px;
    display:flex;
    flex-wrap:wrap
}

.modal-actions button {
    flex:1
}

.btnSuccess {
    background:#18794e!important
}

.btnError,.btnGoneAway {
    background:#b42337!important
}

.btnEdit {
    background:#24669b!important
}

.btnDelete {
    background:#334155!important
}

.stats-kpi,.vg-kpis {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
    gap:16px
}

.vg-panel,.kpi-card,.stats-chart,.stats-table {
    background:var(--colSurface);
    border:1px solid var(--colBorder);
    border-radius:16px;
    box-shadow:0 2px 4px #15233e03;
    padding:22px
}

.vg-eyebrow {
    font-size:12px;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--colMain);
    font-weight:750;
    margin-bottom:6px
}

.vg-heading {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:start;
    margin-bottom:24px
}

.vg-heading h1 {
    font-size:30px;
    letter-spacing:-.8px;
    line-height:1.2
}

.vg-subtitle {
    color:var(--colTextLight);
    margin-top:8px
}

.vg-badge {
    display:inline-flex;
    align-items:center;
    gap:7px;
    border-radius:20px;
    background:#e7f4ed;
    color:#18794e;
    padding:6px 12px;
    font-size:13px;
    white-space:nowrap
}

.vg-filters {
    display:flex;
    gap:14px;
    align-items:end;
    flex-wrap:wrap;
    margin-bottom:22px
}

.vg-filters label {
    display:block;
    font-size:13px
}

.vg-filters>div {
    min-width:160px
}

.vg-filters button {
    margin:0
}

.vg-kpi-label {
    font-size:14px;
    color:var(--colTextLight)
}

.vg-kpi-value {
    font-size:34px;
    font-weight:750;
    letter-spacing:-1px;
    margin:8px 0
}

.vg-kpi-detail {
    font-size:13px;
    color:var(--colTextLight)
}

.vg-grid {
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
    gap:18px;
    margin-top:20px
}

.vg-panel h3 {
    font-size:17px;
    margin-bottom:14px
}

.vg-note {
    font-size:13px;
    color:var(--colTextLight);
    margin:14px 0
}

.vg-chart {
    width:100%;
    height:230px;
    display:block
}

.vg-chart text {
    font:12px var(--fontInter);
    fill:#536174
}

.vg-chart line {
    stroke:#e4e7ed
}

.vg-company {
    display:grid;
    grid-template-columns:minmax(0,1fr) 55px;
    gap:10px;
    margin:15px 0
}

.vg-company span {
    overflow-wrap:anywhere
}

.vg-company strong {
    text-align:right
}

.vg-company meter {
    width:100%;
    grid-column:1/-1;
    height:8px;
    accent-color:var(--colMain)
}

.vg-open-row {
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid var(--colBorder);
    padding:12px 0
}

.vg-status {
    min-height:24px;
    font-size:14px;
    color:var(--colTextLight);
    margin-top:10px
}

.vg-error {
    color:#b42337
}

.vg-table-wrap {
    overflow:auto;
    max-width:100%
}

.vg-plugin-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:12px
}

.vg-plugin {
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px;
    border:1px solid var(--colBorder);
    border-radius:12px
}

.vg-plugin input {
    width:22px;
    height:22px;
    accent-color:var(--colMain)
}

.vg-plugin small {
    display:block;
    color:var(--colTextLight)
}

.vg-nav-progress {
    position:fixed;
    left:0;
    top:0;
    height:3px;
    background:var(--colMain);
    width:0;
    z-index:99999;
    transition:width .2s
}

.vg-busy .vg-nav-progress {
    width:75%
}

.vg-busy {
    cursor:progress
}

.vg-mobile-table {
    overflow:auto;
    max-width:100%
}

.notification-container {
    border-radius:12px;
    max-width:calc(100vw - 24px)
}

.dark .vg-panel,.dark .kpi-card {
    background:var(--colSurface)
}

@media(max-width:1100px) {
    .vg-grid {
        grid-template-columns:1fr
    }

    main {
        padding:22px!important
    }

    .vg-heading h1 {
        font-size:26px
    }

}

@media(max-width:600px) {
    main {
        padding:16px!important
    }

    .vg-heading {
        display:block
    }

    .vg-heading .vg-badge {
        margin-top:12px
    }

    .vg-kpis {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px
    }

    .vg-panel,.kpi-card {
        padding:16px
    }

    .vg-kpi-value {
        font-size:28px
    }

    .vg-filters {
        gap:10px
    }

    .vg-filters>div {
        min-width:0;
        flex:1 1 130px
    }

    .vg-filters button {
        flex:1
    }

    .modal-content {
        width:calc(100vw - 20px)!important;
        padding:18px!important
    }

    .page-title {
        font-size:22px!important
    }

    th,td {
        white-space:nowrap
    }

    .vg-panel h3 {
        font-size:16px
    }

}

@media(prefers-reduced-motion:reduce) {
    * {
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important
    }

}

@media(min-width:601px) {
    .vg-kpis {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }

}

/* Layout corrections for plugin cards and VIDSCAN settings. */
.vg-panel, .kpi-card, .stats-chart, .stats-table {
    min-width: 0;
    box-sizing: border-box;
}
.vg-heading h1, .vg-heading p {
    margin-left: 0;
    margin-right: 0;
}
.vg-heading h1 {
    margin-top: 0;
    margin-bottom: 0;
}
.vg-subtitle {
    max-width: 75ch;
    line-height: 1.65;
}
.vg-plugin-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    align-items: stretch;
    gap: 16px;
}
.vg-plugin {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: 12px;
    margin: 0;
    padding: 20px;
    min-width: 0;
    box-sizing: border-box;
    background: var(--colSurface, #fff);
    color: var(--colText);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.vg-plugin:hover, .vg-plugin:focus-within {
    border-color: var(--colMain);
    box-shadow: 0 0 0 1px var(--colMain);
}
.vg-plugin > span {
    min-width: 0;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.vg-plugin input[type="checkbox"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    padding: 0;
    margin: 2px 0 0;
    appearance: auto;
    accent-color: var(--colMain);
    cursor: pointer;
}
.vg-plugin small {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}
.vg-plugin .btn {
    grid-column: 2;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0 0;
    padding: 10px 16px;
    min-height: 44px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
    text-decoration: none;
}
#vg-plugins > button {
    margin-top: 24px;
}
.vg-filters > div {
    min-width: 0;
    flex: 1 1 200px;
}
.vg-filters label {
    margin: 0 0 8px;
    line-height: 1.45;
}
.vg-filters select, .vg-filters input {
    width: 100%;
    box-sizing: border-box;
}
.vg-filters button {
    min-height: 46px;
    padding: 10px 18px;
    line-height: 1.5;
}
#vidscan-settings .vg-filters {
    margin-bottom: 0;
}
#vidscan-state {
    color: var(--colTextLight);
    margin: 0 0 16px;
    line-height: 1.6;
}
#vidscan-refresh {
    margin: 0 0 18px;
}
#vidscan-phones td {
    vertical-align: middle;
}
#vidscan-phones td:last-child {
    min-width: 190px;
}
#vidscan-phones td button {
    margin: 4px 8px 4px 0;
    padding: 10px 14px;
    white-space: nowrap;
}
#vidscan-phones td button:last-child {
    margin-right: 0;
}
.vg-table-wrap {
    border: 1px solid var(--colBorder);
    border-radius: 12px;
    margin-top: 4px;
    -webkit-overflow-scrolling: touch;
}
.vg-table-wrap table {
    margin: 0;
}
.vg-table-wrap tbody tr:last-child td {
    border-bottom: 0;
}
.modal-actions button {
    margin-top: 0;
}
.btnGoneAway.invis {
    background: transparent !important;
    color: transparent;
    box-shadow: none;
}
.dark th {
    background: var(--colSurface) !important;
    color: var(--colTextLight) !important;
}
.dark tbody tr:hover {
    background: var(--colBackground);
}
.dark .vg-chart text {
    fill: var(--colTextLight);
}
.dark .vg-chart line {
    stroke: var(--colBorder);
}
@media (max-width: 600px) {
    .vg-plugin-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .vg-plugin {
        padding: 16px;
    }
    .vg-filters > div {
        flex-basis: 100%;
    }
    .vg-filters button {
        flex-basis: 100%;
        width: 100%;
    }
    #vg-plugins > button {
        width: 100%;
    }
    .vg-heading h1 {
        font-size: 26px;
    }
    .vg-subtitle {
        font-size: 15px;
    }
    .modal-content {
        box-sizing: border-box;
    }
}


/* Compact table controls; forms retain their regular touch target size. */
table td button,table td .btn { min-height:36px; margin-top:0; padding-top:6px; padding-bottom:6px; }