/* ClipForge admin shell — Blade + Bootstrap + jQuery + DevExtreme (jQuery).
   Visual layer only: modern admin look + 100% mobile-responsive shell.
   Class names are unchanged so no view/JS behaviour is affected. */
:root {
    --cf-bg: #eef1f8;
    --cf-surface: #ffffff;
    --cf-border: #e6e9f2;
    --cf-text: #1f2733;
    --cf-text-soft: #5b6472;
    --cf-sidebar: #161c2b;
    --cf-sidebar-2: #1d2433;
    --cf-sidebar-text: #aeb7ca;
    --cf-sidebar-hover: #2a3346;
    --cf-accent: #4c6fff;
    --cf-accent-2: #7a5bff;
    --cf-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
    --cf-shadow-lg: 0 24px 60px rgba(16, 24, 40, .22);
    --cf-radius: 16px;
    --cf-sidebar-w: 248px;
    --cf-topbar-h: 60px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--cf-bg);
    color: var(--cf-text);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

/* ── Shell ────────────────────────────────────────────────────────────── */
.cf-shell { display: flex; min-height: 100vh; }

.cf-sidebar {
    width: var(--cf-sidebar-w);
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--cf-sidebar) 0%, var(--cf-sidebar-2) 100%);
    color: var(--cf-sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 1045;
}
.cf-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 20px 22px; font-weight: 700; font-size: 19px; color: #fff;
    letter-spacing: .2px;
    position: sticky; top: 0;
    background: linear-gradient(180deg, var(--cf-sidebar) 60%, rgba(22,28,43,0));
}
.cf-brand .mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px; font-size: 14px;
    background: linear-gradient(135deg, var(--cf-accent), var(--cf-accent-2));
    color: #fff; box-shadow: 0 6px 16px rgba(76, 111, 255, .45);
}
.cf-nav { display: flex; flex-direction: column; padding: 8px 10px 18px; gap: 3px; }
.cf-nav a {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 11px 13px; border-radius: 10px;
    color: var(--cf-sidebar-text); text-decoration: none;
    font-size: 14px; font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.cf-nav a:hover { background: var(--cf-sidebar-hover); color: #fff; }
.cf-nav a.active {
    background: linear-gradient(135deg, var(--cf-accent), var(--cf-accent-2));
    color: #fff; box-shadow: 0 8px 20px rgba(76, 111, 255, .35);
}
.cf-nav a.active .icon { filter: none; }
.cf-nav a.disabled { opacity: .5; pointer-events: none; }
.cf-nav .soon {
    margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
    background: #39435a; color: #cfd6e6; padding: 2px 7px; border-radius: 999px;
}
.cf-nav .icon { width: 22px; text-align: center; font-size: 16px; flex-shrink: 0; }

/* ── Main column ──────────────────────────────────────────────────────── */
.cf-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cf-topbar {
    min-height: var(--cf-topbar-h);
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--cf-border);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 0 18px;
    position: sticky; top: 0; z-index: 40;
}
.cf-topbar .title { font-weight: 600; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-topbar .left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cf-topbar .right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.cf-topbar .user { font-size: 14px; color: var(--cf-text-soft); }

/* Hamburger — hidden on desktop, shown on mobile via media query */
.cf-hamburger {
    display: none;
    align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    border: 1px solid var(--cf-border); border-radius: 10px;
    background: #fff; cursor: pointer; padding: 0;
}
.cf-hamburger span, .cf-hamburger span::before, .cf-hamburger span::after {
    content: ''; display: block; position: relative;
    width: 18px; height: 2px; border-radius: 2px; background: var(--cf-text);
    transition: transform .2s ease;
}
.cf-hamburger span::before { position: absolute; top: -6px; }
.cf-hamburger span::after  { position: absolute; top: 6px; }

.cf-content { flex: 1; padding: 24px; overflow: auto; }

/* Backdrop for the mobile drawer */
.cf-backdrop {
    display: none;
    position: fixed; inset: 0; z-index: 1040;
    background: rgba(15, 20, 32, .5);
    opacity: 0; transition: opacity .25s ease;
}

/* ── Cards / page heads ───────────────────────────────────────────────── */
.cf-card {
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius);
    padding: 24px;
    box-shadow: var(--cf-shadow);
    max-width: 100%;
}
.cf-page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.cf-page-head h1 { font-size: 22px; margin: 0; font-weight: 700; }

/* status chips reused in grids (cellTemplate) */
.cf-chip { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; }
.cf-chip-gray   { background: #eceef3; color: #5b6472; }
.cf-chip-blue   { background: #e3ecff; color: #2b50d6; }
.cf-chip-amber  { background: #fff3e0; color: #e65100; }
.cf-chip-green  { background: #e8f5e8; color: #2e7d32; }
.cf-chip-red    { background: #ffebee; color: #c62828; }
.cf-chip-purple { background: #efe6ff; color: #6a35cc; }

/* Keep DevExtreme grids from forcing horizontal page overflow on small screens */
.cf-card .dx-widget,
.cf-card .dx-datagrid,
.cf-card .dx-scheduler { max-width: 100%; }

/* ── Auth (login / reset) ─────────────────────────────────────────────── */
.cf-auth-shell {
    min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background:
        radial-gradient(1200px 600px at 100% 0%, rgba(122, 91, 255, .35), transparent 60%),
        radial-gradient(1000px 500px at 0% 100%, rgba(76, 111, 255, .35), transparent 55%),
        linear-gradient(135deg, #161c2b 0%, #2a3346 100%);
}
.cf-auth-card {
    width: 100%; max-width: 380px;
    background: #fff; border-radius: 18px; padding: 32px;
    box-shadow: var(--cf-shadow-lg);
}
.cf-auth-brand { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.cf-auth-brand .mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px; font-size: 15px;
    background: linear-gradient(135deg, var(--cf-accent), var(--cf-accent-2));
    color: #fff; box-shadow: 0 8px 18px rgba(76, 111, 255, .45);
}
.cf-auth-sub { text-align: center; color: var(--cf-text-soft); font-size: 14px; margin-bottom: 22px; }

/* ── Bootstrap control polish (visual only) ───────────────────────────── */
.btn { border-radius: 10px; font-weight: 500; }
.btn-primary { background: var(--cf-accent); border-color: var(--cf-accent); }
.btn-primary:hover, .btn-primary:focus { background: #3b5cf0; border-color: #3b5cf0; }
.form-control, .form-select { border-radius: 10px; padding: .55rem .8rem; border-color: #d8dde8; }
.form-control:focus, .form-select:focus { border-color: var(--cf-accent); box-shadow: 0 0 0 .2rem rgba(76, 111, 255, .18); }
.alert { border-radius: 12px; }

/* ── Responsive: tablet & phone ───────────────────────────────────────── */
@media (max-width: 991.98px) {
    .cf-sidebar {
        position: fixed; left: 0; top: 0;
        height: 100vh; height: 100dvh;
        transform: translateX(-100%);
        transition: transform .26s cubic-bezier(.4, 0, .2, 1);
        box-shadow: var(--cf-shadow-lg);
    }
    body.cf-nav-open .cf-sidebar { transform: translateX(0); }
    body.cf-nav-open .cf-backdrop { display: block; opacity: 1; }
    body.cf-nav-open { overflow: hidden; }
    .cf-hamburger { display: inline-flex; }
}

@media (max-width: 640px) {
    .cf-content { padding: 14px; }
    .cf-card { padding: 16px; border-radius: 14px; }
    .cf-page-head { margin-bottom: 14px; }
    .cf-page-head h1 { font-size: 19px; }
    .cf-topbar .user { display: none; }
    .cf-topbar { padding: 0 12px; }
    .cf-auth-card { padding: 24px; }
}