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

/* KCN CMS — Main Stylesheet */
:root {
  --primary:       #1252A3;
  --primary-dk:    #0D3F7D;
  --primary-lt:    #E3EBF8;
  --secondary:     #1A3C6B;
  --bg:            #F0F4F1;
  --white:         #FFFFFF;
  --text:          #212529;
  --muted:         #6C757D;
  --border:        #D5E8DC;
  --sidebar-w:     260px;
  --header-h:      60px;
  --danger:        #DC3545;
  --warning:       #E6980A;
  --success:       #198754;
  --info:          #0D6EFD;
  --radius:        8px;
  --shadow:        0 2px 8px rgba(0,0,0,.08);
}

* { margin:0; padding:0; box-sizing:border-box; }
button { background:none; border:none; padding:0; font-family:inherit; color:inherit; }

/* Prevent horizontal overflow on all pages */
html { overflow-x:hidden; }
body { overflow-x:hidden; max-width:100vw; }

/* Prevent fixed-width elements from overflowing on mobile */
@media (max-width:768px) {
  img, video, iframe { max-width:100% !important; }
  [style*="width:"] { max-width:100% !important; }
  .card-body > div[style*="grid-template-columns:1fr 1fr"],
  .card-body > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns:1fr !important;
  }
}

body {
  font-family:'Segoe UI',Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
}

a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── LAYOUT ───────────────────────────────── */
.layout { display:flex; min-height:100vh; }

.sidebar {
  position:fixed; left:0; top:0;
  width:var(--sidebar-w); height:100vh;
  background:var(--primary);
  overflow-y:auto; z-index:200;
  display:flex; flex-direction:column;
}

.sidebar-brand { position:sticky; top:0; z-index:10; background:var(--primary);
  padding:18px 20px 14px;
  border-bottom:1px solid rgba(255,255,255,.15);
}

.sidebar-brand .college { color:#fff; font-size:13.5px; font-weight:600; line-height:1.3; }
.sidebar-brand .system  { color:#FFFFFF; font-size:18px; font-weight:700; margin-top:4px; letter-spacing:1px; font-family:'Palatino Linotype','Book Antiqua','Bookman Old Style',Palatino,serif; }

.sidebar-nav { flex:1; padding:10px 0; overflow-y:visible; overflow-x:hidden; }

.nav-group { margin-bottom:4px; }

.nav-group { border-bottom:1px solid rgba(255,255,255,.05); }
.nav-group-title {
  display:flex !important; justify-content:space-between; align-items:center;
  width:100% !important; background:transparent !important; border:none !important;
  border-radius:0 !important; cursor:pointer;
  color:rgba(255,255,255,.92) !important;
  font-size:10px !important; font-weight:600 !important;
  font-family:'Inter','Segoe UI',Arial,sans-serif !important;
  letter-spacing:1px !important;
  letter-spacing:.8px; text-transform:uppercase;
  padding:10px 20px 8px !important;
  transition:color .15s;
  text-align:left !important;
  -webkit-appearance:none; appearance:none;
  outline:none; box-shadow:none !important;
}
.nav-group-title:hover { color:#ED651A !important; }
.nav-group-title.open { color:#ED651A !important; }
.nav-arrow { font-size:10px; transition:transform .2s; flex-shrink:0; }
.nav-group-title.open .nav-arrow { transform:rotate(180deg); }
.nav-group-items { display:none; padding-bottom:4px; }
.nav-group-items.open { display:block; }

.nav-item {
  display:flex; align-items:center; gap:9px;
  padding:8px 20px;
  color:rgba(255,255,255,.78);
  font-size:13px;
  font-family:'Inter','Segoe UI',Arial,sans-serif;
  font-weight:400;
  letter-spacing:0.1px;
  transition:background .15s, color .15s;
  cursor:pointer;
  border-radius:0;
}
.nav-item:hover {
  background:rgba(255,255,255,.1);
  color:#fff;
  text-decoration:none;
}
.nav-item.active {
  background:rgba(255,255,255,.15);
  color:#fff;
  text-decoration:none;
  border-left:3px solid #ED651A;
  padding-left:17px;
  font-weight:500;
}
.nav-item svg { width:16px; height:16px; flex-shrink:0; }

/* ── MAIN ─────────────────────────────────── */
.main {
  margin-left:var(--sidebar-w);
  flex:1; display:flex; flex-direction:column;
  min-height:100vh;
}

.topbar {
  position:sticky; top:0; z-index:100;
  height:var(--header-h);
  background:var(--white);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
  padding:0 24px; gap:16px;
  box-shadow:var(--shadow);
}

.topbar-title { font-size:15px; font-weight:600; flex:1; color:var(--text); margin-left:0; }

.topbar-user {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--muted);
}

.avatar {
  width:34px; height:34px; border-radius:50%;
  background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600;
}

.content { padding:24px; flex:1; max-width:1400px; }

/* ── PAGE HEADER ──────────────────────────── */
.page-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; flex-wrap:wrap; gap:12px;
}
.page-header h1 { font-size:20px; font-weight:600; color:var(--text); }
.breadcrumb { font-size:12px; color:var(--muted); margin-top:2px; }
.breadcrumb span { color:var(--muted); }
.breadcrumb a { color:var(--primary); }

/* ── CARDS ────────────────────────────────── */
.card {
  background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow); border:1px solid var(--border);
  margin-bottom:20px;
}
.card-header {
  padding:14px 20px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--primary-lt);
  border-radius:var(--radius) var(--radius) 0 0;
}
.card-header h2 { font-size:15px; font-weight:600; color:var(--primary); }
.card-body { padding:20px; }

/* ── STAT CARDS ───────────────────────────── */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:16px; margin-bottom:24px;
}
.stat-card {
  background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow); border:1px solid var(--border);
  padding:16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
}
.stat-icon {
  width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.stat-icon.green  { background:#E8F5EE; color:var(--primary); }
.stat-icon.blue   { background:#E3ECF3; color:var(--secondary); }
.stat-icon.amber  { background:#FBF1DC; color:var(--warning); }
.stat-icon.red    { background:#FDE8E8; color:var(--danger); }
.stat-val { font-size:22px; font-weight:700; color:var(--text); }
.stat-lbl { font-size:12px; color:var(--muted); margin-top:1px; }

/* ── TABLES ───────────────────────────────── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead th {
  background:var(--primary); color:#fff;
  padding:10px 14px; font-size:12.5px;
  font-weight:600; text-align:left;
  white-space:nowrap;
}
tbody tr { border-bottom:1px solid var(--border); }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--primary-lt); }
tbody td { padding:10px 14px; font-size:13.5px; vertical-align:middle; }
tbody td:empty::before { content:'—'; color:var(--muted); }

/* ── SEARCH / FILTER BAR ──────────────────── */
.filter-bar {
  display:flex; gap:10px; flex-wrap:wrap;
  align-items:center; margin-bottom:16px;
}
.search-box {
  flex:1; min-width:200px; max-width:340px;
  border:1px solid var(--border); border-radius:6px;
  padding:7px 12px; font-size:13.5px;
  background:var(--white);
}
.search-box:focus { outline:none; border-color:var(--primary); }

/* ── BUTTONS ──────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 16px; border-radius:6px;
  border:none; cursor:pointer;
  font-size:13.5px; font-weight:500;
  text-decoration:none; transition:all .15s;
  white-space:nowrap;
}
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dk); color:#fff; text-decoration:none; }
.btn-secondary { background:var(--white); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--bg); text-decoration:none; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#b02a37; color:#fff; text-decoration:none; }
.btn-warning { background:var(--warning); color:#fff; }
.btn-sm { padding:4px 10px; font-size:12px; }
.btn-icon { padding:5px 8px; }

/* ── BADGES ───────────────────────────────── */
.badge {
  display:inline-block; padding:3px 8px; border-radius:4px;
  font-size:11.5px; font-weight:600;
}
.badge-success  { background:#D1F2E1; color:#0A6832; }
.badge-danger   { background:#FDE8E8; color:#8B0000; }
.badge-warning  { background:#FFF3CD; color:#7A4F00; }
.badge-info     { background:#D0E8FF; color:#0A3C6B; }
.badge-muted    { background:#E9ECEF; color:#495057; }
.badge-primary  { background:var(--primary-lt); color:var(--primary); }

/* ── FORMS ────────────────────────────────── */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }
.form-group { display:flex; flex-direction:column; gap:4px; }
.form-group.full { grid-column:1/-1; }
.form-label { font-size:13px; font-weight:500; color:var(--text); }
.form-label .req { color:var(--danger); margin-left:2px; }
.form-control {
  border:1px solid var(--border); border-radius:6px;
  padding:8px 12px; font-size:13.5px;
  background:var(--white); color:var(--text);
  transition:border-color .15s;
  font-family:inherit;
}
.form-control:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(26,107,60,.12); }
.form-hint { font-size:11.5px; color:var(--muted); }

.form-section {
  background:var(--primary-lt);
  border-left:4px solid var(--primary);
  border-radius:0 6px 6px 0;
  padding:10px 16px; margin:20px 0 14px;
  font-size:14px; font-weight:600; color:var(--primary);
}

.form-actions {
  display:flex; gap:10px; align-items:center;
  padding-top:20px; border-top:1px solid var(--border);
  margin-top:20px;
}

/* ── ALERTS ───────────────────────────────── */
.alert {
  padding:12px 16px; border-radius:6px;
  display:flex; align-items:center; gap:8px;
  margin-bottom:14px; font-size:13.5px;
  position:relative;
}
.alert-success { background:#D1F2E1; color:#0A6832; border:1px solid #A3DFB8; }
.alert-danger  { background:#FDE8E8; color:#8B0000; border:1px solid #F5BEBD; }
.alert-warning { background:#FFF3CD; color:#7A4F00; border:1px solid #FFE69C; }
.alert-info    { background:#D0E8FF; color:#0A3C6B; border:1px solid #9EC7F5; }
.alert-close { position:absolute; right:12px; background:none; border:none; font-size:18px; cursor:pointer; color:inherit; opacity:.6; }

/* ── PAGINATION ───────────────────────────── */
.pagination { display:flex; gap:5px; margin-top:16px; flex-wrap:wrap; }
.page-btn {
  padding:5px 11px; border-radius:5px;
  border:1px solid var(--border); background:var(--white);
  font-size:13px; color:var(--text);
  text-decoration:none; transition:all .15s;
}
.page-btn:hover { background:var(--primary-lt); border-color:var(--primary); color:var(--primary); text-decoration:none; }
.page-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }

/* ── TABS ─────────────────────────────────── */
.tabs { display:flex; gap:2px; border-bottom:2px solid var(--border); margin-bottom:20px; }
.tab {
  padding:9px 18px; border:none; background:none; cursor:pointer;
  font-size:13.5px; color:var(--muted); border-bottom:2px solid transparent;
  margin-bottom:-2px; font-family:inherit; transition:all .15s;
}
.tab:hover { color:var(--primary); }
.tab.active { color:var(--primary); font-weight:600; border-bottom-color:var(--primary); }

/* ── MULTI-STEP FORM ──────────────────────── */
.step-bar {
  display:flex; align-items:center; margin-bottom:28px;
  overflow-x:auto; padding-bottom:4px;
}
.step-item { display:flex; align-items:center; flex-shrink:0; }
.step-circle {
  width:30px; height:30px; border-radius:50%;
  border:2px solid var(--border); background:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; color:var(--muted);
  transition:all .2s;
}
.step-item.active .step-circle { border-color:var(--primary); background:var(--primary); color:#fff; }
.step-item.done .step-circle { border-color:var(--success); background:var(--success); color:#fff; }
.step-label { font-size:11.5px; color:var(--muted); margin-top:4px; white-space:nowrap; }
.step-item.active .step-label { color:var(--primary); font-weight:600; }
.step-line { height:2px; flex:1; background:var(--border); min-width:20px; }
.step-item.done + .step-line { background:var(--success); }
.step-wrap { display:flex; flex-direction:column; align-items:center; }

/* ── STATUS COLORS ────────────────────────── */
.status-submitted   { background:#D0E8FF; color:#0A3C6B; }
.status-approved    { background:#D1F2E1; color:#0A6832; }
.status-rejected    { background:#FDE8E8; color:#8B0000; }
.status-pending     { background:#FFF3CD; color:#7A4F00; }
.status-active      { background:#D1F2E1; color:#0A6832; }
.status-vacated     { background:#E9ECEF; color:#495057; }

/* ── LOGIN PAGE ───────────────────────────── */
.login-page {
  min-height:100vh; background:var(--primary);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.login-card {
  background:var(--white); border-radius:12px;
  width:100%; max-width:400px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  overflow:hidden;
}
.login-header {
  background:var(--primary); padding:28px 30px;
  text-align:center; color:#fff;
}
.login-header h1 { font-size:16px; font-weight:700; line-height:1.3; }
.login-header p  { font-size:12px; opacity:.75; margin-top:4px; }
.login-body  { padding:28px 30px; }
.login-body .form-group { margin-bottom:16px; }

/* ── RESPONSIVE ───────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar — hidden by default, slides in when .open */
  .sidebar { transform:translateX(-100%); transition:transform .25s ease; position:fixed; top:0 !important; left:0 !important; height:100% !important; height:100dvh !important; z-index:1001 !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; }
  .sidebar.open { transform:translateX(0); box-shadow:4px 0 20px rgba(0,0,0,.4); }
  .main { margin-left:0 !important; }
  .layout { padding-top: var(--header-h); }
  .content { padding:12px !important; }
  body.sidebar-open { overflow:hidden !important; position:fixed !important; left:0; right:0; }
  body.sidebar-open .main { pointer-events:none; }

  /* Topbar — fixed on mobile */
  .topbar { position:fixed !important; top:0 !important; left:0 !important;
            right:0 !important; z-index:500 !important; padding:0 12px;
            -webkit-transform:translateZ(0); transform:translateZ(0); }
  .hamburger { display:flex !important; flex-direction:column; gap:5px; cursor:pointer;
    background:#f0f4f9; border:1px solid #CBD5E1; border-radius:6px;
    padding:8px 10px; margin-right:8px;
    width:44px; height:44px; align-items:center; justify-content:center; }
  .hamburger span { display:block !important; width:20px; height:2.5px;
    background:#1252A3 !important; border-radius:2px; }

  /* Overlay when sidebar open */
  .sidebar-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999; }
  .sidebar-overlay.active { display:block; }

  /* Stats grid — 2 columns on mobile */
  .stats-grid { grid-template-columns:1fr 1fr !important; gap:8px; }

  /* Tables — horizontal scroll */
  .table-wrap { overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  table { min-width:500px; }

  /* Form grids — single column */
  .form-grid { grid-template-columns:1fr !important; }

  /* Page header — stack on mobile */
  .page-header { flex-direction:column; align-items:flex-start; gap:10px; }
  .page-header > div:last-child { width:100%; display:flex; flex-wrap:wrap; gap:6px; }
  .page-header .btn { flex:1; text-align:center; min-width:120px; }

  /* Cards full width */
  .card { margin-bottom:12px; }

  /* Filter bars wrap */
  .filter-bar, form.flex { flex-wrap:wrap !important; }
  form .form-control { min-width:0; }

  /* Modals — full width on mobile */
  div[style*="max-width:700px"], div[style*="max-width:680px"],
  div[style*="max-width:600px"], div[style*="max-width:580px"],
  div[style*="max-width:540px"], div[style*="max-width:500px"],
  div[style*="max-width:440px"] { max-width:95vw !important; width:95vw !important; margin:8px !important; }

  /* Font size adjustments */
  body { font-size:13px; }
  .stat-val { font-size:20px !important; }

  /* Buttons on mobile */
  .btn { padding:8px 12px; font-size:13px; }
  .btn-sm { padding:5px 8px; font-size:11px; }

  /* Hide less important columns on mobile */
  .hide-mobile { display:none !important; }
}

/* ── UTILITY ──────────────────────────────── */
.text-muted  { color:var(--muted); }
.text-danger { color:var(--danger); }
.text-success{ color:var(--success); }
.text-right  { text-align:right; }
.text-center { text-align:center; }
.mt-1 { margin-top:8px; } .mt-2 { margin-top:16px; } .mt-3 { margin-top:24px; }
.mb-1 { margin-bottom:8px; } .mb-2 { margin-bottom:16px; }
.flex { display:flex; } .gap-2 { gap:8px; } .gap-3 { gap:12px; }
.flex-1 { flex:1; } .items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.w-full { width:100%; }
.hidden { display:none !important; }
.no-data { text-align:center; padding:40px; color:var(--muted); font-size:14px; }

/* Public admission form */
.public-wrap { max-width:880px; margin:30px auto; padding:0 16px 60px; }
.public-header {
  background:var(--primary); color:#fff;
  border-radius:10px; padding:20px 24px; margin-bottom:24px; text-align:center;
}
.public-header h1 { font-size:18px; font-weight:700; }
.public-header p  { font-size:12.5px; opacity:.75; margin-top:3px; }

/* ── Global Print Styles ─────────────────────────────────────────────────────
   Hides sidebar, topbar, and .no-print elements when printing any page.
   Only the main content area is printed.
   ─────────────────────────────────────────────────────────────────────────── */
@media print {
    /* Hide navigation and chrome */
    .sidebar,
    .topbar,
    .no-print            { display: none !important; }

    /* Remove flex layout — make content fill full width */
    .layout              { display: block !important; padding-top: var(--header-h); }
    .main                { margin: 0 !important; padding: 0 !important;
                           width: 100% !important; overflow: visible !important; }

    /* Reset body */
    body                 { background: #fff !important; font-size: 11px; }

    /* Landscape for wide tables (attendance registers) */
    @page                { size: landscape; margin: 1.2cm 1cm; }

    /* Keep table headers on every page */
    thead                { display: table-header-group; }
    tfoot                { display: table-footer-group; }

    /* Avoid page breaks inside table rows */
    tr                   { page-break-inside: avoid; }

    /* Make links plain text */
    a                    { color: inherit; text-decoration: none; }
}