/* ============================================================
   AKT Immigration — Case Management Portal Brand CSS
   Layered on top of Tailwind CSS utility classes.
   Only visual overrides — no functionality changes.
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
    --navy: #1B2A4A;
    --navy-light: #2A3F6A;
    --navy-dark: #111D35;
    --gold: #C9A962;
    --gold-light: #D4BC82;
    --gold-dark: #B8944A;
    --gold-subtle: #F8F3E8;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius-sm: 6px;
    --radius-md: 10px;
    --shadow-sm: 0 1px 2px rgba(27, 42, 74, 0.06);
    --shadow-card: 0 1px 3px rgba(27, 42, 74, 0.06), 0 1px 2px rgba(27, 42, 74, 0.04);
    --shadow-md: 0 4px 12px rgba(27, 42, 74, 0.08);
    --shadow-lg: 0 8px 24px rgba(27, 42, 74, 0.12);
}

/* ---------- Base Typography ---------- */
body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: #1f2937; /* gray-800 base */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

/* ---------- Global Readability Overrides ---------- */

/* Boost all light grays to readable levels */
.text-gray-300 { color: #6b7280 !important; }  /* gray-300 → gray-500 */
.text-gray-400 { color: #4b5563 !important; }  /* gray-400 → gray-600 */
.text-gray-500 { color: #374151 !important; }  /* gray-500 → gray-700 */

/* Ensure minimum font sizes for body text */
main .text-xs  { font-size: 13px !important; line-height: 1.5 !important; }
main .text-sm  { font-size: 14px !important; line-height: 1.6 !important; }
main .text-base { font-size: 15px !important; }

/* Make table text readable */
main table td, main table th {
    font-size: 14px;
    line-height: 1.5;
}

/* Ensure labels and field names are readable */
main label,
main p,
main span:not(.inline-block):not(.inline-flex):not([class*="rounded-full"]) {
    min-height: auto;
}

/* Stronger contrast for item-meta and helper text */
.item-meta,
.text-xs.text-gray-400,
.text-xs.text-gray-500,
.text-sm.text-gray-400,
.text-sm.text-gray-500 {
    color: #4b5563 !important; /* gray-600 */
}

/* Make card headings larger */
main h2.font-semibold {
    font-size: 16px !important;
}

main h3 {
    font-size: 15px !important;
}

/* Keep badge/pill text small but readable */
main .rounded-full.text-xs {
    font-size: 12px !important;
    line-height: 1.4 !important;
}

/* Tab count badges - keep small */
main .tab-count {
    font-size: 11px !important;
}

/* Ensure form inputs are readable */
main input, main select, main textarea {
    font-size: 14px !important;
}

/* Breadcrumb stays subtle but readable */
nav.text-sm.text-gray-500 {
    font-size: 13px !important;
    color: #6b7280 !important;
}

nav.text-sm.text-gray-500 .text-gray-700 {
    color: #1f2937 !important;
}

/* ---------- Header Bar ---------- */
header.bg-navy {
    background: linear-gradient(90deg, var(--navy) 0%, var(--navy-dark) 100%);
    border-bottom: 1px solid rgba(201, 169, 98, 0.1);
}

header .tracking-tight {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ---------- Sidebar ---------- */
aside#sidebar {
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
    box-shadow: 2px 0 12px rgba(17, 29, 53, 0.15);
}

/* Sidebar nav links */
aside#sidebar nav a {
    border-left: 3px solid transparent;
    border-radius: 0;
    margin: 1px 0;
    transition: all 0.2s ease;
}

aside#sidebar nav a:hover {
    border-left-color: var(--gold);
}

/* Active sidebar link */
aside#sidebar nav a.bg-navy-light {
    border-left-color: var(--gold);
    background: rgba(201, 169, 98, 0.12);
}

/* Coming Soon section label */
aside#sidebar nav p.uppercase {
    color: var(--gold-dark);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* Coming soon disabled items */
aside#sidebar nav > span.cursor-default {
    position: relative;
}

aside#sidebar nav > span.cursor-default::after {
    content: 'Soon';
    font-size: 9px;
    background: rgba(201, 169, 98, 0.2);
    color: var(--gold-light);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: auto;
    font-style: normal;
    font-weight: 500;
}

/* Sidebar divider */
aside#sidebar .border-navy-light {
    border-color: rgba(201, 169, 98, 0.15);
}

/* ---------- Footer ---------- */
footer {
    font-family: var(--font-body);
    letter-spacing: 0.02em;
}

/* ---------- Dashboard Page ---------- */

/* Dashboard title */
.text-2xl.font-bold.text-navy {
    font-family: var(--font-display);
}

/* "+ New Case" button on dashboard */
a[href*="create"].bg-navy {
    background: var(--gold);
    color: var(--navy-dark);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(201, 169, 98, 0.3);
    transition: all 0.2s ease;
}

a[href*="create"].bg-navy:hover {
    background: var(--gold-dark);
    box-shadow: 0 4px 12px rgba(201, 169, 98, 0.3);
    transform: translateY(-1px);
}

/* Alert pills bar */
.rounded-full.bg-red-100,
.rounded-full.bg-amber-100,
.rounded-full.bg-blue-100 {
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.rounded-full.bg-red-100 {
    border-color: #FECACA;
}

.rounded-full.bg-amber-100 {
    border-color: #FDE68A;
}

.rounded-full.bg-blue-100 {
    border-color: #BFDBFE;
}

/* Cases table container */
.bg-white.rounded-lg.shadow.overflow-hidden {
    border: 1px solid #E5E7EB;
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-md);
}

/* Table header */
#cases-table thead {
    border-bottom: 2px solid #E5E7EB;
}

#cases-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: #6B7280;
}

/* Table rows hover */
#cases-table tbody tr:hover {
    background-color: var(--gold-subtle) !important;
}

/* Case number in table */
#cases-table tbody td:first-child a {
    font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.02em;
}

/* Section headers in dashboard */
.text-lg.font-semibold.text-gray-800 {
    font-family: var(--font-display);
    color: var(--navy);
}

/* Collapsible detail sections */
details.border-red-200,
details.border-amber-200,
details.border-blue-200 {
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow 0.2s;
}

details.border-red-200:hover,
details.border-amber-200:hover,
details.border-blue-200:hover {
    box-shadow: var(--shadow-md);
}

details summary {
    transition: background 0.15s;
}

/* ---------- Status Badges ---------- */
.rounded-full[class*="bg-green-100"],
.rounded-full[class*="bg-blue-100"],
.rounded-full[class*="bg-purple-100"],
.rounded-full[class*="bg-emerald-100"],
.rounded-full[class*="bg-red-100"],
.rounded-full[class*="bg-yellow-100"],
.rounded-full[class*="bg-gray-100"],
.rounded-full[class*="bg-amber-100"] {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ---------- Case Detail Page ---------- */

/* Case header card */
.bg-white.rounded-xl.shadow-sm.border.border-gray-100.mb-6:first-of-type {
    border-top: 3px solid var(--navy);
    box-shadow: var(--shadow-card);
}

/* Case title */
.text-xl.font-bold.text-navy {
    font-family: var(--font-display);
}

/* Case number (muted monospace) */
.text-sm.text-gray-400.mt-0\.5 {
    font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.02em;
}

/* "Client Information" / "Engagement Details" section labels */
.text-xs.font-semibold.text-gray-400.uppercase.tracking-wider {
    color: var(--gold-dark);
    font-size: 11px;
    letter-spacing: 0.08em;
}

/* Section labels */
.text-xs.font-medium.text-gray-500.uppercase {
    color: var(--gold-dark);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* Client Summary card header */
.font-semibold.text-gray-800 {
    font-family: var(--font-display);
    color: var(--navy);
}

/* White cards in case detail */
.bg-white.rounded-xl.shadow-sm.border.border-gray-100 {
    border-color: #E5E7EB;
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-md);
}

/* Panel headers (h2) */
.bg-white.rounded-xl .p-4.border-b h2 {
    font-family: var(--font-display);
    color: var(--navy);
}

/* Stage progress bar layout */
.stage-progress-bar {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.stage-progress-segment {
    flex: 1;
    min-width: 0;
}
.stage-progress-label {
    font-size: 10px;
    line-height: 1.3;
    margin-top: 6px;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Stage progress current segment */
.bg-blue-500.animate-pulse {
    background: linear-gradient(90deg, var(--navy) 0%, var(--gold) 100%) !important;
    box-shadow: 0 0 8px rgba(201, 169, 98, 0.4);
    animation: stage-glow 2s ease-in-out infinite !important;
}

@keyframes stage-glow {
    0%, 100% { box-shadow: 0 0 4px rgba(201, 169, 98, 0.3); }
    50% { box-shadow: 0 0 10px rgba(201, 169, 98, 0.5); }
}

/* Stage progress completed segments */
.h-2.rounded-full.bg-green-500 {
    background-color: var(--navy) !important;
}

/* Current stage name */
.text-blue-600.font-medium {
    color: var(--navy) !important;
    font-weight: 700;
}

/* Document checklist progress bar fill */
.bg-green-500.h-2.rounded-full {
    background: linear-gradient(90deg, var(--navy) 0%, var(--gold) 100%) !important;
}

/* Balance Due negative */
.text-red-600.font-semibold,
.text-red-600.font-bold {
    font-variant-numeric: tabular-nums;
}

/* Fee table background */
.bg-gray-50.rounded-md {
    border: 1px solid #F3F4F6;
}

/* Retainer signed indicator */
.bg-green-500.rounded-full {
    /* Keep green for signed status */
}

/* ---------- Breadcrumb ---------- */
nav.text-sm.text-gray-500 {
    font-family: var(--font-body);
}

nav.text-sm.text-gray-500 a:hover {
    color: var(--gold-dark);
}

nav.text-sm.text-gray-500 .mx-1 {
    color: #D1D5DB;
}

/* ---------- Buttons ---------- */

/* Primary navy buttons */
button.bg-navy,
a.bg-navy:not(a[href*="create"]) {
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

button.bg-navy:hover,
a.bg-navy:not(a[href*="create"]):hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Secondary / outline buttons */
a.border.rounded-md.text-gray-600,
button.bg-gray-100.text-gray-700 {
    transition: all 0.2s ease;
}

a.border.rounded-md.text-gray-600:hover,
button.bg-gray-100.text-gray-700:hover {
    border-color: var(--gold);
    color: var(--gold-dark);
    background: var(--gold-subtle);
}

/* Portal invitation button */
button.bg-amber-50.text-amber-700 {
    background: transparent;
    color: var(--gold-dark);
    border-color: var(--gold);
    transition: all 0.2s ease;
}

button.bg-amber-50.text-amber-700:hover {
    background: var(--gold-subtle);
}

/* ---------- Forms & Inputs ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="tel"],
select,
textarea {
    font-family: var(--font-body);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.15) !important;
    --tw-ring-color: rgba(201, 169, 98, 0.15) !important;
}

label {
    font-family: var(--font-body);
}

fieldset legend {
    font-family: var(--font-display);
    color: var(--navy);
}

/* ---------- Login Page ---------- */
body.login-page,
body:has(.login-card) {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%) !important;
}

/* ---------- Messages / Alerts ---------- */
.bg-green-50.text-green-800,
.bg-red-50.text-red-800,
.bg-yellow-50.text-yellow-800,
.bg-blue-50.text-blue-800 {
    border-radius: var(--radius-sm);
}

/* ---------- Chat Interface (Portal Intake) ---------- */

/* Assistant bubble */
.bg-gray-100.rounded-lg.rounded-tl-none {
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
}

/* User bubble */
.bg-navy.text-white.rounded-lg.rounded-tr-none {
    background: var(--navy);
}

/* Chat container */
.bg-white.rounded-lg.shadow-sm.flex.flex-col {
    border: 1px solid #E5E7EB;
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-md);
}

/* ---------- Document Upload ---------- */

/* Drop zone */
.border-dashed.border-gray-300 {
    border-color: #D1D5DB;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.border-dashed:hover {
    border-color: var(--gold);
    background: var(--gold-subtle);
}

/* Upload button */
button#submit-btn,
button#s3-submit-btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all 0.2s ease;
}

/* ---------- Portal (Client) ---------- */

/* Action item cards */
.border-l-4.border-red-500,
.border-l-4.border-blue-500,
.border-l-4.border-amber-500 {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    box-shadow: var(--shadow-card);
    border-right: 1px solid #E5E7EB;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
    transition: box-shadow 0.2s;
}

.border-l-4:hover {
    box-shadow: var(--shadow-md);
}

/* Portal section headings */
.text-lg.font-semibold.text-navy {
    font-family: var(--font-display);
}

/* Document checklist category labels */
.text-xs.font-medium.text-gray-400.uppercase.tracking-wide {
    color: var(--gold-dark);
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* ---------- Intake Review ---------- */

/* Review cards */
.bg-white.rounded-lg.shadow-sm.border {
    border-color: #E5E7EB;
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-md);
}

/* Collected responses header */
.bg-gray-50 h2.text-sm.font-semibold.text-navy {
    font-family: var(--font-display);
}

/* Flagged questions header */
.bg-red-50 h2.text-sm.font-semibold {
    font-family: var(--font-display);
}

/* Review action buttons */
button.bg-green-600 {
    transition: all 0.2s ease;
}

button.bg-green-600:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

button.bg-amber-500 {
    transition: all 0.2s ease;
}

button.bg-amber-500:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ---------- Password Change ---------- */
.max-w-md h1.text-2xl {
    font-family: var(--font-display);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    aside#sidebar {
        box-shadow: 4px 0 16px rgba(17, 29, 53, 0.25);
    }
}

@media (max-width: 768px) {
    h1 { font-size: 22px; }
    h2 { font-size: 18px; }

    #cases-table thead th,
    #cases-table tbody td {
        padding: 10px 8px;
    }
}

/* ---------- Scrollbar Styling ---------- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
}

/* ---------- Print Styles ---------- */
@media print {
    aside#sidebar,
    header.bg-navy,
    footer,
    button,
    a[href*="create"] {
        display: none !important;
    }

    main {
        padding: 0 !important;
    }

    .bg-white {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}