/* ================================================================
   PM Poshan — Master Stylesheet
   Font Stack:
     UI / Numbers / English : Poppins (Google Fonts)
     Marathi (Devanagari)   : Noto Sans Devanagari
   All colours, fonts, spacing defined here as CSS variables.
   Edit this ONE file to restyle the entire app.
   ================================================================ */

/* ── Local Poppins Font — @font-face ────────────────────────── */
/* Files in assets/fonts/ — served from localhost, zero FOUT     */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style:  normal;
  font-display: block;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style:  normal;
  font-display: block;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style:  normal;
  font-display: block;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style:  normal;
  font-display: block;
}


/* ── Font rendering optimization ────────────────────────────── */
/* Prevent invisible text while fonts load (FOIT)                */
html { font-display: swap; }

/* ── CSS Variables (change here = changes everywhere) ────────── */
:root {
  /* Brand colours */
  --clr-primary:       #1a56a0;
  --clr-primary-dk:    #133d76;
  --clr-primary-lt:    #dbeafe;
  --clr-success:       #1a7f4b;
  --clr-success-lt:    #d1fae5;
  --clr-warning:       #b45309;
  --clr-warning-lt:    #fef3c7;
  --clr-danger:        #dc2626;
  --clr-danger-lt:     #fee2e2;
  --clr-purple:        #7c3aed;
  --clr-purple-lt:     #ede9fe;
  --clr-orange:        #c45200;

  /* Neutral palette */
  --clr-bg:            #f4f6fa;
  --clr-surface:       #ffffff;
  --clr-border:        #dee2e6;
  --clr-text:          #1a1a2e;
  --clr-text-muted:    #6b7280;
  --clr-text-light:    #94a3b8;

  /* Typography */
  /* Fallback fonts chosen to match Poppins metrics — reduces FOUT */
  --font-ui:    'Poppins', 'Noto Sans Devanagari', -apple-system, 'Segoe UI', sans-serif;
  --font-mr:    'Noto Sans Devanagari', 'Poppins', -apple-system, 'Segoe UI', sans-serif;
  --font-pdf:   'Noto Sans Devanagari', Arial, sans-serif;

  /* Font sizes */
  --fs-xs:    11px;
  --fs-sm:    12px;
  --fs-base:  14px;
  --fs-md:    15px;
  --fs-lg:    17px;
  --fs-xl:    20px;

  /* Font weights */
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Spacing */
  --sp-xs:   4px;
  --sp-sm:   8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm:  0 1px 4px rgba(0,0,0,.07);
  --shadow-md:  0 2px 10px rgba(0,0,0,.10);
  --shadow-lg:  0 4px 20px rgba(0,0,0,.13);

  /* Layout */
  --sidebar-w:  220px;
  --topnav-h:   54px;
  --mobnav-h:   62px;
}

/* ── Reset / Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family:      var(--font-ui);
  font-size:        var(--fs-md);
  font-weight:      var(--fw-normal);
  color:            var(--clr-text);
  background:       var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* Marathi text gets Noto Sans Devanagari priority */
:lang(mr), .mr {
  font-family: var(--font-mr);
}

/* Numbers always use Poppins (tabular, clean) */
.num, input[type="number"], td.num {
  font-family:         var(--font-ui);
  font-variant-numeric: tabular-nums;
}

/* ── Top Navbar ───────────────────────────────────────────────── */
#top-nav {
  background:  var(--clr-primary);
  height:      var(--topnav-h);
  position:    sticky;
  top:         0;
  z-index:     1030;
  box-shadow:  var(--shadow-md);
}
#top-nav .navbar-brand {
  font-family:  var(--font-ui);
  font-weight:  var(--fw-bold);
  font-size:    var(--fs-lg);
  letter-spacing: -0.2px;
}

/* ── Layout wrapper ───────────────────────────────────────────── */
#main-wrapper {
  display:    flex;
  min-height: calc(100vh - var(--topnav-h));
}

/* ── Sidebar ──────────────────────────────────────────────────── */
#sidebar {
  width:        var(--sidebar-w);
  min-height:   calc(100vh - var(--topnav-h));
  background:   var(--clr-surface);
  border-right: 1px solid var(--clr-border);
  padding:      var(--sp-sm) 0;
  position:     sticky;
  top:          var(--topnav-h);
  height:       calc(100vh - var(--topnav-h));
  overflow-y:   auto;
}
#sidebar .nav-link {
  display:      flex;
  align-items:  center;
  gap:          10px;
  padding:      9px 16px;
  color:        var(--clr-text-muted);
  font-size:    var(--fs-sm);
  font-weight:  var(--fw-medium);
  font-family:  var(--font-ui);
  border-radius: 0;
  transition:   background .15s, color .15s;
  white-space:  nowrap;
}
#sidebar .nav-link i        { font-size: 16px; width: 18px; flex-shrink: 0; }
#sidebar .nav-link:hover    { background: #eef3fb; color: var(--clr-primary); }
#sidebar .nav-link.active   {
  background:  #deeaf8;
  color:       var(--clr-primary);
  font-weight: var(--fw-semi);
  border-left: 3px solid var(--clr-primary);
}
#sidebar hr { border-color: var(--clr-border); opacity: .5; margin: 6px 12px; }

/* ── Page content ─────────────────────────────────────────────── */
#page-content {
  flex:      1;
  min-width: 0;
}
@media (max-width: 767.98px) {
  #page-content { padding-bottom: calc(var(--mobnav-h) + 16px); }
  /* Ensure body never goes behind fixed bottom nav */
  body { padding-bottom: calc(var(--mobnav-h) + 4px); }
}

/* ── Mobile bottom nav ────────────────────────────────────────── */
.mobile-bottom-nav {
  position:     fixed;
  bottom: 0; left: 0; right: 0;
  height:       var(--mobnav-h);
  background:   var(--clr-surface);
  border-top:   1px solid var(--clr-border);
  display:      flex;
  z-index:      1040;
  box-shadow:   0 -2px 10px rgba(0,0,0,.08);
}
.mob-nav-item {
  flex:             1;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              2px;
  color:            var(--clr-text-muted);
  text-decoration:  none;
  font-size:        var(--fs-xs);
  font-family:      var(--font-ui);
  font-weight:      var(--fw-medium);
  background:       none;
  border:           none;
  cursor:           pointer;
  padding:          0;
  transition:       color .15s;
}
.mob-nav-item i      { font-size: 21px; }
.mob-nav-item.active { color: var(--clr-primary); }
.mob-nav-item.active i { font-weight: 700; }

/* More button active state */
#more-btn.active { color: var(--clr-primary); }

/* ── Page title ───────────────────────────────────────────────── */
.page-title {
  font-size:   var(--fs-lg);
  font-weight: var(--fw-bold);
  font-family: var(--font-ui);
  color:       var(--clr-primary);
  margin-bottom: var(--sp-md);
  display:     flex;
  align-items: center;
  gap:         8px;
}

/* ── Cards ────────────────────────────────────────────────────── */
.card {
  border:        none;
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-sm);
  background:    var(--clr-surface);
}
.card-header {
  background:    var(--clr-primary);
  color:         #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  font-family:   var(--font-ui);
  font-weight:   var(--fw-semi);
  font-size:     var(--fs-base);
  padding:       .55rem 1rem;
}
.card-header.green  { background: var(--clr-success); }
.card-header.orange { background: var(--clr-orange); }

/* ── Stat tiles ───────────────────────────────────────────────── */
.stat-tile {
  background:    var(--clr-surface);
  border-radius: var(--radius-md);
  padding:       14px 16px;
  box-shadow:    var(--shadow-sm);
  display:       flex;
  align-items:   center;
  gap:           12px;
}
.stat-tile .stat-icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.stat-tile .stat-val {
  font-size:   1.5rem;
  font-weight: var(--fw-bold);
  font-family: var(--font-ui);
  line-height: 1;
}
.stat-tile .stat-lbl {
  font-size:   var(--fs-xs);
  color:       var(--clr-text-muted);
  font-family: var(--font-ui);
}

/* ── Tables ───────────────────────────────────────────────────── */

/* Mobile: all tables scroll horizontally */
@media (max-width: 767.98px) {
  .table-responsive, .card .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Report preview tables always scroll */
  .rpt, .rpt2, .rn2 {
    overflow-x: auto;
    display:    block;
    width:      100%;
  }
  .rpt table, .rpt2 table, .rn2 table {
    min-width: 600px;
  }
  /* Report card body scroll */
  #report-preview, .card-body .rpt,
  .card-body .rpt2, .card-body .rn2 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.table-mdm th {
  background:    #eef3fb;
  color:         var(--clr-primary);
  font-size:     var(--fs-sm);
  font-weight:   var(--fw-semi);
  font-family:   var(--font-ui);
  white-space:   nowrap;
  vertical-align: middle;
  padding:       8px 10px;
}
.table-mdm td {
  font-size:    var(--fs-base);
  font-family:  var(--font-ui);
  vertical-align: middle;
  padding:      7px 10px;
}
.table-mdm td.num {
  text-align:   center;
  font-variant-numeric: tabular-nums;
}

/* ── Forms ────────────────────────────────────────────────────── */
.form-label {
  font-size:     var(--fs-sm);
  font-weight:   var(--fw-semi);
  font-family:   var(--font-ui);
  color:         #444;
  margin-bottom: 4px;
}
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border-color:  var(--clr-border);
  font-size:     var(--fs-md);
  font-family:   var(--font-ui);
}
.form-control:focus, .form-select:focus {
  border-color: var(--clr-primary);
  box-shadow:   0 0 0 .2rem rgba(26,86,160,.15);
}
.input-attendance {
  font-size:   1.3rem;
  font-weight: var(--fw-bold);
  font-family: var(--font-ui);
  text-align:  center;
  max-width:   110px;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  font-family:  var(--font-ui);
  font-weight:  var(--fw-medium);
  font-size:    var(--fs-base);
  border-radius: var(--radius-sm);
}
.btn-primary        { background: var(--clr-primary);   border-color: var(--clr-primary); }
.btn-primary:hover  { background: var(--clr-primary-dk); border-color: var(--clr-primary-dk); }
.btn-success        { background: var(--clr-success);   border-color: var(--clr-success); }
.btn-lock           { background: var(--clr-purple);    border-color: var(--clr-purple); color: #fff; }
.btn-lock:hover     { background: #6d28d9; color: #fff; }

/* ── Badges ───────────────────────────────────────────────────── */
.badge-locked  { background: var(--clr-purple-lt);  color: var(--clr-purple);  font-size: var(--fs-xs); border-radius: var(--radius-sm); padding: 3px 8px; font-family: var(--font-ui); font-weight: var(--fw-semi); }
.badge-draft   { background: var(--clr-warning-lt); color: var(--clr-warning); font-size: var(--fs-xs); border-radius: var(--radius-sm); padding: 3px 8px; font-family: var(--font-ui); font-weight: var(--fw-semi); }
.badge-holiday { background: var(--clr-danger-lt);  color: var(--clr-danger);  font-size: var(--fs-xs); border-radius: var(--radius-sm); padding: 3px 8px; font-family: var(--font-ui); font-weight: var(--fw-semi); }
.badge-pending { background: #f1f5f9;               color: var(--clr-text-light); font-size: var(--fs-xs); border-radius: var(--radius-sm); padding: 3px 8px; font-family: var(--font-ui); }

/* ── Calendar grid ────────────────────────────────────────────── */
.cal-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   5px;
}
.cal-cell {
  border-radius:  var(--radius-md);
  padding:        6px 4px;
  text-align:     center;
  font-size:      var(--fs-sm);
  font-family:    var(--font-ui);
  cursor:         pointer;
  min-height:     60px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: flex-start;
  gap:            2px;
  background:     #f8fafd;
  border:         1px solid #e5e9f0;
  transition:     background .12s;
}
.cal-cell:hover       { background: #eef3fb; }
.cal-cell .day-num    { font-size: 15px; font-weight: var(--fw-bold); font-family: var(--font-ui); }
.cal-cell.locked      { background: var(--clr-purple-lt); border-color: #c4b5fd; }
.cal-cell.draft       { background: var(--clr-warning-lt); border-color: #fcd34d; }
.cal-cell.holiday     { background: var(--clr-danger-lt);  border-color: #fca5a5; }
.cal-cell.sunday      { background: #f1f5f9; color: var(--clr-text-light); }
.cal-cell.today       { border: 2px solid var(--clr-primary); }

/* ── Grain preview ────────────────────────────────────────────── */
.grain-preview-row td  { font-size: var(--fs-sm); padding: 4px 8px; font-family: var(--font-ui); }
.grain-preview-row .g-total { font-weight: var(--fw-bold); color: var(--clr-primary); }

/* ── Alert overrides ──────────────────────────────────────────── */
.alert { font-family: var(--font-ui); font-size: var(--fs-base); border-radius: var(--radius-md); }

/* ── Report scroll wrapper (mobile) ──────────────────────────── */
.report-scroll {
  width:      100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 767.98px) {
  .report-scroll { border-radius: var(--radius-md); }
  /* Scroll hint shadow */
  .report-scroll {
    background:
      linear-gradient(to right, white 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%,
      radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.1), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.1), transparent) 0 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* ── Utility classes ──────────────────────────────────────────── */
.text-mdm    { color: var(--clr-primary) !important; }
.bg-mdm      { background: var(--clr-primary) !important; }
.fw-600      { font-weight: var(--fw-semi) !important; }
.fs-13       { font-size: 13px !important; }
.fs-12       { font-size: var(--fs-sm) !important; }
.fs-11       { font-size: var(--fs-xs) !important; }

/* Poppins number display */
.poppins     { font-family: var(--font-ui) !important; }
.noto        { font-family: var(--font-mr) !important; }

/* ── Print ────────────────────────────────────────────────────── */
@media print {
  #sidebar, .mobile-bottom-nav, #top-nav, .no-print { display: none !important; }
  #page-content { padding: 0; }
  body { background: #fff; }
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .page-title   { font-size: var(--fs-md); }
  .stat-tile    { padding: 10px 12px; }
  .stat-tile .stat-val { font-size: 1.2rem; }
  .input-attendance { font-size: 1.1rem; max-width: 90px; }
}