:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#172033;background:#eef2f7;font-synthesis:none;--navy:#0b2447;--blue:#1769aa;--line:#dbe2ec;--muted:#687386}*{box-sizing:border-box}body{margin:0;min-width:1100px}button,input{font:inherit}.app-header{height:68px;background:var(--navy);color:white;display:flex;align-items:center;justify-content:space-between;padding:0 28px;box-shadow:0 2px 12px #06162b38}.brand{display:flex;align-items:center;gap:12px}.brand>span{display:grid;place-items:center;width:38px;height:38px;background:#fff1;border:1px solid #ffffff2b;border-radius:10px}.brand div{display:flex;flex-direction:column;line-height:1}.brand strong{font-size:18px;letter-spacing:.13em}.brand small{font-size:10px;letter-spacing:.18em;margin-top:5px;color:#b8d9f6}.source-status{font-size:13px;color:#dbeafe;display:flex;align-items:center;gap:8px}.source-status i{width:8px;height:8px;border-radius:50%;background:#5ee1a4;box-shadow:0 0 0 4px #5ee1a41b}main{padding:22px 26px}.grid-card,.panel,.documents-layout{background:white;border:1px solid var(--line);border-radius:13px;box-shadow:0 4px 16px #1c30490b}.grid-toolbar{display:flex;align-items:center;justify-content:space-between;padding:19px 20px;border-bottom:1px solid var(--line)}h1{margin:0;font-size:24px;letter-spacing:-.02em}.grid-toolbar>div>span{display:block;color:var(--muted);font-size:13px;margin-top:4px}.grid-actions{display:flex;align-items:center;gap:9px}.search{width:330px;height:38px;border:1px solid #cbd5e1;border-radius:8px;padding:0 12px;outline:none}.search:focus{border-color:var(--blue);box-shadow:0 0 0 3px #1769aa18}.button,.doc-actions button,.doc-actions label{height:38px;border-radius:8px;border:1px solid #cbd5e1;background:white;padding:0 12px;display:inline-flex;gap:7px;align-items:center;cursor:pointer;white-space:nowrap}.button.primary{background:var(--blue);border-color:var(--blue);color:white}.column-picker{position:relative}.column-picker summary{list-style:none}.column-picker summary::-webkit-details-marker{display:none}.column-menu{position:absolute;right:0;top:45px;background:white;border:1px solid var(--line);box-shadow:0 12px 32px #14253b29;border-radius:9px;padding:8px;width:220px;z-index:5}.column-menu label{display:flex;align-items:center;gap:9px;padding:8px;font-size:13px}.table-wrap{height:calc(100vh - 156px);overflow:auto}table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}thead{position:sticky;top:0;z-index:2}th{background:#f6f8fb;color:#4b586a;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:11px 13px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer}th .sort{float:right;margin-left:10px;color:#94a3b8}.sort svg{width:14px;height:14px}td{padding:11px 13px;border-bottom:1px solid #edf0f4;white-space:nowrap}tbody tr{cursor:pointer}tbody tr:hover{background:#f3f8fd}tbody tr.selected{background:#e8f2fc}td:first-child{font-weight:700;color:var(--blue)}.detail-page{max-width:1500px;margin:auto}.detail-top{display:flex;align-items:flex-start;gap:14px;padding:5px 2px 18px}.icon-button{border:1px solid var(--line);background:white;border-radius:9px;width:40px;height:40px;display:grid;place-items:center;cursor:pointer}.store-identity{flex:1}.store-identity .eyebrow{font-size:11px;letter-spacing:.12em;font-weight:800;color:var(--blue)}.store-identity p{margin:7px 0 0;color:var(--muted);white-space:pre-line;display:flex;gap:6px}.detail-badges{display:flex;gap:8px}.detail-badges span{background:#e5f1fb;color:#0b5e99;border:1px solid #c4e0f4;border-radius:999px;padding:6px 11px;font-size:12px;font-weight:650}.tabs{display:flex;border-bottom:1px solid #cbd5e1;margin-bottom:16px}.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:11px 18px;color:var(--muted);font-weight:650;cursor:pointer}.tabs button.active{color:var(--blue);border-bottom-color:var(--blue)}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.panel{padding:18px}.span-2{grid-column:span 2}.span-3{grid-column:span 3}.panel-title{font-weight:750;color:#213149;display:flex;align-items:center;gap:8px;margin-bottom:16px}.panel-title svg{width:18px;color:var(--blue)}.fields{display:grid;gap:14px}.fields.four{grid-template-columns:repeat(4,1fr)}.field{min-width:0}.field span,.notes span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#7b8798;margin-bottom:5px}.field strong{font-size:14px;white-space:pre-line}.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:18px 10px}.timeline div{position:relative;padding-left:14px}.timeline div>span{position:absolute;left:0;top:2px;width:6px;height:35px;background:#d8e9f7;border-radius:4px}.timeline small{display:block;color:var(--muted);font-size:11px}.timeline strong{font-size:13px}.notes{display:grid;grid-template-columns:1fr 1fr;gap:35px}.notes p{margin:0;white-space:pre-line;line-height:1.5}.source-panels{display:grid;gap:14px}.raw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.documents-layout{display:grid;grid-template-columns:280px minmax(450px,1fr) 360px;min-height:650px;overflow:hidden}.doc-sources,.preview{background:#f8fafc;padding:15px;border-right:1px solid var(--line)}.preview{border-right:0;border-left:1px solid var(--line);position:relative}.doc-heading{font-weight:750;font-size:13px;display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.doc-heading button{border:0;background:none;cursor:pointer}.source-group{margin-bottom:18px}.source-group>strong{display:block;font-size:11px;text-transform:uppercase;color:#7a8797;margin:0 7px 6px}.source-group>button{width:100%;border:0;background:none;border-radius:7px;text-align:left;padding:8px;display:flex;gap:8px;align-items:flex-start;cursor:pointer;color:#334155}.source-group>button.active{background:#dcecf9;color:#075c98}.source-group button span{overflow:hidden;text-overflow:ellipsis}.source-group small{display:block;color:#8a95a5;padding:8px}.doc-browser{min-width:0}.doc-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid var(--line);gap:12px}.breadcrumbs{display:flex;align-items:center;min-width:0}.breadcrumbs button{border:0;background:none;padding:5px;cursor:pointer;color:#3f5871;max-width:130px;overflow:hidden;text-overflow:ellipsis}.doc-actions{display:flex;gap:6px}.doc-actions button,.doc-actions label{height:34px;font-size:12px}.doc-actions svg{width:15px}.file-list>button{width:100%;border:0;border-bottom:1px solid #edf1f5;background:white;display:grid;grid-template-columns:24px 1fr 90px 95px;align-items:center;text-align:left;padding:11px 14px;cursor:pointer;color:#526071;font-size:12px}.file-list>button:hover,.file-list>button.selected{background:#eaf3fb}.file-list svg{width:18px;color:#327ab5}.file-name{font-size:13px;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview iframe{width:100%;height:500px;border:1px solid var(--line);background:white}.preview-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;gap:8px}.preview-title strong{font-size:13px;overflow:hidden;text-overflow:ellipsis}.preview-title a{font-size:12px;color:var(--blue);display:flex;gap:5px;text-decoration:none}.empty{display:grid;place-items:center;color:#8995a6;min-height:180px;font-size:13px}.folder-preview{display:flex;flex-direction:column;align-items:center;gap:12px;color:#8aa5bd;margin-top:65px}.item-menu{position:absolute;bottom:15px;right:15px}.item-menu summary{list-style:none;border:1px solid var(--line);border-radius:7px;padding:6px;cursor:pointer;background:white}.item-menu summary svg{width:18px}.item-menu button{display:block;width:130px;padding:8px;border:0;background:white;text-align:left;cursor:pointer}.item-menu .danger{color:#b42318}.error,.fatal{padding:14px;color:#a51f1f;background:#fff0f0;border:1px solid #fecaca;border-radius:8px;margin:12px}.fatal{max-width:700px;margin:50px auto}.loading{display:flex;justify-content:center;gap:10px;margin-top:120px;color:var(--muted)}.loading svg{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1200px){.documents-layout{grid-template-columns:240px 1fr 300px}.fields.four{grid-template-columns:repeat(2,1fr)}}
/* ==========================================================================
   Status pills, badges, and modals
   ========================================================================== */

/* Status pills and badges */
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}
.status-active { background: #dcfce7; color: #166534; }
.status-completed { background: #e0f2fe; color: #075985; }
.status-upcoming { background: #fef3c7; color: #92400e; }
.status-muted { background: #f1f5f9; color: #475569; }
.badge-admin {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    background: #fee2e2;
    color: #991b1b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.badge-grant {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
    margin-right: 4px;
    margin-bottom: 2px;
}
.store-link, .store-link:link, .store-link:visited {
    font-weight: 700;
    color: #1769aa !important;
    text-decoration: none;
}
.store-link:hover, .store-link:focus {
    color: #0c405f !important;
    text-decoration: underline;
}
.store-name-link {
    color: #1e293b;
    text-decoration: none;
    font-weight: 500;
}
.store-name-link:hover {
    color: #1769aa;
    text-decoration: underline;
}

/* Service directory grid styling matching legacy Dama-ClientPortal */
.service-shell > main, .authenticated-shell > main {
    background: #084069 !important;
    padding: 0 22px 22px !important;
}
.service-grid, .grid-card.service-grid {
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.service-grid table, .grid-card table {
    background: #ffffff !important;
}
.service-grid td, .grid-card td {
    background: #ffffff !important;
    color: #1e293b !important;
    border-bottom: 1px solid #edf0f4 !important;
}
.service-grid tbody tr:hover td, .grid-card tbody tr:hover td {
    background: #f3f8fd !important;
}
.service-grid th, .grid-card.service-grid th {
    background: #ebebeb !important;
    color: #000000 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-right: 1px solid #d3d3d3 !important;
}
.grid-card:not(.service-grid) th {
    background: #f8fafc;
    color: #475569;
}

/* ==========================================================================
   Modals & Dialogs (Admin Account Management & Operations)
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(11, 36, 71, 0.62);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 24px;
    overflow-y: auto;
}
.modal-overlay[style*="display: none"],
.modal-overlay.hidden {
    display: none !important;
}
.modal-container {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 48px rgba(11, 36, 71, 0.25), 0 4px 12px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 620px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #c5d0db;
    animation: modalSlideIn 0.16s ease-out;
}
.modal-container.modal-lg {
    max-width: 880px;
}
.modal-container.modal-sm {
    max-width: 480px;
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: scale(0.96) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #dbe2ec;
    background: #f8fafc;
}
.modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #172033;
}
.modal-subtitle {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
}
.modal-close-btn {
    background: transparent;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 6px;
    transition: all 0.15s ease;
    text-decoration: none;
}
.modal-close-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #dbe2ec;
    background: #f8fafc;
}
.modal-form-grid {
    display: grid;
    gap: 18px;
}
.modal-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.modal-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.modal-form-group label {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}
.modal-form-group input[type="text"],
.modal-form-group input[type="email"],
.modal-form-group input[type="password"],
.modal-form-group select,
.modal-form-group textarea {
    font: inherit;
    font-size: 13px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #1e293b;
    outline: none;
    transition: all 0.15s ease;
}
.modal-form-group input:focus,
.modal-form-group select:focus,
.modal-form-group textarea:focus {
    border-color: #1769aa;
    box-shadow: 0 0 0 3px rgba(23, 105, 170, 0.15);
}
.modal-form-group input:disabled,
.modal-form-group input[readonly] {
    background: #f1f5f9;
    color: #64748b;
}
.modal-check-line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    cursor: pointer;
    user-select: none;
}
.modal-check-line input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #1769aa;
    cursor: pointer;
}
.modal-callout-warning {
    padding: 12px 14px;
    background: #fff8eb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 6px;
    font-size: 12px;
    color: #92400e;
    line-height: 1.45;
}