/* ==========================================================================
   Canteen Hub — Admin design system
   ========================================================================== */
:root{
  --bg:            #f4f5f7;
  --surface:       #ffffff;
  --surface-2:     #fafafa;
  --border:        #e9eaee;
  --border-2:      #dfe1e6;
  --ink:           #191b22;
  --ink-2:         #4a4f5c;
  --muted:         #8a8f9c;

  --brand:         #ff5722;
  --brand-ink:     #e64a19;
  --brand-soft:    #fff1ec;

  --green:#12b76a; --green-soft:#e6f7ef;
  --red:#f04438;   --red-soft:#fdeceb;
  --amber:#f79009; --amber-soft:#fef3e5;
  --blue:#3b82f6;  --blue-soft:#ebf2ff;
  --violet:#8b5cf6;--violet-soft:#f2edfe;
  --teal:#0d9488;  --teal-soft:#e5f6f4;

  --radius:14px; --radius-sm:10px; --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(20,23,31,.05), 0 1px 3px rgba(20,23,31,.04);
  --shadow:0 6px 22px rgba(20,23,31,.08);
  --shadow-lg:0 18px 42px rgba(20,23,31,.14);

  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Plus Jakarta Sans',var(--font);
  --sidebar-w:262px;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand-ink); text-decoration:none}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display); letter-spacing:-.01em}
::selection{background:var(--brand-soft)}

/* ---------- layout shell ------------------------------------------------- */
.app{display:flex; min-height:100vh}

.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:var(--surface);
  border-right:1px solid var(--border); position:sticky; top:0; height:100vh;
  overflow-y:auto; display:flex; flex-direction:column; z-index:30;
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:#e2e3e8; border-radius:3px}

.sidebar .brand{
  display:flex; align-items:center; gap:11px; padding:20px 22px 18px;
  font-family:var(--font-display); font-weight:800; font-size:1.12rem; color:var(--ink);
}
.sidebar .brand .mark{
  width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand),#ff8a4c); color:#fff; font-size:1rem;
  box-shadow:0 6px 14px rgba(255,87,34,.35);
}
.sidebar .nav-group{padding:6px 12px}
.sidebar .nav-group-title{
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding:14px 12px 6px;
}
.sidebar a.navlink{
  display:flex; align-items:center; gap:12px; padding:9px 12px; margin:1px 0;
  color:var(--ink-2); font-size:.905rem; font-weight:500; border-radius:10px;
  transition:background .15s,color .15s;
}
.sidebar a.navlink i{width:18px; text-align:center; font-size:.95rem; color:var(--muted)}
.sidebar a.navlink:hover{background:var(--surface-2); color:var(--ink)}
.sidebar a.navlink.active{background:var(--brand-soft); color:var(--brand-ink); font-weight:600}
.sidebar a.navlink.active i{color:var(--brand)}
.sidebar .side-foot{margin-top:auto; padding:14px 16px; border-top:1px solid var(--border)}

.main{flex:1; min-width:0; display:flex; flex-direction:column}

.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--border); padding:0 28px; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:20;
}
.topbar .page-title{font-size:1.12rem; font-weight:700; margin:0; color:var(--ink)}
.topbar .crumb{font-size:.78rem; color:var(--muted); font-weight:500}

.user-chip{display:flex; align-items:center; gap:10px}
.user-chip .avatar{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-ink); font-weight:700; font-size:.8rem;
}
.user-chip .u-name{font-weight:600; font-size:.85rem; line-height:1.1}
.user-chip .u-role{font-size:.7rem; color:var(--muted); text-transform:capitalize}

.content{padding:26px 28px 60px; max-width:1400px; width:100%}
.page-lead{color:var(--ink-2); margin:-6px 0 20px; font-size:.92rem}

/* ---------- cards ------------------------------------------------------- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.card-header{
  background:transparent; border-bottom:1px solid var(--border); font-weight:700;
  padding:15px 18px; font-family:var(--font-display); font-size:.95rem;
}
.card-body{padding:18px}
.card.p-3{padding:18px!important}
.card.p-4{padding:22px!important}
.card h6{font-weight:700; font-size:.9rem}

/* section title helper */
.sect-title{font-family:var(--font-display); font-weight:700; font-size:.95rem; margin:0 0 14px}

/* ---------- stat cards ------------------------------------------------- */
.stat{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:17px 18px 16px 20px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  height:100%;
}
.stat::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--accent,var(--brand));
}
.stat .lbl{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:700;
}
.stat h3{
  font-family:var(--font-display); font-weight:800; font-size:1.55rem;
  margin:.28rem 0 0; color:var(--ink); letter-spacing:-.02em; line-height:1.1;
}
.stat .trend{font-size:.74rem; font-weight:600; margin-top:4px}
.stat .trend.up{color:var(--green)} .stat .trend.down{color:var(--red)}

/* mini metric tile (dashboard) */
.metric{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; text-align:center; box-shadow:var(--shadow-sm);
  transition:transform .15s, box-shadow .15s; display:block; height:100%;
}
.metric:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.metric .ico{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  margin:0 auto 9px; background:var(--brand-soft); color:var(--brand-ink); font-size:.95rem;
}
.metric .num{font-family:var(--font-display); font-weight:800; font-size:1.3rem; color:var(--ink)}
.metric .cap{font-size:.76rem; color:var(--muted); font-weight:500}

/* ---------- tables --------------------------------------------------- */
.table{color:var(--ink); margin:0; --bs-table-bg:transparent}
.table > :not(caption) > * > *{padding:.72rem .8rem; border-bottom-color:var(--border)}
.table thead th, .table > thead{
  background:var(--surface-2)!important; color:var(--muted); font-weight:700;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border);
}
.table-hover > tbody > tr:hover > *{background:var(--surface-2)}
.table-light, .table .table-light{--bs-table-bg:var(--surface-2)}
.table-warning, .table > tbody > tr.table-warning > *{background:var(--amber-soft)!important}
.table-responsive{border-radius:var(--radius-sm)}

/* ---------- buttons ------------------------------------------------- */
.btn{
  font-weight:600; border-radius:10px; padding:.5rem .95rem; font-size:.86rem;
  transition:transform .12s, box-shadow .15s, background .15s, border-color .15s;
  border:1px solid transparent;
}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:.34rem .6rem; font-size:.8rem; border-radius:8px}
.btn-lg{padding:.7rem 1.3rem; font-size:.95rem; border-radius:12px}

.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 6px 16px rgba(255,87,34,.28)}
.btn-primary:hover{background:var(--brand-ink); border-color:var(--brand-ink); color:#fff; box-shadow:0 8px 22px rgba(255,87,34,.36)}
.btn-dark{background:var(--ink); border-color:var(--ink); color:#fff}
.btn-dark:hover{background:#000; border-color:#000; color:#fff}
.btn-secondary{background:#eceef1; border-color:#eceef1; color:var(--ink-2)}
.btn-secondary:hover{background:#e2e5e9; color:var(--ink)}
.btn-outline-primary{border-color:var(--border-2); color:var(--ink-2); background:var(--surface)}
.btn-outline-primary:hover{border-color:var(--brand); color:var(--brand-ink); background:var(--brand-soft)}
.btn-outline-secondary{border-color:var(--border-2); color:var(--ink-2); background:var(--surface)}
.btn-outline-secondary:hover{background:var(--surface-2); color:var(--ink); border-color:var(--border-2)}
.btn-outline-danger{border-color:var(--border-2); color:var(--red); background:var(--surface)}
.btn-outline-danger:hover{background:var(--red-soft); border-color:var(--red); color:var(--red)}
.btn-outline-success{border-color:var(--border-2); color:var(--green); background:var(--surface)}
.btn-outline-success:hover{background:var(--green-soft); border-color:var(--green); color:var(--green)}
.btn-success{background:var(--green); border-color:var(--green); color:#fff}
.btn-danger{background:var(--red); border-color:var(--red); color:#fff}
.btn-warning{background:var(--amber); border-color:var(--amber); color:#fff}
.btn-info{background:var(--blue); border-color:var(--blue); color:#fff}
.btn-link{color:var(--brand-ink)}
.btn-light{background:var(--surface-2); border-color:var(--border)}

/* icon-only square buttons in tables */
td .btn-sm.btn-outline-primary, td .btn-sm.btn-outline-danger,
td .btn-sm.btn-outline-secondary, td .btn-sm.btn-outline-success{
  width:30px; height:30px; padding:0; display:inline-grid; place-items:center;
}

/* ---------- badges ------------------------------------------------- */
.badge{
  font-weight:600; font-size:.72rem; padding:.36em .7em; border-radius:999px;
  letter-spacing:.01em;
}
.badge.bg-success{background:var(--green-soft)!important; color:#0a7c47!important}
.badge.bg-danger{background:var(--red-soft)!important; color:#c0362c!important}
.badge.bg-warning{background:var(--amber-soft)!important; color:#b45f06!important}
.badge.bg-info{background:var(--blue-soft)!important; color:#2563eb!important}
.badge.bg-primary{background:var(--brand-soft)!important; color:var(--brand-ink)!important}
.badge.bg-secondary{background:#eef0f3!important; color:var(--ink-2)!important}
.badge.bg-dark{background:var(--ink)!important; color:#fff!important}
.badge.bg-light{background:var(--surface-2)!important; color:var(--ink-2)!important; border:1px solid var(--border)}
.badge.text-dark{color:inherit!important}

/* ---------- forms ------------------------------------------------- */
.form-label{font-weight:600; font-size:.8rem; color:var(--ink-2); margin-bottom:.3rem}
.form-control, .form-select{
  border:1px solid var(--border-2); border-radius:10px; padding:.5rem .75rem;
  font-size:.88rem; color:var(--ink); background:var(--surface);
}
.form-control:focus, .form-select:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); outline:none;
}
.form-control-sm, .form-select-sm{padding:.34rem .55rem; font-size:.82rem; border-radius:8px}
.form-control-lg{padding:.65rem .9rem; font-size:.95rem; border-radius:11px}
.input-group-text{background:var(--surface-2); border-color:var(--border-2); border-radius:10px; color:var(--muted)}
.form-check-input:checked{background-color:var(--brand); border-color:var(--brand)}
.form-check-input:focus{box-shadow:0 0 0 3px var(--brand-soft); border-color:var(--brand)}
.form-switch .form-check-input{width:2.4em; height:1.25em}

/* ---------- alerts / flash ------------------------------------------ */
.flash-wrap{position:fixed; top:76px; right:22px; z-index:1080; width:340px; max-width:calc(100vw - 40px)}
.alert{
  border:1px solid var(--border); border-radius:12px; padding:12px 14px; font-size:.86rem;
  box-shadow:var(--shadow); display:flex; gap:10px; align-items:flex-start; background:var(--surface);
  animation:flashIn .25s ease;
}
@keyframes flashIn{from{opacity:0; transform:translateX(20px)}to{opacity:1; transform:none}}
.alert .fi{width:20px; flex-shrink:0; text-align:center; margin-top:1px}
.alert-success{border-left:3px solid var(--green)} .alert-success .fi{color:var(--green)}
.alert-danger{border-left:3px solid var(--red)}    .alert-danger .fi{color:var(--red)}
.alert-warning{border-left:3px solid var(--amber)} .alert-warning .fi{color:var(--amber)}
.alert-info{border-left:3px solid var(--blue)}     .alert-info .fi{color:var(--blue)}
.alert .btn-close{margin-left:auto; font-size:.7rem}

/* inline alert (inside forms/cards) */
.card .alert, form .alert{position:static; box-shadow:none; width:auto}

/* ---------- progress --------------------------------------------- */
.progress{background:var(--surface-2); border-radius:999px; height:7px}
.progress-bar{background:var(--brand); border-radius:999px}
.progress-bar.bg-primary{background:var(--brand)!important}
.progress-bar.bg-danger{background:var(--red)!important}

/* ---------- modals ---------------------------------------------- */
.modal-content{border:none; border-radius:18px; box-shadow:var(--shadow-lg); overflow:hidden}
.modal-header{border-bottom:1px solid var(--border); padding:16px 20px; background:var(--surface)}
.modal-header .modal-title{font-family:var(--font-display); font-weight:700; font-size:1rem}
.modal-body{padding:20px}
.modal-footer{border-top:1px solid var(--border); padding:14px 20px; background:var(--surface-2)}
.modal-backdrop.show{opacity:.55}
.modal-content{background:#fff}

/* ---------- list groups --------------------------------------- */
.list-group-item{border-color:var(--border); font-size:.87rem; padding:.6rem .85rem}

/* ---------- misc ---------------------------------------------- */
.text-muted{color:var(--muted)!important}
hr{border-color:var(--border); opacity:1}
.chip-filter{display:inline-flex; gap:6px; flex-wrap:wrap}
canvas{max-width:100%}

/* login */
.auth-wrap{min-height:100vh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(1200px 500px at 15% 0%, #fff2ec, transparent),
             radial-gradient(1000px 500px at 100% 100%, #ffe9e0, transparent), var(--bg)}
.auth-card{width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:36px 34px; box-shadow:var(--shadow-lg)}
.auth-card .mark{width:56px; height:56px; border-radius:16px; display:grid; place-items:center; margin:0 auto 16px;
  background:linear-gradient(135deg,var(--brand),#ff8a4c); color:#fff; font-size:1.4rem; box-shadow:0 12px 26px rgba(255,87,34,.4)}

/* responsive */
@media (max-width:992px){
  :root{--sidebar-w:72px}
  .sidebar .brand span, .sidebar a.navlink span, .sidebar .nav-group-title, .sidebar .side-foot span{display:none}
  .sidebar .brand{justify-content:center; padding:18px 0}
  .sidebar a.navlink{justify-content:center; padding:11px 0}
  .content{padding:18px 14px 50px}
  .topbar{padding:0 16px}
  .user-chip .u-name, .user-chip .u-role, .topbar .crumb{display:none}
}