:root {
    --ink:#172a38;
    --muted:#596a78;
    --line:#dce4e8;
    --accent:#11685d;
    --surface:#fff;
    --canvas:#f3f6f7;
    --sidebar:#152e38;
}

.skip-link {
    position:absolute;
    left:12px;
    top:-80px;
    padding:12px;
    background:#fff;
    z-index:100;
}

.skip-link:focus {
    top:12px;
}

.visually-hidden {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
}

.workspace-layout {
    background:var(--canvas);
    color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:14px;
    line-height:1.5;
}

.workspace-layout * {
    box-sizing:border-box;
}

.workspace-layout a {
    color:var(--accent);
}

.workspace-layout :focus-visible {
    outline:3px solid #dd9218;
    outline-offset:3px;
}

.workspace-sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:232px;
    background:var(--sidebar);
    color:#d3e1e5;
    padding:26px 16px;
    display:flex;
    flex-direction:column;
    z-index:10;
    overflow:auto;
}

.workspace-sidebar .workspace-brand {
    display:flex;
    gap:12px;
    align-items:center;
    color:white;
    text-decoration:none;
    font-size:23px;
    font-weight:750;
    padding:0 10px 24px;
}

.brand-mark {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    background:#d8efe8;
    color:#145d53;
    border-radius:10px;
    font-size:24px;
}

.brand-caption {
    display:block;
    font-size:11px;
    color:#bfd0d7;
    font-weight:400;
}

.nav-caption {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0;
    color:#aec3cc;
    padding:20px 12px 8px;
}

.workspace-sidebar nav {
    display:grid;
    gap:4px;
}

.workspace-sidebar nav a {
    padding:11px 12px;
    border-radius:6px;
    color:#d3e1e5;
    text-decoration:none;
}

.workspace-sidebar nav a:hover {
    background:#28434e;
}

.workspace-sidebar nav a.active {
    background:#33515b;
    color:#fff;
    box-shadow:inset 3px 0 #9ad6c5;
}

.workspace-account {
    margin-top:auto;
    padding:24px 12px 0;
    font-size:12px;
    overflow-wrap:anywhere;
}

.workspace-account button {
    margin-top:12px;
    background:transparent!important;
    border-color:#6e8792!important;
    color:white!important;
}

.workspace-topbar {
    margin-left:232px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:16px 32px;
    background:white;
    border-bottom:1px solid var(--line);
    color:var(--muted);
}

.workspace-topbar form {
    display:flex;
    gap:8px;
    margin:0;
    flex:0 1 540px;
}

.workspace-topbar input {
    flex:1;
    min-width:0;
    max-width:none!important;
}

.workspace-layout .main-content {
    margin-left:232px;
    padding:30px 32px;
    min-width:0;
}

.workspace-page {
    max-width:1540px;
    margin:auto;
}

.workspace-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:26px;
}

.workspace-heading h1 {
    font-size:30px;
    letter-spacing:0;
    margin:4px 0 8px;
    font-weight:700;
}

.workspace-heading p {
    color:var(--muted);
    margin:0;
}

.eyebrow {
    text-transform:uppercase;
    letter-spacing:0;
    font-size:10px;
    font-weight:700;
    color:var(--muted);
}

.workspace-layout button,.workspace-layout .primary-action {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:9px 16px;
    border:1px solid var(--accent);
    border-radius:6px;
    background:var(--accent);
    color:white;
    font:inherit;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
}

.workspace-layout button:disabled {
    opacity:.5;
    cursor:not-allowed;
}

.workspace-layout .secondary-action {
    background:white;
    color:var(--accent);
    border-color:var(--line);
}

.workspace-layout input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.workspace-layout select,.workspace-layout textarea {
    font:inherit;
    border:1px solid #b8c7ce;
    border-radius:5px;
    background:#fff;
    color:var(--ink);
    padding:9px 11px;
    min-height:40px;
    max-width:100%;
}

.workspace-layout input[type=checkbox],.workspace-layout input[type=radio] {
    width:auto;
    min-height:18px;
    accent-color:var(--accent);
}

.workspace-layout textarea {
    width:100%;
    resize:vertical;
}

.workspace-layout label {
    font-size:12px;
    font-weight:600;
    color:var(--muted);
}

.metric-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:24px;
}

.metric-card {
    display:flex;
    flex-direction:column;
    background:white;
    border:1px solid var(--line);
    border-radius:8px;
    padding:21px 22px;
    text-decoration:none!important;
    color:var(--ink)!important;
}

.metric-card>span {
    font-size:13px;
    color:var(--muted);
}

.metric-card strong {
    font-size:34px;
    letter-spacing:0;
    font-weight:650;
    margin:8px 0;
}

.metric-card small {
    font-size:11px;
    color:var(--muted);
}

.metric-card:hover {
    border-color:var(--accent);
}

.workspace-card {
    background:white;
    border:1px solid var(--line);
    border-radius:8px;
    padding:24px;
    min-width:0;
    margin-bottom:24px;
}

.workspace-card h2,.mail-preview h2 {
    font-size:17px;
    margin:0 0 18px;
}

.workspace-columns {
    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:24px;
}

.workflow-strip {
    list-style:none;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:0;
    gap:14px;
    margin:20px 0;
}

.workflow-strip li {
    border-top:2px solid #aacbc4;
    padding-top:15px;
}

.workflow-strip b {
    color:var(--accent);
    font-size:12px;
}

.workflow-strip strong {
    display:block;
    font-size:12px;
    margin:8px 0;
}

.workflow-strip span {
    font-size:11px;
    color:var(--muted);
    display:block;
}

.muted {
    color:var(--muted);
    font-size:12px;
}

.action-list {
    list-style:none;
    padding:0;
    margin:0;
}

.action-list a {
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    text-decoration:none;
    color:var(--ink);
}

.action-list b {
    background:#eff5f3;
    border-radius:5px;
    padding:0 8px;
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
}

.table-scroll {
    overflow-x:auto;
    width:100%;
}

.workspace-table {
    width:100%;
    border-collapse:collapse;
    font-size:12px;
    white-space:normal;
}

.workspace-table th {
    color:var(--muted);
    text-align:left;
    background:#f7f9fa;
    font-size:11px;
    font-weight:600;
    padding:12px 14px;
    border-bottom:1px solid var(--line);
}

.workspace-table td {
    padding:15px 14px;
    border-bottom:1px solid #e8edf0;
    vertical-align:top;
    overflow-wrap:anywhere;
}

.workspace-table small {
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-top:4px;
}

.workspace-table a {
    text-decoration:none;
}

.workspace-table tbody tr:hover {
    background:#f7fbfa;
}

.empty-state {
    padding:40px 18px;
    text-align:center;
    color:var(--muted);
    background:#fafcfc;
    border:1px dashed var(--line);
    border-radius:6px;
}

.status-badge {
    display:inline-flex;
    white-space:nowrap;
    border:1px solid #d9e0e4;
    border-radius:5px;
    padding:3px 7px;
    font-size:10px;
    font-weight:600;
    color:#526574;
    background:#f1f4f5;
}

.status-badge.success {
    color:#18604c;
    background:#edf7f1;
    border-color:#c7e5d5;
}

.status-badge.warning {
    color:#805414;
    background:#fff7e7;
    border-color:#efdeb6;
}

.status-badge.info {
    color:#265c7a;
    background:#eef5fa;
    border-color:#cfe1ec;
}

.status-badge.danger {
    color:#9e343d;
    background:#fff0f1;
    border-color:#edc5ca;
}

.filter-bar {
    display:flex;
    align-items:flex-end;
    gap:14px;
    flex-wrap:wrap;
}

.filter-bar label {
    display:grid;
    gap:6px;
}

.search-results {
    list-style:none;
    padding:0;
}

.search-results li {
    display:grid;
    gap:5px;
    padding:18px 0;
    border-top:1px solid var(--line);
}

.mail-workspace {
    display:grid;
    grid-template-columns:180px minmax(250px,320px) minmax(0,1fr);
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    overflow:hidden;
    min-height:620px;
}

.mail-folders {
    padding:18px 12px;
    background:#f8fafb;
    border-right:1px solid var(--line);
}

.mail-folders a {
    display:flex;
    justify-content:space-between;
    gap:8px;
    padding:10px 8px;
    margin-bottom:4px;
    color:var(--ink);
    text-decoration:none;
    border-radius:5px;
    font-size:12px;
}

.mail-folders a.active {
    background:#e4efec;
    color:var(--accent);
    font-weight:650;
}

.mail-folders p {
    padding:12px 8px;
}

.mail-list {
    border-right:1px solid var(--line);
    padding:16px;
    min-width:0;
}

.mail-list-item {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    border-bottom:1px solid var(--line);
    padding:17px 10px;
    text-decoration:none;
    color:var(--ink)!important;
    overflow-wrap:anywhere;
}

.mail-list-item.selected {
    background:#eef6f3;
    box-shadow:inset 3px 0 var(--accent);
}

.mail-list-item small {
    color:var(--muted);
    font-size:10px;
}

.mail-list-item strong {
    font-size:13px;
}

.mail-search {
    display:grid;
    gap:8px;
}

.mail-search input {
    width:100%;
}

.mail-preview {
    padding:24px;
    min-width:0;
    overflow-wrap:anywhere;
}

.mail-preview form>label {
    display:block;
    margin-top:16px;
    margin-bottom:6px;
}

.mail-preview input:not([type=checkbox]):not([type=hidden]) {
    width:100%;
    max-width:none;
}

.mail-metadata {
    display:grid;
    grid-template-columns:130px 1fr;
    gap:8px 14px;
    font-size:12px;
    padding:16px 0;
    border-bottom:1px solid var(--line);
}

.mail-metadata dt {
    color:var(--muted);
}

.mail-metadata dd {
    margin:0;
}

.mail-preview details {
    border:1px solid var(--line);
    padding:12px;
    border-radius:5px;
    margin:16px 0;
}

.mail-preview summary {
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}

.mail-actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:20px;
}

.mail-actions button {
    font-size:12px;
}

.notice {
    padding:14px;
    background:#fff8e9;
    border:1px solid #e8d5a9;
    border-radius:5px;
    color:#77551b;
}

.notice.error,.error-text {
    color:#9e343d!important;
}

.workspace-layout .admin-tabs-wrap {
    display:none;
}

.workspace-layout .container {
    width:100%;
    max-width:1540px!important;
    border:1px solid var(--line);
    border-radius:8px;
    margin:auto!important;
}

.workspace-layout .container>h1 {
    font-size:28px;
    letter-spacing:0;
}

.workspace-layout .card,.workspace-layout .white-card,.workspace-layout .admin-section-card {
    border-radius:7px!important;
}

.document-review-confirmation {
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:14px;
    max-width:760px;
}

.document-review-confirmation input {
    flex:0 0 auto;
    width:18px;
    height:18px;
    margin-top:2px;
}

#document-identity td {
    overflow-wrap:anywhere;
    max-width:480px;
}

.compliance-workspace { overflow-wrap:anywhere; }
.compliance-notice { border-left:4px solid #bc8320; background:#fff5d9; padding:14px 18px; margin:18px 0; }
.compliance-notice p { margin:6px 0 0; }
.device-facts.compliance-counts { grid-template-columns:repeat(4,minmax(0,1fr)); }
.compliance-counts dd { font-size:24px; font-weight:650; }
.compliance-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin:16px 0; }
.compliance-filters label { display:grid; gap:5px; flex:1 1 180px; min-width:0; }
.compliance-filters input, .compliance-filters select { width:100%; min-width:0; min-height:40px; padding:8px; border:1px solid var(--line); border-radius:4px; background:#fff; }
.compliance-filters button { min-height:40px; padding:8px 16px; border:1px solid var(--accent); border-radius:4px; background:var(--accent); color:#fff; }
.compliance-filters > a { padding:10px 0; }
.compliance-pages { display:flex; flex-wrap:wrap; gap:12px 24px; margin:18px 0; }
.compliance-pages a { flex-shrink:0; white-space:nowrap; }
.compliance-findings { list-style:none; padding:0; }
.compliance-findings li { display:flex; gap:16px; justify-content:space-between; align-items:start; padding:18px 0; border-bottom:1px solid var(--line); }
.compliance-findings li > div { min-width:0; }
.compliance-findings .status-badge { flex-shrink:0; }
.compliance-findings p { margin:7px 0; }
.compliance-details { display:grid; grid-template-columns:minmax(180px,1fr) minmax(0,3fr); gap:16px 24px; }
.compliance-details dt { color:var(--muted); }
.compliance-details dd { margin:0; }
.compliance-json { white-space:pre-wrap; overflow-wrap:anywhere; padding:16px; background:#fff; border:1px solid var(--line); }
@media(max-width:600px) {
    .device-facts.compliance-counts { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .compliance-details { grid-template-columns:1fr; gap:6px; }
    .compliance-details dd { margin-bottom:16px; }
    .compliance-findings li { flex-direction:column; gap:8px; }
}

.device-workspace { overflow-wrap:anywhere; }
.device-workspace .workspace-heading > div { min-width:0; }
.device-passport { display:inline-block; margin-left:12px; color:var(--muted); }
.device-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.device-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0; padding:24px 0; border-block:1px solid var(--line); }
.device-facts dt { color:var(--muted); font-size:12px; }
.device-facts dd { margin:6px 0 0; font-weight:600; }
.device-sections { display:flex; flex-wrap:wrap; gap:20px; padding:16px 0; }
.device-sections a { text-decoration:none; }
.device-columns { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr); gap:36px; }
.device-columns > div { min-width:0; }
.device-section { border-top:1px solid var(--line); padding:24px 0; min-width:0; scroll-margin-top:16px; }
.device-section h2 { margin:0 0 16px; font-size:17px; }
.device-related-list,.device-issues { list-style:none; padding:0; margin:0; }
.device-related-list li { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; border-bottom:1px solid var(--line); padding:14px 0; }
.device-related-list li > div { min-width:0; }
.device-related-list a { font-weight:600; text-decoration:none; }
.device-related-list small,.device-issues small { display:block; font-size:11px; color:var(--muted); margin-top:5px; }
.device-issues li { padding:12px 16px; border-left:3px solid #c38a24; background:#fff8e9; margin-bottom:8px; }
.device-timeline { list-style:none; padding:0 16px 0 0; margin:0; max-height:760px; overflow-y:auto; }
.device-timeline li { display:grid; gap:5px; padding:0 0 24px 18px; border-left:2px solid var(--line); }
.device-timeline time,.device-timeline small { color:var(--muted); font-size:11px; }
.device-timeline a { font-size:12px; text-decoration:none; }
.device-timeline strong { font-size:13px; }
@media(max-width:1100px) { .device-columns { grid-template-columns:minmax(0,1fr); gap:0; } }
@media(max-width:760px) {
    .device-facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 14px; }
    .device-passport { display:block; margin:6px 0 0; }
    .device-related-list li { flex-wrap:wrap; }
    .device-timeline { max-height:500px; }
}

.workspace-layout .table-grid {
    font-size:12px;
}

.workspace-layout .table-grid th {
    color:var(--muted);
    background:#f6f9fa!important;
}

.workspace-layout .table-grid td,.workspace-layout .table-grid th {
    padding:12px!important;
}

.workspace-layout .sub-nav a {
    border-radius:5px!important;
}

.workspace-layout .sub-nav a.active {
    color:var(--accent)!important;
    background:#edf6f2!important;
    border-color:#a4c7bd!important;
}

@media(max-width:1250px) {
    .workspace-sidebar {
        width:205px;
    }

    .workspace-layout .main-content,.workspace-topbar {
        margin-left:205px;
    }

    .workspace-layout .main-content {
        padding:24px;
    }

    .mail-workspace {
        grid-template-columns:160px minmax(210px,280px) minmax(0,1fr);
    }

    .workspace-columns {
        grid-template-columns:1fr;
    }

    .metric-grid {
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:1000px) {
    .mail-workspace {
        grid-template-columns:160px minmax(0,1fr);
    }

    .mail-preview {
        grid-column:1/-1;
        border-top:1px solid var(--line);
    }

    .workspace-topbar>span {
        display:none;
    }

    .workspace-topbar form {
        flex:1;
    }

    .workspace-layout .container [style*="grid-template-columns:minmax(360px"] {
        grid-template-columns:1fr!important;
    }

}

@media(max-width:760px) {
    .workspace-sidebar {
        position:static;
        width:auto;
        padding:14px;
        display:block;
    }

    .workspace-brand {
        padding-bottom:12px!important;
    }

    .workspace-sidebar nav {
        display:flex;
        flex-wrap:wrap;
        gap:4px;
    }

    .workspace-sidebar nav a {
        font-size:12px;
        padding:8px;
    }

    .nav-caption,.workspace-account {
        display:none;
    }

    .workspace-layout .main-content,.workspace-topbar {
        margin-left:0;
        padding:16px;
    }

    .workspace-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:16px;
    }

    .workspace-heading h1 {
        font-size:26px;
    }

    .metric-grid {
        gap:10px;
    }

    .metric-card {
        padding:16px;
    }

    .metric-card strong {
        font-size:28px;
    }

    .workspace-card {
        padding:16px;
    }

    .workflow-strip {
        grid-template-columns:repeat(2,1fr);
    }

    .mail-workspace {
        display:block;
    }

    .mail-folders {
        display:flex;
        flex-wrap:wrap;
        gap:4px;
    }

    .mail-folders p {
        display:none;
    }

    .mail-list {
        border:0;
    }

    .mail-preview {
        padding:16px;
    }

    .workspace-table {
        min-width:620px;
    }

    .mail-preview .workspace-table {
        min-width:420px;
    }

    .mail-metadata {
        grid-template-columns:1fr;
        gap:4px;
    }

    .mail-metadata dd {
        margin-bottom:10px;
    }

    .section-heading {
        flex-wrap:wrap;
    }

    .workspace-layout .container {
        padding:16px;
    }

    .workspace-layout .container [style*="grid-template-columns:"] {
        grid-template-columns:1fr!important;
    }

}

@media print {
    .workspace-sidebar,.workspace-topbar,.mail-actions {
        display:none;
    }

    .workspace-layout .main-content {
        margin:0;
        padding:0;
    }

}

/* Keep legacy tables scrollable without moving the entire workspace off screen. */
.workspace-layout .container .table-scroll {
    max-width:100%;
    min-width:0;
    margin-top:12px;
}

.mail-list {
    max-height:calc(100vh - 270px);
    min-height:340px;
    overflow-y:auto;
}

@media(max-width:760px) {
    .workspace-account {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:12px 8px 0;
        margin:0;
    }

    .workspace-account button {
        margin:0;
        min-height:34px;
    }

    .mail-list {
        max-height:440px;
        min-height:0;
    }

}

/* Keep profile editing usable without widening the workspace on narrow screens. */
.profile-editor { border: 0; padding: 0; min-width: 0; display: grid; gap: 16px; }
.profile-editor label, .profile-rule label { display: grid; gap: 6px; min-width: 0; }
.profile-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.profile-field-grid > label { display: grid; gap: 6px; min-width: 0; }
.compliance-workspace textarea, .compliance-workspace select, .compliance-workspace input:not([type=checkbox]):not([type=hidden]) { max-width: 100%; min-width: 0; width: 100%; box-sizing: border-box; }
.compliance-workspace textarea { resize: vertical; padding: 10px; border: 1px solid #b9c3cc; border-radius: 4px; font: inherit; }
.profile-rule { padding: 18px 0; border-bottom: 1px solid #dbe1e5; }
.profile-rule summary { cursor: pointer; }
.profile-rule summary span { display: block; color: #52616b; margin: 6px 0 0 18px; }
.profile-rule > label, .profile-rule > .profile-field-grid { margin-top: 12px; }
.compliance-workspace .profile-check { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; }
.profile-check input { flex: 0 0 18px; width: 18px; height: 18px; margin: 2px 0 0; }
.profile-editor:disabled { opacity: .8; }
.compliance-workspace h1 { overflow-wrap: anywhere; }
@media (max-width: 700px) { .profile-field-grid { grid-template-columns: minmax(0, 1fr); } }
