/* =========================================================
   KAYDIYE — Design System v2 ("Professional Edition")
   Full rewrite. Replaces the earlier teal-accent patch set.

   Direction: quiet, data-forward finance/ops software —
   closer to Stripe/Linear/QuickBooks than a marketing site.
   Hairline borders do the work that shadows used to do.
   One font family throughout (Inter) for density and
   consistency; the brand wordmark alone keeps a second,
   more characterful face (Sora) as the one signature touch.

   TOKENS
     Ink       #101828   primary text
     Canvas    #F8F9FB   page background
     Surface   #FFFFFF   cards / sidebar / topbar
     Line      #E4E7EC   hairline borders
     Line-2    #D0D5DD   stronger borders (inputs, focus)
     Muted     #667085   secondary text
     Muted-2   #98A2B3   placeholder / disabled
     Brand     #0E7C74   primary actions, active state
     Brand-dk  #0B645E   hover/pressed
     Brand-tnt #E6F4F2   soft brand fill (chips, active bg)
     Amber     #F2A73B   secondary series / highlights
     Success   #12B76A   Danger #F04438   Warning #F79009
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@700;800&display=swap');

:root{
  --ink:#101828;
  --canvas:#F8F9FB;
  --surface:#FFFFFF;
  --line:#E4E7EC;
  --line-2:#D0D5DD;
  --muted:#667085;
  --muted-2:#98A2B3;

  --brand:#0E7C74;
  --brand-dark:#0B645E;
  --brand-tint:#E6F4F2;

  --amber:#F2A73B;
  --amber-tint:#FDF3E1;

  --info:#2970FF;      --info-tint:#EAF1FF;
  --success:#12B76A;   --success-tint:#E7F8EF;
  --warning:#F79009;   --warning-tint:#FEF3E2;
  --danger:#F04438;    --danger-tint:#FDEBEA;

  /* vibrancy layer — gradients for icon chips, active states, accents */
  --grad-teal:  linear-gradient(135deg,#0E7C74,#17B8AA);
  --grad-blue:  linear-gradient(135deg,#2970FF,#6EA0FF);
  --grad-violet:linear-gradient(135deg,#7A5AF8,#B692F6);
  --grad-amber: linear-gradient(135deg,#F2A73B,#FDB022);

  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:14px;

  --shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --shadow-sm:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --shadow-md:0 4px 14px rgba(16,24,40,.08);
  --shadow-lg:0 12px 28px rgba(16,24,40,.10);
}

*{ box-sizing:border-box; }

html, body{
  background:var(--canvas) !important;
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:.925rem;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
  font-family:'Inter', sans-serif;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
}

a{ color:var(--brand); }
a:hover{ color:var(--brand-dark); }

/* the one vivid signature touch: a slim gradient strip pinned to the very top of the page */
body::before{
  content:"";
  position:fixed;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,#0E7C74,#2970FF,#7A5AF8,#F2A73B);
  z-index:2000;
}

/* =========================================================
   SIDEBAR
   ========================================================= */
.sidebar{
  background:var(--surface) !important;
  border-right:1px solid var(--line);
  box-shadow:none !important;
}

/* brand mark — the one signature element */
.sidebar .navbar-brand h3{
  font-family:'Sora', sans-serif !important;
  font-weight:800 !important;
  font-size:1.15rem;
  letter-spacing:-.01em;
  color:var(--ink) !important;
  display:flex;
  align-items:center;
  gap:.6rem;
}

.sidebar .navbar-brand h3 i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:var(--radius-sm);
  background:var(--grad-teal);
  color:#fff;
  font-size:.85rem;
  box-shadow:0 4px 10px rgba(14,124,116,.30);
}

/* profile block */
.sidebar .position-relative img.rounded-circle{
  outline:none;
  box-shadow:0 0 0 2px var(--surface), 0 0 0 4px rgba(14,124,116,.35);
}

.sidebar .bg-success{
  background:var(--success) !important;
  box-shadow:0 0 0 2px var(--surface);
}

.sidebar h6{ font-weight:600; font-size:.9rem; }

.sidebar .d-flex.align-items-center.ms-4 span{
  color:var(--muted);
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* nav items — flat fill on active, no gradients, no pill-shadow */
.sidebar .nav-item.nav-link{
  position:relative;
  display:flex;
  align-items:center;
  border-radius:var(--radius-sm);
  margin:1px .5rem;
  padding:.55rem .75rem !important;
  color:var(--muted);
  font-weight:500;
  font-size:.875rem;
  border-left:none;
  transition:background .12s ease, color .12s ease;
}

.sidebar .nav-item.nav-link:hover{
  background:var(--canvas);
  color:var(--ink);
}

.sidebar .nav-item.nav-link.active{
  background:var(--grad-teal);
  color:#fff;
  font-weight:600;
  box-shadow:0 4px 12px rgba(14,124,116,.28);
}

.sidebar .nav-item.nav-link.active i{
  color:#fff !important;
}

.sidebar .nav-item.nav-link i.fa,
.sidebar .nav-item.nav-link i.fas,
.sidebar .nav-item.nav-link i.bi{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:.65rem;
  font-size:.85rem;
  border-radius:0;
  background:transparent;
  color:var(--muted-2);
}

.sidebar .nav-item.nav-link.active i,
.sidebar .nav-item.nav-link:hover i{
  color:inherit;
}

/* dropdown caret alignment for collapsible sidebar groups */
.sidebar .nav-link[data-bs-toggle="collapse"]::after,
.sidebar .nav-link.dropdown-toggle::after{
  margin-left:auto;
  font-size:.65rem;
  color:var(--muted-2);
}

/* section labels ("Overview", "Operations", "Admin") */
.sidebar .nav-section-label{
  display:block;
  padding:.9rem 1.25rem .35rem;
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted-2);
}

/* collapsible submenu items */
.sidebar .nav-submenu{
  padding-left:2.1rem;
}

.sidebar .nav-submenu .nav-item.nav-link{
  font-size:.83rem;
  padding-top:.4rem !important;
  padding-bottom:.4rem !important;
  color:var(--muted);
}

.sidebar .nav-submenu .nav-item.nav-link:hover{
  color:var(--brand-dark);
  background:transparent;
}

.sidebar .nav-submenu .nav-item.nav-link::before{
  content:"";
  display:inline-block;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--muted-2);
  margin-right:.6rem;
  vertical-align:middle;
}

/* =========================================================
   TOPBAR
   ========================================================= */
.content > .navbar{
  background:var(--surface) !important;
  border-bottom:1px solid var(--line);
  min-height:64px;
}

.content .navbar input.form-control{
  background:var(--canvas);
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  padding:.5rem .9rem;
  font-size:.875rem;
}

.content .navbar input.form-control:focus{
  background:var(--surface);
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-tint);
}

.content .navbar .search-wrap{
  position:relative;
}

.content .navbar .search-wrap .search-icon{
  position:absolute;
  left:.9rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted-2);
  font-size:.85rem;
  pointer-events:none;
}

.content .navbar .search-wrap input.form-control{
  padding-left:2.2rem;
}

.content .navbar .nav-link img.rounded-circle{
  outline:none;
  box-shadow:0 0 0 2px rgba(41,112,255,.30);
}

.content .navbar .dropdown-toggle span{
  font-weight:600;
  font-size:.875rem;
}

.content .navbar .dropdown-menu{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  padding:.4rem;
}

.content .navbar .dropdown-item{
  border-radius:var(--radius-sm);
  font-size:.875rem;
  padding:.55rem .75rem;
}

.content .navbar .dropdown-item:hover{
  background:var(--canvas);
}

.sidebar-toggler{ color:var(--muted) !important; }

/* =========================================================
   CARDS / WIDGETS  (stat tiles, chart panels, calendar, todo)
   ========================================================= */
.bg-light.rounded,
.bg-light.rounded-3,
.bg-light.rounded-top{
  background:var(--surface) !important;
  border:1px solid var(--line);
  border-radius:var(--radius-md) !important;
  box-shadow:var(--shadow-xs);
  transition:box-shadow .15s ease, border-color .15s ease;
}

.bg-light.rounded:hover{
  box-shadow:var(--shadow-sm);
  border-color:var(--line-2);
}

/* stat tiles: icon as a flat tinted chip, value in heavier weight.
   Scoped to the dashboard's stat-tile row only (.row.g-4) - the old
   unscoped selector also matched any icon inside any .bg-light.rounded
   container, which blew up the small heading icon on the login page
   (index.php) into a giant 44px teal square. */
.row.g-4 .bg-light.rounded i.fa,
.row.g-4 .bg-light.rounded i.fas,
.row.g-4 .bg-light.rounded i.bi{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:var(--radius-sm);
  background:var(--grad-teal);
  color:#fff !important;
  font-size:1.15rem !important;
}

/* give each of the four stat cards its own gradient — a "living palette" that still
   reads as one family because every chip shares the same angle and radius */
.row.g-4 > .col-sm-6.col-xl-3:nth-child(1) .bg-light i{ background:var(--grad-teal);   box-shadow:0 4px 12px rgba(14,124,116,.28); }
.row.g-4 > .col-sm-6.col-xl-3:nth-child(2) .bg-light i{ background:var(--grad-blue);   box-shadow:0 4px 12px rgba(41,112,255,.28); }
.row.g-4 > .col-sm-6.col-xl-3:nth-child(3) .bg-light i{ background:var(--grad-violet); box-shadow:0 4px 12px rgba(122,90,248,.28); }
.row.g-4 > .col-sm-6.col-xl-3:nth-child(4) .bg-light i{ background:var(--grad-amber);  box-shadow:0 4px 12px rgba(242,167,59,.30); }

.bg-light.rounded p{
  color:var(--muted);
  font-size:.78rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:.3rem;
}

.bg-light.rounded h6,
.bg-light.rounded h5{
  font-weight:700;
  font-size:1.3rem;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}

/* panel headers ("Yearly Sales Report", "Recent Salse", "Calender", "To Do List") */
.bg-light .d-flex.align-items-center.justify-content-between.mb-4 h6{
  font-size:.95rem;
  font-weight:700;
  padding-left:.65rem;
  position:relative;
}

.bg-light .d-flex.align-items-center.justify-content-between.mb-4 h6::before{
  content:"";
  position:absolute;
  left:0; top:.15em; bottom:.15em;
  width:3px;
  border-radius:2px;
  background:var(--brand);
}

/* =========================================================
   TABLES
   ========================================================= */
.table{ font-size:.875rem; }

.table thead th{
  background:var(--canvas);
  color:var(--muted);
  font-weight:600;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  border-bottom:1px solid var(--line);
  border-top:none;
  padding:.75rem 1rem;
}

.table td{
  border-color:var(--line);
  padding:.75rem 1rem;
  vertical-align:middle;
  color:var(--ink);
}

.table.table-bordered td,
.table.table-bordered th{
  border-color:var(--line);
}

.table tbody tr:hover{
  background:var(--canvas);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:.85rem;
  padding:.5rem 1rem;
  box-shadow:none;
  transition:background .12s ease, border-color .12s ease, transform .08s ease;
}

.btn-sm{ padding:.35rem .7rem; font-size:.78rem; }

.btn-primary{
  background:var(--grad-teal) !important;
  border-color:transparent !important;
  box-shadow:0 4px 12px rgba(14,124,116,.28);
}

.btn-primary:hover{
  filter:brightness(1.06);
}

.btn-primary:active{ transform:translateY(1px); }

.btn-outline-primary{
  color:var(--brand-dark) !important;
  border-color:var(--line-2) !important;
  background:var(--surface) !important;
}

.btn-outline-primary:hover{
  background:var(--brand-tint) !important;
  border-color:var(--brand) !important;
}

.btn-success{ background:var(--success) !important; border-color:transparent !important; color:#fff; }
.btn-danger{  background:var(--danger)  !important; border-color:transparent !important; color:#fff; }
.btn-info{    background:var(--info)    !important; border-color:transparent !important; color:#fff; }
.btn-warning{ background:var(--warning) !important; border-color:transparent !important; color:#fff; }

.text-primary{ color:var(--brand) !important; }

/* =========================================================
   FORMS
   ========================================================= */
.form-control, .form-select{
  border:1px solid var(--line-2);
  border-radius:var(--radius-sm);
  font-size:.875rem;
  color:var(--ink);
}

.form-control:focus, .form-select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-tint);
}

.form-control::placeholder{ color:var(--muted-2); }

.form-label{ font-weight:600; font-size:.82rem; color:var(--ink); margin-bottom:.35rem; }

.input-group-text{
  background:var(--canvas);
  border:1px solid var(--line-2);
  color:var(--muted);
  font-size:.875rem;
}

/* =========================================================
   BADGES (status columns)
   ========================================================= */
.badge{
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.02em;
  padding:.35em .65em;
  border-radius:6px;
}

.badge.bg-primary{ background:var(--brand-tint) !important; color:var(--brand-dark) !important; }
.badge.bg-success{ background:var(--success-tint) !important; color:var(--success) !important; }
.badge.bg-warning{ background:var(--warning-tint) !important; color:var(--warning) !important; }
.badge.bg-danger{  background:var(--danger-tint) !important;  color:var(--danger) !important; }
.badge.bg-info{    background:var(--info-tint) !important;    color:var(--info) !important; }

/* =========================================================
   PAGINATION (DataTables / Bootstrap)
   ========================================================= */
.pagination .page-link{
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.82rem;
  font-weight:600;
  border-radius:var(--radius-sm);
  margin:0 2px;
}

.pagination .page-link:hover{
  background:var(--canvas);
  color:var(--ink);
}

.pagination .page-item.active .page-link{
  background:var(--brand) !important;
  border-color:var(--brand) !important;
  color:#fff !important;
}

.pagination .page-item.disabled .page-link{
  color:var(--muted-2);
  background:var(--canvas);
}

/* =========================================================
   MODALS (add/edit dialogs across the whole system)
   ========================================================= */
.modal-content{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}

.modal-header{
  background:var(--canvas);
  border-bottom:1px solid var(--line);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:1rem 1.25rem;
}

.modal-title{ font-weight:700; font-size:1rem; }

.modal-body{ padding:1.25rem; }

.modal-footer{
  border-top:1px solid var(--line);
  padding:.9rem 1.25rem;
}

.modal-backdrop.show{ opacity:.4; background:var(--ink); }

/* =========================================================
   ALERTS / TOASTS (validation messages, banners on other pages)
   ========================================================= */
.alert{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:.875rem;
  padding:.75rem 1rem;
}

.alert-success{ background:var(--success-tint); border-color:transparent; color:#08663f; }
.alert-danger{  background:var(--danger-tint);  border-color:transparent; color:#8f2018; }
.alert-warning{ background:var(--warning-tint); border-color:transparent; color:#8a5106; }
.alert-info{    background:var(--info-tint);    border-color:transparent; color:#1a4faa; }

/* toast-style banner used by dashboard.js (kept, restyled to tokens) */
.custom-alert{
  background:var(--success) !important;
  color:#fff;
  font-weight:600;
  font-size:.85rem;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);
}

.custom-alert.delete-alert{
  background:var(--danger) !important;
}

/* =========================================================
   BREADCRUMBS (inner pages)
   ========================================================= */
.breadcrumb{ background:transparent; padding:0; font-size:.82rem; }
.breadcrumb-item + .breadcrumb-item::before{ color:var(--muted-2); }
.breadcrumb-item.active{ color:var(--muted); }
.breadcrumb-item a{ color:var(--brand); }

/* =========================================================
   CALENDAR + TO-DO
   ========================================================= */
#calender{ border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
#calender .fc, #calender table{ font-family:'Inter', sans-serif; font-size:.85rem; }

#calender .fc-button, #calender .fc-button-primary{
  background:var(--brand) !important;
  border-color:var(--brand) !important;
  text-transform:capitalize;
  box-shadow:none !important;
}

#calender .fc-day-today{ background:var(--brand-tint) !important; }

#medForm .form-control{ border-radius:var(--radius-sm) 0 0 var(--radius-sm); border-right:none; }
#medForm .btn{ border-radius:0 var(--radius-sm) var(--radius-sm) 0; }

#FeeTable .list-group-item, #FeeTable .todo-item{
  border:1px solid var(--line);
  border-radius:var(--radius-sm) !important;
  margin-bottom:.5rem;
  padding:.6rem .9rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.875rem;
  transition:background .12s ease;
}

#FeeTable .list-group-item:hover{ background:var(--canvas); }

/* =========================================================
   FOOTER
   ========================================================= */
.container-fluid.pt-4.px-4 .bg-light{
  background:var(--surface) !important;
  border:1px solid var(--line);
  box-shadow:none;
  font-size:.8rem;
  color:var(--muted);
}

.container-fluid.pt-4.px-4 .bg-light a{
  color:var(--brand-dark);
  font-weight:600;
  text-decoration:none;
}

.back-to-top{
  background:var(--grad-teal);
  box-shadow:var(--shadow-md);
}

/* =========================================================
   LOGIN / AUTH PAGE — generic surfaces so the view/ page
   (which doesn't include header.php/sidebar.php) still
   picks up the same tokens if it links this stylesheet.
   ========================================================= */
body.login-page,
.auth-wrapper{
  background:var(--canvas) !important;
}

.auth-wrapper .card,
.auth-wrapper .bg-light{
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
}

.auth-wrapper .auth-logo{
  width:64px;
  height:64px;
  object-fit:contain;
  border-radius:var(--radius-sm);
}

.auth-wrapper h3.text-primary{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:-.01em;
  color:var(--ink) !important;
}

.auth-wrapper h3.text-primary i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:var(--radius-sm);
  background:var(--grad-teal);
  color:#fff;
  font-size:.8rem;
  box-shadow:0 4px 10px rgba(14,124,116,.30);
}

.auth-wrapper .auth-subtitle{
  color:var(--muted);
  font-size:.85rem;
  margin-bottom:1.5rem;
}

.auth-wrapper .form-check-label{
  color:var(--muted);
  font-size:.8rem;
}

/* =========================================================
   MISC — spinner, scrollbar, focus ring, motion
   ========================================================= */
#spinner .spinner-border{ color:var(--brand) !important; }
#spinner{ background:var(--canvas) !important; }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:var(--canvas); }
::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--muted-2); }

a:focus-visible, button:focus-visible, .nav-link:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

@media (prefers-reduced-motion: no-preference){
  .container-fluid.pt-4.px-4 > .row.g-4 > div,
  .container-fluid.pt-4.px-4 > .bg-light{
    animation:kaydiye-rise .4s ease both;
  }
  .container-fluid.pt-4.px-4 > .row.g-4 > div:nth-child(2){ animation-delay:.04s; }
  .container-fluid.pt-4.px-4 > .row.g-4 > div:nth-child(3){ animation-delay:.08s; }
  .container-fluid.pt-4.px-4 > .row.g-4 > div:nth-child(4){ animation-delay:.12s; }
}

@keyframes kaydiye-rise{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* =========================================================
   RESPONSIVE — small screens (mobile sidebar collapses,
   stat tiles stack, tables scroll)
   ========================================================= */
@media (max-width: 991.98px){
  .sidebar{ border-right:none; border-bottom:1px solid var(--line); }
  .content > .navbar{ margin:0; }
}

@media (max-width: 575.98px){
  .bg-light.rounded.p-4{ padding:1rem !important; }
  .bg-light.rounded i.fa,
  .bg-light.rounded i.fas,
  .bg-light.rounded i.bi{ width:38px; height:38px; font-size:1rem !important; }
}