/* ===========================
   Theme Variables
   =========================== */
:root{
  --teal:#006d5b;
  --teal-dark:#004d40;
  --yellow:#ffcc00;
  --white:#ffffff;
  --black:#000000;
  --text:#333333;
  --card-shadow:0 6px 32px rgba(1,83,82,.10),0 1.5px 8px rgba(1,83,82,.08);
}

/* ===========================
   Base / Reset
   =========================== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; padding:0;
  font-family:Arial, Helvetica, sans-serif;
  background:#f4f4f4; color:var(--text);
}

/* Headings (shared) */
h2, h3 {
  color: var(--teal);
  text-align: center;
  margin-bottom: 20px;
}

/* Labels + Inputs (shared) */
label{ font-weight:bold; color:var(--teal) }
input[type="text"], input[type="password"], input[type="number"], select{
  width:100%; padding:10px; margin:5px 0 15px;
  border:1px solid #ddd; border-radius:6px; background:#fff;
}

/* Buttons (shared) */
button{
  background:var(--yellow); color:var(--black);
  border:none; padding:10px 18px; cursor:pointer;
  border-radius:8px; font-size:15px; font-weight:700;
  transition:background .2s, transform .06s;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
button:hover{ background:#e6b800 }
button:active{ transform:translateY(1px) }

/* ===========================
   Cards / Forms / Tables (shared)
   =========================== */
.page-card{
  background:#fff; max-width:1100px;
  margin:30px auto 22px; padding:36px 48px;
  border-radius:16px; box-shadow:var(--card-shadow);
  min-height:60vh; transition: box-shadow .2s;
}

/* Make forms look like smaller cards inside big card */
.page-card form{
  background:#f9f9f9; max-width:600px;
  margin:24px auto 32px; padding:24px;
  border-radius:10px; box-shadow:var(--card-shadow);
}

/* Fallback: if a page has a standalone form (no .page-card wrapper),
   give it reasonable width and card look automatically */
main form:not(.no-card),
form.standalone{
  background:#f9f9f9;
  max-width:600px;
  margin:24px auto 32px;
  padding:24px;
  border-radius:10px;
  box-shadow:0 2px 12px rgba(0,109,91,0.08);
}

@media (max-width:1200px){
  .page-card{ max-width:98vw; padding:22px 6vw; }
}
@media (max-width:800px){
  .page-card{ padding:16px 3vw; border-radius:10px; }
}
@media (max-width:480px){
  .page-card{ padding:12px 2vw; margin:12px 0; }
}

/* Tables (shared) */
table{
  width:100%; border-collapse:collapse; margin:24px 0;
  background:#fff; border-radius:10px; overflow:hidden;
}
table, th, td { border:1px solid #ddd }
th, td { padding:12px; text-align:left }
th{ background:var(--teal); color:#fff }
tr:nth-child(even){ background:#f9f9f9 }
tr:hover{ background:#f1f1f1 }

/* ===========================
   OLD TOP NAVBAR (for non-admin pages that still use it)
   =========================== */
.navbar{
  background-color: var(--teal);
  padding:12px 0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:0;
}
.navbar a{
  color:#fff;
  min-width:180px; max-width:220px;
  height:44px; line-height:44px;
  padding:0 16px; margin:6px 8px;
  background:var(--teal-dark);
  text-align:center; border-radius:5px; text-decoration:none;
  font-size:15px; font-weight:500; box-sizing:border-box;
  transition: background .2s, color .2s, box-shadow .2s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  display:flex; align-items:center; justify-content:center;
}
.navbar a:hover, .navbar a.active{
  background:var(--yellow); color:#000; font-weight:bold;
  box-shadow:0 2px 8px rgba(255,204,0,0.08);
}

/* Mobile hamburger for old navbar */
.burger{ display:none; cursor:pointer; padding:10px }
.burger div{ width:25px; height:3px; background:#fff; margin:5px }
@media (max-width:768px){
  .navbar{ flex-direction:column; align-items:stretch; padding:10px 0; }
  .navbar a{
    display:none; width:100%; min-width:0; max-width:100%;
    height:44px; line-height:44px; margin:4px 0; border-radius:0;
    font-size:15px; white-space:nowrap; text-align:left; justify-content:flex-start; padding-left:18px;
  }
  .navbar a.active{ display:flex }
  .burger{ display:block }
}

/* ===========================================================
   ADMIN DASHBOARD SIDEBAR/TOPBAR — SCOPED to body.with-sidebar
   =========================================================== */

/* Top bar (scoped) */
body.with-sidebar .topbar{
  position:sticky; top:0; z-index:1100;
  display:flex; align-items:center; gap:10px;
  background:var(--white); color:var(--teal);
  padding:10px 12px; box-shadow:0 2px 10px rgba(0,0,0,.06);
}
body.with-sidebar .topbar-title{
  flex:1; margin:0; font-size:18px; color:var(--teal);
  text-align:center; font-weight:800;
}
body.with-sidebar .topbar-actions .topbar-link{
  text-decoration:none; color:var(--teal);
  background:#e9f5f2; padding:8px 12px; border-radius:8px;
  font-weight:700;
}

/* Toggle button (scoped) */
body.with-sidebar .sidebar-toggle{
  background:var(--teal); color:var(--white);
  border:none; border-radius:10px; padding:8px 12px; font-size:18px;
  cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.12);
}
body.with-sidebar .sidebar-toggle:focus{ outline:2px solid var(--yellow) }

/* Sidebar (scoped) */
body.with-sidebar .sidebar{
  position:fixed; left:0; top:0;
  height:100vh; width:270px;
  background:var(--teal); color:#fff;
  padding:12px; padding-top:56px; /* space for topbar */
  box-shadow:2px 0 18px rgba(0,0,0,.12);
  overflow-y:auto; z-index:1050;
  transition:transform .25s ease, width .2s ease;
}

/* Header inside sidebar (scoped) */
body.with-sidebar .sidebar-header{
  position:sticky; top:0; z-index:2;
  background:var(--teal);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 4px; margin-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.15);
}
body.with-sidebar .brand{ display:flex; align-items:center; gap:8px; font-weight:800 }
body.with-sidebar .brand-icon{ font-size:16px }
body.with-sidebar .brand-label{ white-space:nowrap }

/* Links in sidebar (scoped) */
body.with-sidebar .side-links{
  display:flex; flex-direction:column; gap:8px;
  margin-top:16px; padding-top:8px;
}
body.with-sidebar .side-links a{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:#fff;
  background:var(--teal-dark);
  padding:10px 12px; border-radius:10px;
  font-size:14px; line-height:1.2; font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:background .2s, color .2s, transform .08s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.with-sidebar .side-links a:hover,
body.with-sidebar .side-links a:focus{
  background:var(--yellow); color:#000; transform:translateY(-1px);
}
body.with-sidebar .side-links a.active{
  background:var(--yellow); color:#000; font-weight:800;
}
body.with-sidebar .side-links .dot{ display:inline-block; width:10px; text-align:center }

/* Content alignment (scoped) */
body.with-sidebar .content{
  margin-left:270px;
  padding:16px 18px;
}

/* Collapsible (desktop) */
body.with-sidebar .sidebar.collapsed{ width:72px; }
body.with-sidebar .sidebar.collapsed .brand-label{ display:none }
body.with-sidebar .sidebar.collapsed .collapse-btn{ transform:rotate(180deg) }
body.with-sidebar .sidebar.collapsed .side-links .label{ display:none }
body.with-sidebar .sidebar.collapsed .side-links a{ justify-content:center }

/* Expanded (desktop) */
body.with-sidebar .sidebar.expanded{ width:270px }

/* Collapse button */
body.with-sidebar .collapse-btn{
  background:rgba(255,255,255,.15);
  border:none; color:#fff; font-weight:900;
  width:28px; height:28px; line-height:28px;
  border-radius:6px; cursor:pointer;
}
body.with-sidebar .collapse-btn:hover{ background:var(--yellow); color:#000 }

/* Mobile behavior for sidebar */
@media (max-width:992px){
  body.with-sidebar .sidebar{
    transform:translateX(-100%); padding-top:56px;
  }
  body.with-sidebar .sidebar.open{ transform:translateX(0) }
  body.with-sidebar .content{ margin-left:0; padding-top:12px }
}

/* Optional nicer scrollbar (scoped) */
body.with-sidebar .sidebar::-webkit-scrollbar{ width:8px }
body.with-sidebar .sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); border-radius:6px }
body.with-sidebar .sidebar::-webkit-scrollbar-track{ background:transparent }