/* =========================================================
   Department of B.Voc (Software Development) - NBBGC
   Main stylesheet. Colour theme derived from the college crest:
   deep maroon/red + gold, with dark slate text.
   ========================================================= */

:root{
  --maroon: #7a1f1f;
  --maroon-dark: #5e1414;
  --gold: #c9a227;
  --gold-light: #f4d675;
  --ink: #24211d;
  --muted: #6b6459;
  --bg-cream: #fdfaf3;
  --border: #e7dfc9;
  --success:#2f7a3d;
  --danger:#a12626;
}

*{box-sizing:border-box;}
body{
  font-family:'Segoe UI', Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg-cream);
  margin:0;
  line-height:1.6;
}
a{color:var(--maroon); text-decoration:none;}
a:hover{color:var(--gold);}
h1,h2,h3,h4,h5{font-family:Georgia,'Times New Roman',serif; color:var(--maroon-dark); font-weight:700;}
.container{max-width:1180px; margin:0 auto; padding:0 20px;}

/* ---------- Top bar ---------- */
.topbar{background:var(--maroon-dark); color:#f1e6c8; font-size:.85rem; padding:6px 0;}
.topbar .container{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}
.topbar a{color:#f1e6c8;}
.topbar a:hover{color:var(--gold-light);}

/* ---------- Header ---------- */
.site-header{background:#fff; border-bottom:3px solid var(--gold); padding:14px 0;}
.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:14px;}
.brand img{height:76px; width:76px; object-fit:contain;}
.brand-text h1{font-size:1.15rem; margin:0; line-height:1.25;}
.brand-text p{margin:2px 0 0; font-size:.82rem; color:var(--muted);}

/* ---------- Nav ---------- */
.navbar{background:linear-gradient(180deg, var(--maroon) 0%, var(--maroon-dark) 100%);}
.navbar .container{display:flex; align-items:center; justify-content:space-between;}
.nav-links{display:flex; list-style:none; margin:0; padding:0; flex-wrap:wrap;}
.nav-links li a{
  display:block; padding:13px 16px; color:#fff5df; font-weight:600; font-size:.93rem;
  border-right:1px solid rgba(255,255,255,.08);
}
.nav-links li a:hover, .nav-links li a.active{background:var(--gold); color:var(--maroon-dark);}
.nav-toggle{display:none; background:none; border:0; color:#fff; font-size:1.5rem; padding:10px 16px; cursor:pointer;}

@media(max-width:900px){
  .nav-toggle{display:block;}
  .nav-links{display:none; flex-direction:column; width:100%;}
  .nav-links.open{display:flex;}
  .navbar .container{flex-wrap:wrap;}
}

/* ---------- Hero ---------- */
.hero{
  background:
    linear-gradient(120deg, rgba(122,31,31,.92), rgba(94,20,20,.88)),
    repeating-linear-gradient(45deg, rgba(201,162,39,.06) 0 10px, transparent 10px 20px);
  color:#fff5df; padding:56px 0;
}
.hero h2{color:#fff; font-size:2rem; margin:0 0 12px;}
.hero p{max-width:720px; font-size:1.05rem; color:#f1e6c8;}
.hero .badge-row{margin-top:18px; display:flex; gap:10px; flex-wrap:wrap;}
.badge{background:var(--gold); color:var(--maroon-dark); padding:6px 14px; border-radius:30px; font-weight:700; font-size:.8rem;}

.btn{
  display:inline-block; padding:10px 22px; border-radius:6px; font-weight:700; font-size:.92rem;
  background:var(--gold); color:var(--maroon-dark); border:2px solid var(--gold); cursor:pointer;
}
.btn:hover{background:transparent; color:var(--gold); border-color:var(--gold-light);}
.btn-outline{background:transparent; color:var(--maroon); border:2px solid var(--maroon);}
.btn-outline:hover{background:var(--maroon); color:#fff;}
/* on dark banners keep the white outline version */
.hero .btn-outline, .page-banner .btn-outline{color:#fff; border-color:#fff;}
.hero .btn-outline:hover, .page-banner .btn-outline:hover{background:#fff; color:var(--maroon);}
.btn-maroon{background:var(--maroon); color:#fff; border-color:var(--maroon);}
.btn-maroon:hover{background:var(--maroon-dark); color:#fff;}
.btn-sm{padding:6px 14px; font-size:.82rem;}

/* ---------- Sections ---------- */
section{padding:46px 0;}
.section-title{text-align:center; margin-bottom:32px;}
.section-title h2{font-size:1.7rem; position:relative; display:inline-block; padding-bottom:12px;}
.section-title h2::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:70px; height:4px; background:var(--gold); border-radius:2px;
}
.section-title p{color:var(--muted); max-width:640px; margin:8px auto 0;}
.bg-alt{background:#fff;}

/* ---------- Cards / grids ---------- */
.grid{display:grid; gap:22px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr;} }

.card{background:#fff; border:1px solid var(--border); border-radius:10px; padding:22px; box-shadow:0 2px 10px rgba(0,0,0,.04);}
.card h3{font-size:1.05rem; margin:0 0 8px;}
.card .icon{font-size:1.8rem; color:var(--maroon); margin-bottom:10px;}

.stat-card{text-align:center; background:#fff; border:1px solid var(--border); border-top:4px solid var(--gold); border-radius:10px; padding:24px;}
.stat-card .num{font-size:2rem; font-weight:800; color:var(--maroon);}
.stat-card .label{color:var(--muted); font-size:.9rem;}

/* ---------- Tables ---------- */
table{width:100%; border-collapse:collapse; background:#fff;}
table th, table td{border:1px solid var(--border); padding:9px 11px; font-size:.92rem; text-align:left;}
table th{background:var(--maroon); color:#fff;}
.table-wrap{overflow-x:auto; margin-bottom:24px; border-radius:8px;}
tr:nth-child(even) td{background:#faf7ee;}

/* ---------- Breadcrumb / page banner ---------- */
.page-banner{background:var(--maroon-dark); color:#fff5df; padding:34px 0;}
.page-banner h1{color:#fff; margin:0; font-size:1.6rem;}
.page-banner .crumbs{font-size:.85rem; color:#e6d6a0; margin-top:6px;}
.page-banner .crumbs a{color:#e6d6a0;}

/* ---------- Notices ---------- */
.notice-item{display:flex; gap:16px; border-bottom:1px solid var(--border); padding:14px 0;}
.notice-date{background:var(--maroon); color:#fff; border-radius:8px; text-align:center; min-width:64px; padding:8px 6px; font-size:.78rem;}
.notice-date b{display:block; font-size:1.2rem;}
.notice-item h4{margin:0 0 4px; font-size:1rem;}

/* ---------- Faculty ---------- */
.faculty-card{text-align:center;}
.faculty-card img{width:120px; height:120px; border-radius:50%; object-fit:cover; border:4px solid var(--gold); margin-bottom:12px;}
.faculty-card h3{margin:0;}
.faculty-card .desig{color:var(--maroon); font-weight:600; font-size:.88rem;}
.faculty-card .qual{color:var(--muted); font-size:.85rem;}

/* ---------- Gallery ---------- */
.gallery-item{border-radius:10px; overflow:hidden; border:1px solid var(--border); background:#fff;}
.gallery-item img{width:100%; height:180px; object-fit:cover; display:block;}
.gallery-item .cap{padding:8px 10px; font-size:.85rem; color:var(--muted);}

/* ---------- Forms ---------- */
.form-group{margin-bottom:16px;}
.form-group label{display:block; font-weight:600; margin-bottom:6px; font-size:.9rem;}
.form-control{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:6px; font-size:.95rem; font-family:inherit;
}
.form-control:focus{outline:2px solid var(--gold); border-color:var(--gold);}
textarea.form-control{resize:vertical;}

.alert{padding:12px 16px; border-radius:8px; margin-bottom:18px; font-size:.92rem;}
.alert-success{background:#e6f4e8; color:var(--success); border:1px solid #b7dfbd;}
.alert-danger{background:#fbe8e8; color:var(--danger); border:1px solid #eec4c4;}
.alert-info{background:#eef4fb; color:#2a5a8c; border:1px solid #c7dcf2;}

/* ---------- Footer ---------- */
.site-footer{background:var(--maroon-dark); color:#e6d6a0; padding:40px 0 18px; margin-top:40px;}
.site-footer h4{color:#fff; font-size:1rem; margin-bottom:14px;}
.site-footer a{color:#e6d6a0;}
.site-footer a:hover{color:#fff;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:26px;}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr;}}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15); margin-top:26px; padding-top:16px; font-size:.82rem; text-align:center; color:#cbb98a;}
.footer-logo{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.footer-logo img{height:48px;}

/* ---------- Utility ---------- */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.small{font-size:.85rem; color:var(--muted);}
.tag{display:inline-block; background:var(--gold-light); color:var(--maroon-dark); font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:20px; margin-right:6px;}
.credit-total{background:#faf3d9; font-weight:700;}

/* ---------- Admin Panel ---------- */
.admin-body{background:#f2efe6; font-family:'Segoe UI',Roboto,Arial,sans-serif; margin:0;}
.admin-wrap{display:flex; min-height:100vh;}
.admin-sidebar{width:230px; background:var(--maroon-dark); color:#f1e6c8; flex-shrink:0;}
.admin-sidebar .brand{padding:18px; border-bottom:1px solid rgba(255,255,255,.15); color:#fff;}
.admin-sidebar .brand img{height:40px; width:40px;}
.admin-sidebar .brand-text h1{color:#fff; font-size:.95rem;}
.admin-sidebar nav a{
  display:block; padding:12px 18px; color:#f1e6c8; font-size:.9rem; border-left:4px solid transparent;
}
.admin-sidebar nav a:hover, .admin-sidebar nav a.active{background:rgba(255,255,255,.08); border-left-color:var(--gold); color:#fff;}
.admin-main{flex:1; padding:24px; max-width:calc(100% - 230px);}
.admin-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; background:#fff; padding:12px 18px; border-radius:8px; border:1px solid var(--border);}
.admin-card{background:#fff; border:1px solid var(--border); border-radius:10px; padding:20px; margin-bottom:20px;}
.admin-card h2{font-size:1.1rem; margin-top:0;}
.data-table{width:100%; border-collapse:collapse;}
.data-table th, .data-table td{padding:10px; border-bottom:1px solid var(--border); font-size:.88rem; text-align:left;}
.data-table th{background:var(--maroon); color:#fff; text-align:center;}
.actions a{margin-right:8px; font-size:.85rem;}
.login-page{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(120deg,var(--maroon),var(--maroon-dark));}
.login-card{background:#fff; padding:36px; border-radius:12px; width:100%; max-width:380px; box-shadow:0 10px 40px rgba(0,0,0,.25);}
.login-card img{height:70px; display:block; margin:0 auto 14px;}
@media(max-width:800px){
  .admin-wrap{flex-direction:column;}
  .admin-sidebar{width:100%;}
  .admin-main{max-width:100%;}
}

/* ===================== Phase 2: Portal / Timetable / Attendance ===================== */
.badge-blue { background:#1d4ed8; color:#fff; }
.badge-red  { background:#dc2626; color:#fff; }
.tt-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.tt-table th, .tt-table td { border:1px solid #d8c9c9; padding:6px; text-align:center; vertical-align:middle; }
.tt-table th { background:#7a1f1f; color:#fff; font-weight:600; }
.tt-rowlabel { background:#f7efef; min-width:96px; }
.tt-empty { color:#bbb; }
.tt-cell { border-radius:6px; padding:5px 4px; display:flex; flex-direction:column; gap:2px; }
.tt-cell b { font-size:0.85rem; }
.tt-cell span { font-size:0.72rem; color:#444; }
.tt-cell .tt-room { font-weight:600; color:#7a1f1f; }
.tt-theory { background:#fde2e7; }
.tt-lab    { background:#dcf5dc; }
.tt-skill  { background:#dbeafe; }
.tt-legend .tt-cell { display:inline-block; padding:4px 12px; margin-right:8px; }
.portal-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.portal-tabs a { padding:8px 16px; border:1px solid #7a1f1f; border-radius:20px; color:#7a1f1f; text-decoration:none; font-weight:600; font-size:0.9rem; }
.portal-tabs a.active, .portal-tabs a:hover { background:#7a1f1f; color:#fff; }
.att-check { transform:scale(1.5); accent-color:#1d4ed8; cursor:pointer; }
.student-photo { width:90px; height:90px; object-fit:cover; border-radius:50%; border:3px solid #7a1f1f; }
.portal-hero { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
@media print {
  .topbar, .site-header, .navbar, .site-footer, .portal-tabs, .no-print { display:none !important; }
  .card { box-shadow:none; border:none; }
}

/* ===================== Mobile UI polish (phones / installed app) ===================== */
@media (max-width: 768px) {
  /* comfortable touch + no iOS zoom-on-focus */
  .form-control { font-size: 16px; min-height: 44px; }
  .btn { padding: 12px 20px; min-height: 44px; }
  .btn-sm { padding: 9px 14px; min-height: 38px; }
  .att-check { transform: scale(1.9); margin: 6px; }
  .card { padding: 16px 14px; }
  .portal-hero { gap: 12px; }
  .portal-tabs a { padding: 10px 16px; }

  /* stacked-card tables: each row becomes a small card */
  .stack-mobile tr:first-child { display: none; }             /* hide heading row */
  .stack-mobile, .stack-mobile tbody { display: block; }
  .stack-mobile tr {
    display: block; background: #fff; border: 1px solid var(--border);
    border-radius: 10px; margin-bottom: 10px; padding: 6px 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
  .stack-mobile td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    border: none; border-bottom: 1px dashed #eee; padding: 8px 0; text-align: right;
  }
  .stack-mobile td:last-child { border-bottom: none; }
  .stack-mobile td::before {
    content: attr(data-label);
    font-weight: 600; color: var(--maroon); text-align: left; flex-shrink: 0;
  }
  .stack-mobile td[data-label=""]::before { display: none; }

  /* timetable: swipe sideways with the day column pinned */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .tt-table th:first-child, .tt-table td:first-child {
    position: sticky; left: 0; z-index: 2;
    box-shadow: 2px 0 4px rgba(0,0,0,.08);
  }
  .tt-table td:first-child { background: #f7efef; }
  .tt-table th:first-child { background: #7a1f1f; }
  .tt-table th, .tt-table td { padding: 8px 6px; min-width: 108px; }
  .tt-cell b { font-size: 0.9rem; }
  .tt-cell span { font-size: 0.78rem; }

  /* room for the bottom navigation bar */
  body.has-bottomnav { padding-bottom: 68px; }
}

/* student bottom navigation (shows on phones only) */
.portal-bottomnav { display: none; }
@media (max-width: 768px) {
  .portal-bottomnav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
    background: var(--maroon); box-shadow: 0 -2px 10px rgba(0,0,0,.25);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .portal-bottomnav a {
    flex: 1; text-align: center; color: #fff; text-decoration: none;
    font-size: 0.72rem; font-weight: 600; padding: 4px 2px; border-radius: 8px;
  }
  .portal-bottomnav a span { display: block; font-size: 1.25rem; line-height: 1.3; }
  .portal-bottomnav a:active { background: rgba(255,255,255,.15); }
}
@media print { .portal-bottomnav { display: none !important; } }