@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');

:root {
    --cc-navy: #0B192C;
    --cc-navy-light: #1A2F4C;
    --cc-turquoise: #00B4D8;
    --cc-turquoise-glow: rgba(0, 180, 216, 0.15);
}

html, body {
    height: 100%;
}

body {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: #f8fafc;
    color: #0B192C;
}

h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

.label-uppercase {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #64748b;
}

.surface-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.125rem;
}

.navy-bg { background-color: var(--cc-navy) !important; }
.navy-light-bg { background-color: var(--cc-navy-light) !important; }
.turquoise-bg { background-color: var(--cc-turquoise) !important; }
.text-navy { color: var(--cc-navy) !important; }
.text-turquoise { color: var(--cc-turquoise) !important; }
.border-turquoise { border-color: var(--cc-turquoise) !important; }

.btn-cc-primary {
    background-color: var(--cc-navy);
    border-color: var(--cc-navy);
    color: #fff;
}
.btn-cc-primary:hover {
    background-color: var(--cc-navy-light);
    border-color: var(--cc-navy-light);
    color: #fff;
}

.btn-cc-outline {
    border: 1px solid #cbd5e1;
    color: var(--cc-navy);
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.btn-cc-outline:hover {
    border-color: var(--cc-navy);
    color: var(--cc-navy);
}

/* Sidebar */
.cc-sidebar {
    width: 256px;
    min-height: 100vh;
    background-color: var(--cc-navy);
    color: #fff;
    flex-shrink: 0;
}

.cc-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #cbd5e1;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background 0.15s, color 0.15s;
}

.cc-nav-link:hover {
    background-color: var(--cc-navy-light);
    color: #fff;
}

.cc-nav-link.active {
    border-left-color: var(--cc-turquoise);
    background-color: var(--cc-navy-light);
    color: #fff;
}

/* KPI */
.kpi-card {
    transition: transform 0.15s, border-color 0.15s;
}
.kpi-card:hover {
    transform: translateY(-2px);
    border-color: var(--cc-turquoise) !important;
}

.kpi-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cc-turquoise-glow);
    border: 1px solid rgba(0, 180, 216, 0.3);
    border-radius: 0.125rem;
    color: var(--cc-turquoise);
}

/* Login */
.login-visual {
    position: relative;
    background-color: var(--cc-navy);
    overflow: hidden;
    min-height: 100vh;
}

.login-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1738944910373-811b7b417762?crop=entropy&cs=srgb&fm=jpg&q=85');
    background-size: cover;
    background-position: center;
    opacity: 0.55;
}

.login-tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11, 25, 44, 0.85) 0%, rgba(26, 47, 76, 0.6) 100%);
}

/* Workflow steps */
.step-node {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    border-radius: 0.125rem;
    cursor: pointer;
}

.step-node:hover { background: #f8fafc; }
.step-node.active { background: #f8fafc; }

.step-node-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid;
    margin-top: 6px;
    flex-shrink: 0;
}

.step-dot-completed { border-color: #10b981; background: #10b981; }
.step-dot-pending { border-color: #fbbf24; background: #fbbf24; }
.step-dot-missing { border-color: #f43f5e; background: #f43f5e; }

.status-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 0.125rem;
    white-space: nowrap;
}

.status-completed { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.status-pending { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.status-missing { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }

/* Patient table row */
.patient-row {
    display: grid;
    grid-template-columns: 4fr 3fr 2fr 2fr 1fr;
    padding: 16px 20px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.patient-row:hover { background: #f8fafc; }

@media (max-width: 767.98px) {
    .patient-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .cc-sidebar { display: none !important; }
}

.file-cat-btn.active {
    border-color: var(--cc-turquoise) !important;
    background: rgba(0, 180, 216, 0.05);
}

.file-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 0.125rem;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.file-dropzone:hover, .file-dropzone.dragover {
    border-color: var(--cc-turquoise);
    background: rgba(0, 180, 216, 0.06);
}

.dose-card.completed {
    border-color: #86efac !important;
    background: rgba(236, 253, 245, 0.4);
}

.progress-bar-cc {
    height: 6px;
    background: #e2e8f0;
    border-radius: 0.125rem;
    overflow: hidden;
}
.progress-bar-cc .fill {
    height: 100%;
    background: var(--cc-turquoise);
}

.form-control:focus, .form-select:focus {
    border-color: var(--cc-turquoise);
    box-shadow: 0 0 0 0.2rem rgba(0, 180, 216, 0.15);
}

.audit-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cc-turquoise-glow);
    border: 1px solid rgba(0, 180, 216, 0.3);
    border-radius: 0.125rem;
    color: var(--cc-turquoise);
    flex-shrink: 0;
}