/**
 * =====================================================
 * CPCS FRONTEND V1 — SHARED COMPONENTS + UX STATES
 * Design Freeze: 2026-08-31
 * =====================================================
 */

:root{
    --cpcs-v1-bg:#f5f8fc;
    --cpcs-v1-surface:#ffffff;
    --cpcs-v1-surface-soft:#f8fafc;
    --cpcs-v1-border:#e2e8f0;
    --cpcs-v1-border-strong:#cbd5e1;
    --cpcs-v1-text:#0f172a;
    --cpcs-v1-muted:#64748b;
    --cpcs-v1-faint:#94a3b8;
    --cpcs-v1-blue:#2563eb;
    --cpcs-v1-blue-soft:#eff6ff;
    --cpcs-v1-green:#16a34a;
    --cpcs-v1-amber:#d97706;
    --cpcs-v1-red:#dc2626;
    --cpcs-v1-radius-sm:8px;
    --cpcs-v1-radius:12px;
    --cpcs-v1-radius-lg:18px;
    --cpcs-v1-shadow:0 12px 34px rgba(15,23,42,.07);
    --cpcs-v1-focus:0 0 0 3px rgba(37,99,235,.18);
}

.cpcs-visually-hidden{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}

.cpcs-btn{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid transparent;
    border-radius:10px;
    padding:0 14px;
    font:inherit;
    font-size:12px;
    font-weight:750;
    cursor:pointer;
    transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease;
}
.cpcs-btn svg{width:15px;height:15px}
.cpcs-btn:hover:not(:disabled){transform:translateY(-1px)}
.cpcs-btn:focus-visible{outline:none;box-shadow:var(--cpcs-v1-focus)}
.cpcs-btn:disabled{opacity:.52;cursor:not-allowed}
.cpcs-btn.primary{background:#1d4ed8;color:white;box-shadow:0 8px 20px rgba(37,99,235,.18)}
.cpcs-btn.secondary{background:white;border-color:var(--cpcs-v1-border);color:#334155}
.cpcs-btn.ghost{background:transparent;color:#475569}
.cpcs-btn.danger{background:#dc2626;color:white}
.cpcs-btn.success{background:#16a34a;color:white}

.cpcs-field{display:flex;flex-direction:column;gap:6px}
.cpcs-field > span,.cpcs-field > label{
    color:#475569;
    font-size:9px;
    font-weight:800;
    letter-spacing:.055em;
    text-transform:uppercase;
}
.cpcs-field input,
.cpcs-field select,
.cpcs-field textarea,
.cpcs-input,
.cpcs-select,
.cpcs-textarea{
    width:100%;
    min-height:40px;
    border:1px solid var(--cpcs-v1-border);
    border-radius:10px;
    background:white;
    color:var(--cpcs-v1-text);
    padding:9px 11px;
    font:inherit;
    font-size:12px;
    outline:none;
}
.cpcs-field textarea,.cpcs-textarea{min-height:94px;resize:vertical}
.cpcs-field input:focus,
.cpcs-field select:focus,
.cpcs-field textarea:focus,
.cpcs-input:focus,
.cpcs-select:focus,
.cpcs-textarea:focus{
    border-color:#93c5fd;
    box-shadow:var(--cpcs-v1-focus);
}

.cpcs-card{
    border:1px solid var(--cpcs-v1-border);
    border-radius:var(--cpcs-v1-radius-lg);
    background:rgba(255,255,255,.92);
    box-shadow:var(--cpcs-v1-shadow);
}
.cpcs-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:16px 18px;
    border-bottom:1px solid #edf2f7;
}
.cpcs-card-header small{color:var(--cpcs-v1-muted);font-size:8px;font-weight:850;letter-spacing:.11em}
.cpcs-card-header h2,.cpcs-card-header h3{margin:4px 0 0;color:#0b203b;letter-spacing:-.025em}
.cpcs-card-body{padding:18px}

.cpcs-table-shell{
    overflow:auto;
    border:1px solid var(--cpcs-v1-border);
    border-radius:14px;
    background:white;
}
.cpcs-table{width:100%;border-collapse:separate;border-spacing:0;font-size:11px}
.cpcs-table th{
    position:sticky;
    top:0;
    z-index:1;
    padding:11px 12px;
    background:#f8fafc;
    border-bottom:1px solid var(--cpcs-v1-border);
    color:#64748b;
    font-size:8px;
    font-weight:850;
    letter-spacing:.06em;
    text-align:left;
    text-transform:uppercase;
    white-space:nowrap;
}
.cpcs-table td{
    padding:12px;
    border-bottom:1px solid #f1f5f9;
    color:#334155;
    vertical-align:middle;
}
.cpcs-table tbody tr:last-child td{border-bottom:0}
.cpcs-table tbody tr:hover td{background:#f8fbff}

.cpcs-status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:24px;
    padding:0 8px;
    border:1px solid #e2e8f0;
    border-radius:999px;
    background:#f8fafc;
    color:#475569;
    font-size:8px;
    font-weight:800;
    white-space:nowrap;
}
.cpcs-status::before{content:"";width:6px;height:6px;border-radius:50%;background:#94a3b8}
.cpcs-status.good,.cpcs-status.active,.cpcs-status.approved,.cpcs-status.ready{background:#ecfdf3;border-color:#bbf7d0;color:#15803d}
.cpcs-status.good::before,.cpcs-status.active::before,.cpcs-status.approved::before,.cpcs-status.ready::before{background:#22c55e}
.cpcs-status.warning,.cpcs-status.pending,.cpcs-status.watch{background:#fffbeb;border-color:#fde68a;color:#b45309}
.cpcs-status.warning::before,.cpcs-status.pending::before,.cpcs-status.watch::before{background:#f59e0b}
.cpcs-status.danger,.cpcs-status.critical,.cpcs-status.rejected,.cpcs-status.blocked{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.cpcs-status.danger::before,.cpcs-status.critical::before,.cpcs-status.rejected::before,.cpcs-status.blocked::before{background:#ef4444}
.cpcs-status.info{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}.cpcs-status.info::before{background:#3b82f6}

.cpcs-state{
    min-height:220px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:8px;
    padding:28px;
    color:var(--cpcs-v1-muted);
}
.cpcs-state-icon{
    width:46px;height:46px;display:grid;place-items:center;border-radius:14px;
    background:#f1f5f9;color:#64748b;margin-bottom:4px;
}
.cpcs-state-icon svg{width:20px;height:20px}
.cpcs-state strong{color:#1e293b;font-size:13px}
.cpcs-state p{max-width:480px;margin:0;font-size:11px;line-height:1.6}
.cpcs-error-state .cpcs-state-icon{background:#fef2f2;color:#dc2626}
.cpcs-permission-state .cpcs-state-icon{background:#fffbeb;color:#d97706}
.cpcs-spinner,.cpcs-inline-spinner{
    display:inline-block;border-radius:50%;border:2px solid #dbeafe;border-top-color:#2563eb;animation:cpcsSpin .75s linear infinite;
}
.cpcs-spinner{width:30px;height:30px}.cpcs-inline-spinner{width:13px;height:13px}
@keyframes cpcsSpin{to{transform:rotate(360deg)}}

.cpcs-toast-host{
    position:fixed;
    z-index:5000;
    right:18px;
    top:88px;
    width:min(380px,calc(100vw - 32px));
    display:flex;
    flex-direction:column;
    gap:10px;
    pointer-events:none;
}
.cpcs-toast{
    pointer-events:auto;
    display:grid;
    grid-template-columns:34px 1fr 28px;
    gap:10px;
    align-items:center;
    padding:11px 12px;
    border:1px solid rgba(226,232,240,.95);
    border-radius:14px;
    background:rgba(255,255,255,.96);
    box-shadow:0 18px 50px rgba(15,23,42,.16);
    backdrop-filter:blur(18px);
    opacity:0;
    transform:translateY(-7px) scale(.98);
    transition:opacity .18s ease,transform .18s ease;
}
.cpcs-toast.is-visible{opacity:1;transform:none}
.cpcs-toast-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#eff6ff;color:#2563eb}
.cpcs-toast.is-success .cpcs-toast-icon{background:#ecfdf3;color:#16a34a}
.cpcs-toast.is-warning .cpcs-toast-icon{background:#fffbeb;color:#d97706}
.cpcs-toast.is-error .cpcs-toast-icon{background:#fef2f2;color:#dc2626}
.cpcs-toast-icon svg{width:15px;height:15px}
.cpcs-toast-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.cpcs-toast-copy strong{font-size:10px;color:#0f172a}.cpcs-toast-copy span{font-size:10px;line-height:1.45;color:#64748b}
.cpcs-toast-close{width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:#94a3b8;cursor:pointer}.cpcs-toast-close svg{width:14px;height:14px}

.cpcs-ui-overlay{
    position:fixed;inset:0;z-index:5100;display:grid;place-items:center;padding:20px;background:rgba(15,23,42,.34);backdrop-filter:blur(7px);
}
.cpcs-ui-dialog{
    width:min(460px,100%);
    padding:22px;
    border:1px solid rgba(255,255,255,.72);
    border-radius:20px;
    background:rgba(255,255,255,.97);
    box-shadow:0 30px 80px rgba(15,23,42,.24);
}
.cpcs-ui-dialog-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:#fffbeb;color:#d97706;margin-bottom:14px}
.cpcs-ui-dialog-icon.danger{background:#fef2f2;color:#dc2626}
.cpcs-ui-dialog-copy h2{margin:0;color:#0f172a;font-size:18px;letter-spacing:-.03em}
.cpcs-ui-dialog-copy p{margin:8px 0 0;color:#64748b;font-size:11px;line-height:1.6}
.cpcs-ui-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

/* Global search / command palette */
.cpcs-search-overlay{
    position:fixed;inset:0;z-index:5200;background:rgba(15,23,42,.28);backdrop-filter:blur(8px);padding:72px 18px 18px;
}
.cpcs-search-palette{
    width:min(760px,100%);
    max-height:min(720px,calc(100vh - 100px));
    margin:0 auto;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid rgba(255,255,255,.72);
    border-radius:22px;
    background:rgba(255,255,255,.97);
    box-shadow:0 30px 90px rgba(15,23,42,.25);
}
.cpcs-search-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #e2e8f0}
.cpcs-search-head > svg{width:19px;height:19px;color:#2563eb}
.cpcs-search-head input{flex:1;border:0;outline:0;background:transparent;color:#0f172a;font-size:15px}
.cpcs-search-key{padding:4px 7px;border:1px solid #e2e8f0;border-radius:7px;background:#f8fafc;color:#94a3b8;font-size:8px;font-weight:800}
.cpcs-search-results{overflow:auto;padding:8px}
.cpcs-search-group-label{padding:8px 10px 5px;color:#94a3b8;font-size:8px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.cpcs-search-result{
    width:100%;display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;
    padding:9px 10px;border:0;border-radius:11px;background:transparent;text-align:left;cursor:pointer;
}
.cpcs-search-result:hover,.cpcs-search-result.is-active{background:#eff6ff}
.cpcs-search-result-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#f1f5f9;color:#475569}
.cpcs-search-result-icon svg{width:14px;height:14px}
.cpcs-search-result-copy{min-width:0}.cpcs-search-result-copy strong{display:block;color:#0f172a;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cpcs-search-result-copy span{display:block;margin-top:3px;color:#94a3b8;font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpcs-search-result-type{color:#64748b;font-size:8px;font-weight:800;text-transform:uppercase}
.cpcs-search-footer{display:flex;gap:14px;padding:9px 14px;border-top:1px solid #eef2f7;background:#f8fafc;color:#94a3b8;font-size:8px}

/* Accessible focus */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{
    outline:2px solid rgba(37,99,235,.8);
    outline-offset:2px;
}

/* Generic responsive tables and forms */
@media(max-width:900px){
    .cpcs-table-shell{border-radius:12px}
    .cpcs-table{min-width:760px}
    .cpcs-toast-host{top:78px;right:12px}
}
@media(max-width:600px){
    .cpcs-search-overlay{padding:12px}
    .cpcs-search-palette{max-height:calc(100vh - 24px);border-radius:17px}
    .cpcs-ui-overlay{padding:12px}
    .cpcs-ui-dialog{border-radius:17px}
    .cpcs-toast-host{top:74px;width:calc(100vw - 20px);right:10px}
}

@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto!important}
    .cpcs-toast,.cpcs-btn{transition:none!important}
    .cpcs-spinner,.cpcs-inline-spinner{animation-duration:1.5s}
}

.cpcs-skip-link{
    position:fixed;left:12px;top:-60px;z-index:7000;padding:9px 12px;border-radius:10px;background:#0f172a;color:#fff;font-size:10px;font-weight:800;text-decoration:none;
}
.cpcs-skip-link:focus{top:10px}

/* Frontend V1 mobile workspace hardening */
#workspace{min-width:0}
@media(max-width:700px){
    #workspace{width:100%;overflow-x:hidden}
    .project-hub .hub-tabs{
        overflow-x:auto;
        overflow-y:hidden;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
        white-space:nowrap;
    }
    .project-hub .hub-tabs::-webkit-scrollbar{display:none}
    .project-hub .hub-tabs .tab{flex:0 0 auto}
    .ph-modal,.p2-modal,.site-diary-modal,.activity-modal{
        width:min(100%,calc(100vw - 16px))!important;
        max-height:calc(100vh - 16px)!important;
        border-radius:16px!important;
    }
}