@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap");
/* 1. :root VARIABLES */
   :root{
    /* Brand / Teal */
    --primary-800: #134B47;
    --primary-600: #1F6F68;
    --primary-500: #2E8B83;
    --primary-100: #E6F2F0;
    --primary-50: #F2FBFA;
  
    /* Accent */
    --accent-500: #FF6A3D;
    --accent-600: #FF5A29;
  
    /* Neutrals */
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #F8FAFC;
    --text-900: #0F172A;
    --text-700: #334155;
    --text-500: #64748B;
    --border: #E5E7EB;
    --divider: #EEF2F7;
  
    /* Status */
    --success: #16A34A;
    --success-bg: #DCFCE7;
    --warning: #F59E0B;
    --warning-bg: #FEF3C7;
    --info: #2563EB;
    --info-bg: #DBEAFE;
    --danger: #DC2626;
    --danger-bg: #FEE2E2;
  
    /* Legacy Variables (mapped) */
    --primary-color: var(--primary-600);
    --primary-dark: var(--primary-800);
    --primary-light: var(--primary-500);
    --secondary-color: var(--accent-500);
    --success-color: var(--success);
    --danger-color: var(--danger);
    --warning-color: var(--warning);
    --info-color: var(--info);
    --light-color: var(--primary-50);
    --dark-color: var(--text-900);
  
    --primary-gradient:linear-gradient(135deg,var(--primary-600) 0%,var(--primary-500) 100%);
    --success-gradient:linear-gradient(135deg,var(--success) 0%,#15803d 100%);
    --danger-gradient:linear-gradient(135deg,var(--danger) 0%,#b91c1c 100%);
  
    /* Typography */
    --font-primary:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-heading:'Poppins', var(--font-primary);
  
    /* Spacing */
    --spacing-xs:.25rem; --spacing-sm:.5rem; --spacing-md:1rem;
    --spacing-lg:1.5rem; --spacing-xl:2rem; --spacing-2xl:3rem;
  
  /* Radius / Shadows / Transitions */
  --radius-sm:.25rem; --radius-md:.5rem; --radius-lg:1rem; --radius-xl:1.5rem; --radius-full:9999px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
  --shadow-md:0 4px 6px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:0 10px 25px rgba(0,0,0,.15),0 5px 10px rgba(0,0,0,.05);
  --shadow-xl:0 20px 40px rgba(0,0,0,.2);
  --transition-fast:150ms ease; --transition-base:250ms ease; --transition-slow:350ms ease;
  
  /* Layout Variables (from MainLayout.css) */
  --sidebar-width:252px;
  --topbar-height:70px;
  --text-primary:var(--text-900);
  --text-secondary:var(--text-700);
  --bg-light:var(--surface-2);
  --border-color:var(--border);
  --primary-ring: rgba(46,139,131,.25);
}
  
  /* 2. ACCESSIBILITY PREFERENCES */
  :focus-visible{ outline:2px solid var(--primary-color); outline-offset:2px; }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  }
  
  /* 3. RESET & BASE */
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
  body{
    font-family:var(--font-primary); font-size:16px; line-height:1.6;
    color:var(--dark-color); background-color:var(--surface-2); overflow-x:hidden;
  }
  
    /* Optional: hide scrollbar (webkit + firefox friendly) */
  html,body{ scrollbar-width:none; } /* firefox */
  *::-webkit-scrollbar{ width:0; height:0; } /* webkit */
  
    /* Headings */
  h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading); font-weight:600; line-height:1.2;
    margin-bottom:var(--spacing-md); color:var(--dark-color);
  }
  h1{font-size:2.5rem} h2{font-size:2rem} h3{font-size:1.75rem}
  h4{font-size:1.5rem} h5{font-size:1.25rem} h6{font-size:1rem}
  
  /* 4. LINKS */
  a{ color:var(--primary-color); text-decoration:none; transition:color var(--transition-fast); }
  a:hover{ color:var(--primary-light); }
  
  /* 5. BUTTONS (DRY) */
  .btn{
    display:inline-block; padding:.75rem 1.5rem; font-weight:500; text-align:center;
    white-space:nowrap; vertical-align:middle; user-select:none; border:1px solid transparent;
    border-radius:var(--radius-md); transition:transform var(--transition-base), box-shadow var(--transition-base);
    cursor:pointer; font-size:1rem; line-height:1.5; position:relative; overflow:hidden;
  }
  .btn:focus{ outline:none; box-shadow:0 0 0 .2rem var(--primary-ring); }
  
  .btn--base{ color:#fff; border:none; background:var(--primary-gradient); }
  .btn--secondary{ background:var(--secondary-color); color:#fff; }
  .btn--success{ background:var(--success-gradient); color:#fff; }
  .btn--danger{ background:var(--danger-gradient); color:#fff; }
  
  .btn--outline-primary{
    background:transparent; color:var(--primary-color); border:2px solid var(--primary-color);
  }
  .btn--hover-elevate:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
  .btn:active{ transform:translateY(0); }
  
    /* Loading state (keeps .btn markup smaller) */
  .btn--loading{ color:transparent; pointer-events:none; }
  .btn--loading::after{
    content:""; position:absolute; width:20px; height:20px; top:50%; left:50%;
    transform:translate(-50%,-50%); border:2px solid #fff; border-radius:50%; border-top-color:transparent;
    animation:spinner .6s linear infinite;
  }
  
  /* 6. CARD */
  .card{
    background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
    border:1px solid var(--border); transition:transform var(--transition-base), box-shadow var(--transition-base);
    overflow:hidden;
  }
  .card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-xl); }
  .card-header{ background:var(--primary-gradient); color:#fff; padding:var(--spacing-lg); font-weight:600; border-bottom:none; }
  .card-body{ padding:var(--spacing-lg); }
  .card-footer{ background:var(--surface-2); border-top:1px solid var(--divider); padding:var(--spacing-md) var(--spacing-lg); }
  
  /* 7. FORMS */
  .form-control{
    display:block; width:100%; padding:.75rem 1rem; font-size:1rem; line-height:1.5;
    color:var(--dark-color); background:var(--surface); border:2px solid var(--border); border-radius:var(--radius-md);
    transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
    background-clip:padding-box;
  }
  .form-control:focus{ border-color:var(--primary-500); outline:0; box-shadow:0 0 0 .2rem var(--primary-ring); }
  .form-control::placeholder{ color:var(--text-500); opacity:1; }
  
  .form-label{ display:inline-block; margin-bottom:.5rem; font-weight:500; color:var(--dark-color); }
  
    /* Validation (reuse same spacing + icon sizing) */
  .form-control.is-valid,
  .form-control.is-invalid{ padding-right:calc(1.5em + .75rem); background-repeat:no-repeat; background-position:right calc(.375em + .1875rem) center; background-size:calc(.75em + .375rem) calc(.75em + .375rem); }
  .form-control.is-valid{ border-color:var(--success-color); background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2348bb78' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); }
  .form-control.is-invalid{ border-color:var(--danger-color); background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23f56565' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23f56565' stroke='none'/%3e%3c/svg%3e"); }
  
  .invalid-feedback{ display:none; width:100%; margin-top:.25rem; font-size:.875rem; color:var(--danger-color); }
  .form-control.is-invalid ~ .invalid-feedback{ display:block; }
  
  /* 8. NAVBAR & NAV */
  .navbar{ background:var(--bg); box-shadow:var(--shadow-sm); padding:var(--spacing-md) 0; position:sticky; top:0; z-index:1000; }
  .navbar-brand{ font-size:1.5rem; font-weight:700; color:var(--primary-color); display:flex; align-items:center; gap:.5rem; }
  .navbar-nav{ display:flex; list-style:none; align-items:center; gap:.25rem; padding:0; margin:0; }
  .nav-link{ padding:.5rem 1rem; color:var(--dark-color); font-weight:500; border-radius:var(--radius-md); transition:background var(--transition-fast), color var(--transition-fast); }
  .nav-link:hover{ background:var(--primary-50); color:var(--primary-color); }
  .nav-link.active{ background:var(--primary-100); color:var(--primary-600); }
  
  /* 9. UTILITIES (container, text, spacing) */
  .container{ width:100%; max-width:1200px; margin:0 auto; padding:0 var(--spacing-lg); }
  .text-center{text-align:center} .text-left{text-align:left} .text-right{text-align:right}
  
  .text-primary{color:var(--primary-color)} .text-success{color:var(--success-color)} .text-danger{color:var(--danger-color)}
  .text-warning{color:var(--warning-color)} .text-muted{color:var(--text-500)}
  
  .bg-primary{background:var(--primary-color)} .bg-success{background:var(--success-gradient)} .bg-danger{background:var(--danger-gradient)}
  .bg-light{background:var(--surface-2)} .bg-dark{background:var(--dark-color)}
  
  .mt-1{margin-top:var(--spacing-sm)} .mt-2{margin-top:var(--spacing-md)} .mt-3{margin-top:var(--spacing-lg)}
  .mt-4{margin-top:var(--spacing-xl)} .mt-5{margin-top:var(--spacing-2xl)}
  
  .mb-1{margin-bottom:var(--spacing-sm)} .mb-2{margin-bottom:var(--spacing-md)} .mb-3{margin-bottom:var(--spacing-lg)}
  .mb-4{margin-bottom:var(--spacing-xl)} .mb-5{margin-bottom:var(--spacing-2xl)}
  
  .p-1{padding:var(--spacing-sm)} .p-2{padding:var(--spacing-md)} .p-3{padding:var(--spacing-lg)}
  .p-4{padding:var(--spacing-xl)} .p-5{padding:var(--spacing-2xl)}
  
  /* 10. LOADING & ANIMATIONS */
  .loading-spinner{
    width:50px; height:50px; border:5px solid var(--light-color); border-top:5px solid var(--primary-color);
    border-radius:50%; animation:spinner 1s linear infinite;
  }
  
    /* Fade / Slide helpers */
  .fade-in{ animation:fadeIn var(--transition-slow) both; }
  @keyframes fadeIn{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:none;} }
  .slide-in{ animation:slideIn var(--transition-base) both; }
  @keyframes slideIn{ from{ transform:translateX(-100%);} to{ transform:none;} }

  /* Page enter motion (applies to all pages) */
  .page-content,
  .admin-content{
    animation:pageEnter 420ms cubic-bezier(.16,1,.3,1) both;
  }
  .page-content > *,
  .admin-content > *{
    animation:contentRise 520ms cubic-bezier(.16,1,.3,1) both;
    animation-delay:60ms;
  }
  @keyframes pageEnter{
    from{ opacity:0; transform:translateY(12px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @keyframes contentRise{
    from{ opacity:0; transform:translateY(18px) scale(.98); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
  
    /* Spinner */
  @keyframes spinner{ to{ transform:rotate(360deg);} }
  
  /* 11. BADGES / ALERTS */
  .badge{ display:inline-block; padding:.25rem .75rem; font-size:.875rem; font-weight:600; line-height:1; border-radius:var(--radius-full); white-space:nowrap; }
  .badge-primary{ background:var(--primary-100); color:var(--primary-600); }
  .badge-success{ background:var(--success-bg); color:var(--success); }
  .badge-danger{ background:var(--danger-bg); color:var(--danger); }
  
  .alert{
    padding:var(--spacing-md) var(--spacing-lg); margin-bottom:var(--spacing-md);
    border:1px solid transparent; border-radius:var(--radius-md); position:relative;
  }
  .alert-success{ color:#166534; background-color:var(--success-bg); border-color:#bbf7d0; }
  .alert-danger{ color:#991b1b; background-color:var(--danger-bg); border-color:#fecaca; }
  .alert-warning{ color:#92400e; background-color:var(--warning-bg); border-color:#fde68a; }
  .alert-info{ color:#1d4ed8; background-color:var(--info-bg); border-color:#bfdbfe; }
  
  /* 12. PROGRESS */
  .progress{ display:flex; height:1rem; overflow:hidden; font-size:.75rem; background:var(--border); border-radius:var(--radius-full); }
  .progress-bar{ display:flex; align-items:center; justify-content:center; color:#fff; white-space:nowrap; background:var(--primary-500); transition:width .6s ease; }
  .progress-bar-striped{ background-image:linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size:1rem 1rem; }
  .progress-bar-animated{ animation:progress-bar-stripes 1s linear infinite; }
  @keyframes progress-bar-stripes{ from{ background-position:1rem 0; } to{ background-position:0 0; } }
  
  /* 13. TABLES */
  .table{ width:100%; margin-bottom:var(--spacing-md); background:var(--surface); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); }
  .table thead th{ background:var(--primary-color); color:#fff; font-weight:600; padding:var(--spacing-md); text-align:left; border:none; }
  .table tbody td{ padding:var(--spacing-md); border-bottom:1px solid var(--border); }
  .table tbody tr:hover{ background:var(--primary-50); }
  .table tbody tr:last-child td{ border-bottom:none; }
  
  /* 14. MODALS */
  .modal{ display:none; position:fixed; z-index:9999; inset:0; overflow:auto; background:rgba(0,0,0,.5); animation:fadeIn var(--transition-fast); }
  .modal.show{ display:block; }
  .modal-dialog{ margin:3rem auto; max-width:500px; width:auto; position:relative; }
  .modal-content{ background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); animation:slideDown var(--transition-base); }
  @keyframes slideDown{ from{ transform:translateY(-50px); opacity:0; } to{ transform:none; opacity:1; } }
  .modal-header{ padding:var(--spacing-lg); border-bottom:1px solid var(--divider); }
  .modal-title{ margin:0; font-size:1.25rem; font-weight:600; }
  .modal-body{ padding:var(--spacing-lg); }
  .modal-footer{ padding:var(--spacing-lg); border-top:1px solid var(--divider); display:flex; justify-content:flex-end; gap:var(--spacing-sm); }
  
  /* 15. TOOLTIP */
  .tooltip{ position:relative; display:inline-block; }
  .tooltip .tooltiptext{
    visibility:hidden; width:120px; background:var(--text-900); color:#fff; text-align:center;
    border-radius:var(--radius-md); padding:var(--spacing-sm); position:absolute; z-index:1;
    bottom:125%; left:50%; transform:translateX(-50%); opacity:0; transition:opacity var(--transition-fast);
  }
  .tooltip:hover .tooltiptext{ visibility:visible; opacity:1; }
  
  /* 16. BLAZOR ERROR BOUNDARY */
  .blazor-error-boundary{
    background:var(--danger-gradient); padding:var(--spacing-lg); color:#fff; border-radius:var(--radius-md);
    margin:var(--spacing-lg); box-shadow:var(--shadow-lg); position:relative; animation:shake .5s;
  }
  @keyframes shake{
    0%,100%{ transform:translateX(0); } 10%,30%,50%,70%,90%{ transform:translateX(-5px);} 20%,40%,60%,80%{ transform:translateX(5px); }
  }
  .blazor-error-boundary::before{ content:"⚠️"; font-size:2rem; margin-right:var(--spacing-md); display:inline-block; vertical-align:middle; }
  .blazor-error-boundary::after{
    content:"An unexpected error has occurred. Please refresh the page or contact support.";
    display:block; margin-top:var(--spacing-sm); font-size:.875rem; opacity:.9;
  }
  
/* 17. RESPONSIVE */
  @media (max-width:768px){
    h1{font-size:2rem} h2{font-size:1.75rem} h3{font-size:1.5rem}
    .container{ padding:0 var(--spacing-md); }
    .navbar-nav{ flex-direction:column; width:100%; }
    .modal-dialog{ margin:1rem; max-width:calc(100% - 2rem); }
    .btn{ padding:.5rem 1rem; font-size:.875rem; }
  }
  @media (max-width:480px){
    body{ font-size:14px; }
    .card{ border-radius:var(--radius-md); }
    .table{ font-size:.875rem; }
  }
  
/* 18. Print */
  @media print{
    body{ background:#fff; color:#000; }
    .navbar,.btn,.modal{ display:none!important; }
    a{ color:#000; text-decoration:underline; }
  }

/* 19. UTILITY CLASSES - Hover Effects */
.hover-lift{ transition:transform var(--transition-base), box-shadow var(--transition-base); }
.hover-lift:hover{ transform:translateY(-5px); box-shadow:var(--shadow-xl); }
.hover-lift-sm:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.hover-scale{ transition:transform var(--transition-base); }
.hover-scale:hover{ transform:scale(1.05); }
.hover-scale-sm:hover{ transform:scale(1.02); }

/* 20. UTILITY CLASSES - Border Radius */
.rounded-sm{ border-radius:var(--radius-sm); }
.rounded-md{ border-radius:var(--radius-md); }
.rounded-lg{ border-radius:var(--radius-lg); }
.rounded-xl{ border-radius:var(--radius-xl); }
.rounded-full{ border-radius:var(--radius-full); }
.rounded-pill{ border-radius:50px; }

/* 21. UTILITY CLASSES - Shadows */
.shadow-sm{ box-shadow:var(--shadow-sm); }
.shadow-md{ box-shadow:var(--shadow-md); }
.shadow-lg{ box-shadow:var(--shadow-lg); }
.shadow-xl{ box-shadow:var(--shadow-xl); }
.shadow-none{ box-shadow:none; }

/* 22. UTILITY CLASSES - Flex */
.d-flex{ display:flex; }
.flex-column{ flex-direction:column; }
.flex-row{ flex-direction:row; }
.align-items-center{ align-items:center; }
.align-items-start{ align-items:flex-start; }
.align-items-end{ align-items:flex-end; }
.justify-content-center{ justify-content:center; }
.justify-content-between{ justify-content:space-between; }
.justify-content-around{ justify-content:space-around; }
.justify-content-end{ justify-content:flex-end; }
.gap-1{ gap:var(--spacing-sm); }
.gap-2{ gap:var(--spacing-md); }
.gap-3{ gap:var(--spacing-lg); }

/* 23. UTILITY CLASSES - Spinner Sizes */
.spinner-sm{ width:1rem; height:1rem; border-width:0.15em; }
.spinner-md{ width:2rem; height:2rem; border-width:0.2em; }
.spinner-lg{ width:3rem; height:3rem; border-width:0.25em; }

/* 24. UTILITY CLASSES - Animations */
.slide-up{ animation:slideUp var(--transition-base) both; }
@keyframes slideUp{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } }
.slide-down{ animation:slideDown var(--transition-base) both; }
.pulse{ animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.5; } }

/* 25. UTILITY CLASSES - Position */
.position-relative{ position:relative; }
.position-absolute{ position:absolute; }
.position-fixed{ position:fixed; }
.position-sticky{ position:sticky; }

/* 26. UTILITY CLASSES - Display */
.d-none{ display:none; }
.d-block{ display:block; }
.d-inline{ display:inline; }
.d-inline-block{ display:inline-block; }

/* 27. UTILITY CLASSES - Width/Height */
.w-100{ width:100%; }
.h-100{ height:100%; }
.min-h-screen{ min-height:100vh; }
.max-w-sm{ max-width:500px; }
.max-w-md{ max-width:700px; }
.max-w-lg{ max-width:900px; }
.max-w-xl{ max-width:1200px; }

/* 28. UTILITY CLASSES - Overflow */
.overflow-hidden{ overflow:hidden; }
.overflow-auto{ overflow:auto; }
.overflow-scroll{ overflow:scroll; }