/* CloudBite Admin — premium design system. All styling lives here (no inline CSS). */
:root {
    --cka-bg: #f4f6fb;
    --cka-surface: #ffffff;
    --cka-sidebar: #11141c;
    --cka-sidebar-2: #1a1f2b;
    --cka-primary: #ff5a3c;
    --cka-primary-dark: #e63e22;
    --cka-primary-soft: #fff0ec;
    --cka-accent: #11c08b;
    --cka-text: #1d2433;
    --cka-muted: #7a8499;
    --cka-border: #e7eaf2;
    --cka-warning: #f5a623;
    --cka-danger: #ef4351;
    --cka-info: #3b82f6;
    --cka-radius: 14px;
    --cka-radius-sm: 9px;
    --cka-shadow: 0 1px 3px rgba(20, 28, 56, .06), 0 8px 24px rgba(20, 28, 56, .05);
    --cka-shadow-lg: 0 12px 40px rgba(20, 28, 56, .12);
    --cka-sidebar-w: 256px;
    --cka-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--cka-font);
    background: var(--cka-bg);
    color: var(--cka-text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; }

/* ---------- Layout ---------- */
.cka-shell { display: flex; min-height: 100vh; }
.cka-sidebar {
    width: var(--cka-sidebar-w);
    background: var(--cka-sidebar);
    color: #c9d0de;
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    padding: 22px 16px;
    z-index: 30;
}
.cka-main {
    margin-left: var(--cka-sidebar-w);
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.cka-content { padding: 26px 30px 60px; max-width: 1280px; width: 100%; }

/* ---------- Brand + nav ---------- */
.cka-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 22px; }
.cka-brand-logo {
    width: 38px; height: 38px; border-radius: 11px;
    background: linear-gradient(135deg, var(--cka-primary), #ff8a3c);
    display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px;
    box-shadow: 0 6px 16px rgba(255, 90, 60, .4);
}
.cka-brand-name { color: #fff; font-weight: 800; font-size: 18px; }
.cka-brand-sub { color: #6b7488; font-size: 11px; font-weight: 500; }

.cka-nav { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; flex: 1; }
.cka-nav-label { color: #5a6275; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 16px 10px 7px; }
.cka-nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px;
    color: #aeb6c6; font-weight: 500; transition: all .15s ease;
}
.cka-nav-item:hover { background: var(--cka-sidebar-2); color: #fff; }
.cka-nav-item.is-active { background: linear-gradient(100deg, var(--cka-primary), var(--cka-primary-dark)); color: #fff; box-shadow: 0 6px 16px rgba(255,90,60,.35); }
.cka-nav-ico { width: 19px; height: 19px; flex: none; opacity: .95; }
.cka-nav-badge { margin-left: auto; background: var(--cka-primary); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 20px; }
.cka-nav-item.is-active .cka-nav-badge { background: rgba(255,255,255,.25); }

.cka-sidebar-foot { border-top: 1px solid #232838; padding-top: 14px; margin-top: 8px; }
.cka-admin-card { display: flex; align-items: center; gap: 11px; padding: 6px 8px; }
.cka-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--cka-sidebar-2); display: grid; place-items: center; color: #fff; font-weight: 700; }
.cka-admin-name { color: #fff; font-weight: 600; font-size: 13px; }
.cka-admin-role { color: #6b7488; font-size: 11px; }

/* ---------- Topbar ---------- */
.cka-topbar {
    height: 66px; background: var(--cka-surface);
    border-bottom: 1px solid var(--cka-border);
    display: flex; align-items: center; gap: 16px;
    padding: 0 30px; position: sticky; top: 0; z-index: 20;
}
.cka-page-title { font-size: 19px; font-weight: 800; }
.cka-breadcrumb { color: var(--cka-muted); font-size: 12.5px; }
.cka-topbar-spacer { flex: 1; }

/* ---------- Buttons ---------- */
.cka-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 16px; border-radius: var(--cka-radius-sm);
    font-weight: 600; font-size: 13.5px; cursor: pointer;
    border: 1px solid transparent; background: var(--cka-surface);
    color: var(--cka-text); transition: all .15s ease; white-space: nowrap;
}
.cka-btn:hover { transform: translateY(-1px); }
.cka-btn-primary { background: var(--cka-primary); color: #fff; box-shadow: 0 6px 16px rgba(255,90,60,.3); }
.cka-btn-primary:hover { background: var(--cka-primary-dark); }
.cka-btn-ghost { background: var(--cka-surface); border-color: var(--cka-border); color: var(--cka-text); }
.cka-btn-ghost:hover { border-color: #c9d0e0; }
.cka-btn-danger { background: #fff; border-color: #f6c6cb; color: var(--cka-danger); }
.cka-btn-danger:hover { background: var(--cka-danger); color: #fff; }
.cka-btn-sm { padding: 6px 12px; font-size: 12.5px; }
.cka-btn-block { width: 100%; }

/* ---------- Cards ---------- */
.cka-card { background: var(--cka-surface); border-radius: var(--cka-radius); box-shadow: var(--cka-shadow); border: 1px solid var(--cka-border); }
.cka-card-pad { padding: 22px; }
.cka-card-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--cka-border); }
.cka-card-head h3 { font-size: 15.5px; }
.cka-card-head .cka-topbar-spacer { flex: 1; }

/* ---------- Stat cards ---------- */
.cka-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-bottom: 22px; }
.cka-stat { background: var(--cka-surface); border-radius: var(--cka-radius); padding: 20px; box-shadow: var(--cka-shadow); border: 1px solid var(--cka-border); position: relative; overflow: hidden; }
.cka-stat-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; }
.cka-stat-ico svg { width: 22px; height: 22px; }
.cka-stat-ico.is-primary { background: var(--cka-primary-soft); color: var(--cka-primary); }
.cka-stat-ico.is-green { background: #e7f8f1; color: var(--cka-accent); }
.cka-stat-ico.is-blue { background: #e8f0fe; color: var(--cka-info); }
.cka-stat-ico.is-amber { background: #fef3e0; color: var(--cka-warning); }
.cka-stat-value { font-size: 27px; font-weight: 800; letter-spacing: -.02em; }
.cka-stat-label { color: var(--cka-muted); font-size: 12.5px; font-weight: 500; margin-top: 2px; }

/* ---------- Grid helpers ---------- */
.cka-grid { display: grid; gap: 20px; }
.cka-grid-2 { grid-template-columns: 1.6fr 1fr; }
.cka-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cka-grid-form { grid-template-columns: repeat(2, 1fr); }
.cka-span-2 { grid-column: span 2; }

/* ---------- Tables ---------- */
.cka-table-wrap { overflow-x: auto; }
.cka-table { width: 100%; border-collapse: collapse; }
.cka-table th { text-align: left; font-size: 11px; font-weight: 700; color: var(--cka-muted); text-transform: uppercase; letter-spacing: .04em; padding: 13px 18px; border-bottom: 1px solid var(--cka-border); }
.cka-table td { padding: 14px 18px; border-bottom: 1px solid var(--cka-border); vertical-align: middle; }
.cka-table tbody tr:last-child td { border-bottom: none; }
.cka-table tbody tr { transition: background .12s; }
.cka-table tbody tr:hover { background: #fafbfe; }
.cka-row-link { cursor: pointer; }
.cka-table-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.cka-cell-strong { font-weight: 600; }
.cka-cell-mut { color: var(--cka-muted); font-size: 12.5px; }

/* ---------- Badges ---------- */
.cka-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 20px; font-size: 11.5px; font-weight: 700; }
.cka-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cka-badge.is-pending { background: #fff5e5; color: #c77700; }
.cka-badge.is-confirmed { background: #e8f0fe; color: var(--cka-info); }
.cka-badge.is-preparing { background: #f1eaff; color: #7c3aed; }
.cka-badge.is-ready { background: #e7f8f1; color: var(--cka-accent); }
.cka-badge.is-picked_up, .cka-badge.is-on_the_way { background: #e0f5ff; color: #0b86c4; }
.cka-badge.is-delivered { background: #e7f8f1; color: #0a9c6f; }
.cka-badge.is-cancelled, .cka-badge.is-rejected { background: #fdeaec; color: var(--cka-danger); }
.cka-badge.is-on { background: #e7f8f1; color: #0a9c6f; }
.cka-badge.is-off { background: #f0f1f5; color: var(--cka-muted); }
.cka-badge-veg, .cka-badge-non_veg, .cka-badge-egg { width: 15px; height: 15px; border-radius: 3px; border: 1.5px solid; display: inline-grid; place-items: center; padding: 0; }
.cka-badge-veg { border-color: #0a9c6f; }
.cka-badge-veg::before { background: #0a9c6f; width: 7px; height: 7px; }
.cka-badge-non_veg { border-color: #c0392b; }
.cka-badge-non_veg::before { background: #c0392b; width: 7px; height: 7px; }
.cka-badge-egg { border-color: #d99100; }
.cka-badge-egg::before { background: #d99100; width: 7px; height: 7px; }

/* ---------- Forms ---------- */
.cka-field { margin-bottom: 18px; }
.cka-label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 7px; }
.cka-hint { color: var(--cka-muted); font-size: 12px; margin-top: 5px; }
.cka-input, .cka-select, .cka-textarea {
    width: 100%; padding: 10px 13px; border: 1px solid var(--cka-border);
    border-radius: var(--cka-radius-sm); font: inherit; color: var(--cka-text);
    background: #fbfcfe; transition: border .15s, box-shadow .15s;
}
.cka-input:focus, .cka-select:focus, .cka-textarea:focus {
    outline: none; border-color: var(--cka-primary);
    box-shadow: 0 0 0 3px var(--cka-primary-soft); background: #fff;
}
.cka-textarea { min-height: 92px; resize: vertical; }
.cka-input-group { display: flex; align-items: center; border: 1px solid var(--cka-border); border-radius: var(--cka-radius-sm); background: #fbfcfe; overflow: hidden; }
.cka-input-group:focus-within { border-color: var(--cka-primary); box-shadow: 0 0 0 3px var(--cka-primary-soft); }
.cka-input-group .cka-prefix { padding: 0 12px; color: var(--cka-muted); font-weight: 600; }
.cka-input-group .cka-input { border: none; box-shadow: none; background: transparent; }
.cka-error { color: var(--cka-danger); font-size: 12px; margin-top: 5px; }
.cka-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.cka-switch input { display: none; }
.cka-switch-track { width: 42px; height: 24px; border-radius: 20px; background: #cdd3e0; position: relative; transition: background .18s; flex: none; }
.cka-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.cka-switch input:checked + .cka-switch-track { background: var(--cka-accent); }
.cka-switch input:checked + .cka-switch-track::after { transform: translateX(18px); }

/* ---------- Toolbar / search ---------- */
.cka-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.cka-search { position: relative; flex: 1; min-width: 220px; max-width: 380px; }
.cka-search .cka-input { padding-left: 38px; }
.cka-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--cka-muted); }
.cka-filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.cka-pill { padding: 7px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 600; background: var(--cka-surface); border: 1px solid var(--cka-border); color: var(--cka-muted); }
.cka-pill.is-active { background: var(--cka-text); color: #fff; border-color: var(--cka-text); }

/* ---------- Flash / alerts ---------- */
.cka-alert { padding: 13px 18px; border-radius: var(--cka-radius-sm); margin-bottom: 18px; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.cka-alert-success { background: #e7f8f1; color: #0a7a57; border: 1px solid #b9ead8; }
.cka-alert-error { background: #fdeaec; color: #b23842; border: 1px solid #f6c6cb; }

/* ---------- Misc ---------- */
.cka-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: #eef0f6; }
.cka-thumb-lg { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; background: #eef0f6; }
.cka-flex { display: flex; align-items: center; gap: 12px; }
.cka-flex-col { display: flex; flex-direction: column; }
.cka-gap-sm { gap: 7px; }
.cka-spacer { flex: 1; }
.cka-mt { margin-top: 20px; }
.cka-muted { color: var(--cka-muted); }
.cka-empty { text-align: center; padding: 60px 20px; color: var(--cka-muted); }
.cka-empty svg { width: 52px; height: 52px; opacity: .4; margin-bottom: 12px; }
.cka-section-title { font-size: 16px; font-weight: 800; margin: 26px 0 14px; }
.cka-page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.cka-page-head h1 { font-size: 23px; }

/* Pagination */
.cka-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.cka-pagination a, .cka-pagination span { padding: 7px 13px; border-radius: 8px; background: var(--cka-surface); border: 1px solid var(--cka-border); font-weight: 600; font-size: 13px; color: var(--cka-text); }
.cka-pagination .cka-page-active { background: var(--cka-primary); color: #fff; border-color: var(--cka-primary); }
.cka-pagination .cka-page-disabled { opacity: .45; }

/* Chart */
.cka-chart { display: flex; align-items: flex-end; gap: 14px; height: 200px; padding: 16px 4px 0; }
.cka-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.cka-bar { width: 100%; max-width: 46px; border-radius: 8px 8px 4px 4px; background: linear-gradient(to top, var(--cka-primary), #ff8a6c); min-height: 4px; transition: height .4s ease; }
.cka-bar-label { font-size: 11.5px; color: var(--cka-muted); font-weight: 600; }
.cka-bar-value { font-size: 11px; color: var(--cka-text); font-weight: 700; }
/* Bar height utilities (avoids inline styles; pick the rounded class) */
.cka-h-0{height:2%}.cka-h-5{height:5%}.cka-h-10{height:10%}.cka-h-15{height:15%}.cka-h-20{height:20%}
.cka-h-25{height:25%}.cka-h-30{height:30%}.cka-h-35{height:35%}.cka-h-40{height:40%}.cka-h-45{height:45%}
.cka-h-50{height:50%}.cka-h-55{height:55%}.cka-h-60{height:60%}.cka-h-65{height:65%}.cka-h-70{height:70%}
.cka-h-75{height:75%}.cka-h-80{height:80%}.cka-h-85{height:85%}.cka-h-90{height:90%}.cka-h-95{height:95%}.cka-h-100{height:100%}

/* Order detail */
.cka-timeline { list-style: none; margin: 0; padding: 4px 0; }
.cka-timeline li { position: relative; padding: 0 0 22px 26px; }
.cka-timeline li::before { content: ""; position: absolute; left: 5px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--cka-primary); box-shadow: 0 0 0 4px var(--cka-primary-soft); }
.cka-timeline li::after { content: ""; position: absolute; left: 10px; top: 16px; bottom: 0; width: 2px; background: var(--cka-border); }
.cka-timeline li:last-child { padding-bottom: 0; }
.cka-timeline li:last-child::after { display: none; }
.cka-timeline-status { font-weight: 700; font-size: 13.5px; }
.cka-timeline-time { color: var(--cka-muted); font-size: 12px; }
.cka-bill-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13.5px; }
.cka-bill-row.is-total { border-top: 1.5px dashed var(--cka-border); margin-top: 6px; padding-top: 13px; font-weight: 800; font-size: 16px; }
.cka-bill-row.is-discount { color: var(--cka-accent); }

/* ---------- Login ---------- */
.cka-login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.cka-login-hero { background: linear-gradient(150deg, #11141c, #20151f 60%, #3a1d18); color: #fff; padding: 60px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.cka-login-hero::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255,90,60,.35), transparent 70%); bottom: -120px; right: -80px; }
.cka-login-hero h1 { font-size: 34px; line-height: 1.2; max-width: 420px; position: relative; }
.cka-login-hero p { color: #aeb6c6; max-width: 380px; margin-top: 16px; position: relative; }
.cka-login-feats { display: flex; flex-direction: column; gap: 14px; position: relative; }
.cka-login-feat { display: flex; align-items: center; gap: 12px; color: #d4dae6; font-weight: 500; }
.cka-login-feat svg { width: 20px; height: 20px; color: var(--cka-accent); }
.cka-login-form-wrap { display: grid; place-items: center; padding: 40px; }
.cka-login-form { width: 100%; max-width: 380px; }
.cka-login-form h2 { font-size: 25px; margin-bottom: 6px; }
.cka-login-demo { background: var(--cka-primary-soft); border: 1px dashed var(--cka-primary); border-radius: var(--cka-radius-sm); padding: 12px 14px; font-size: 12.5px; color: var(--cka-primary-dark); margin-bottom: 22px; }
.cka-login-divider { display: flex; align-items: center; text-align: center; color: var(--cka-muted); font-size: 12px; font-weight: 600; margin: 24px 0 14px; }
.cka-login-divider::before, .cka-login-divider::after { content: ""; flex: 1; height: 1px; background: var(--cka-border); }
.cka-login-divider span { padding: 0 12px; }
.cka-app-note { color: var(--cka-muted); font-size: 11.5px; text-align: center; margin-top: 10px; }

@media (max-width: 1000px) {
    .cka-grid-2, .cka-grid-3, .cka-grid-form { grid-template-columns: 1fr; }
    .cka-span-2 { grid-column: auto; }
    .cka-login { grid-template-columns: 1fr; }
    .cka-login-hero { display: none; }
}
@media (max-width: 760px) {
    .cka-sidebar { transform: translateX(-100%); transition: transform .25s; }
    .cka-sidebar.is-open { transform: translateX(0); }
    .cka-main { margin-left: 0; }
    .cka-content { padding: 18px; }
    .cka-topbar { padding: 0 18px; }
}
.cka-icon-btn { background: none; border: none; cursor: pointer; padding: 7px; border-radius: 9px; color: #aeb6c6; display: grid; place-items: center; transition: all .15s; }
.cka-icon-btn:hover { background: var(--cka-sidebar-2); color: #fff; }
.cka-icon-btn svg { width: 19px; height: 19px; }
.cka-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.cka-menu-toggle svg { width: 24px; height: 24px; }
@media (max-width: 760px) { .cka-menu-toggle { display: inline-grid; } }