/* ============================================================
   Anglocita — Premium UI Design System (v2)
   Shared by Customer Dashboard + Admin Panel.
   Preserves brand: rose/maroon #A84052, Playfair + Inter.
   Load AFTER style.css so it refines global components.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap');

:root {
    /* Brand */
    --ui-brand: #A84052;
    --ui-brand-600: #8c3444;
    --ui-brand-700: #742b39;
    --ui-brand-50: #fcf5f6;
    --ui-brand-100: #f7e9ec;
    --ui-brand-200: #eccdd3;
    --ui-brand-300: #dca7b1;
    --ui-ink-deep: #3d1620;   /* dark maroon (admin sidebar) */

    /* Neutrals */
    --ui-bg: #f6f4f5;
    --ui-surface: #ffffff;
    --ui-surface-2: #fbfafb;
    --ui-border: #eceaec;
    --ui-border-strong: #e2dde1;
    --ui-text: #221f26;
    --ui-text-soft: #5b5560;
    --ui-muted: #948e99;

    /* Status */
    --ui-ok: #0f9d6b;   --ui-ok-bg: #e7f7f0;
    --ui-warn: #c67a1e; --ui-warn-bg: #fbf1e2;
    --ui-info: #3b6fd4; --ui-info-bg: #e8eefb;
    --ui-danger: #d3495b; --ui-danger-bg: #fbeaec;

    /* Shape */
    --ui-r-sm: 10px;
    --ui-r: 14px;
    --ui-r-lg: 20px;
    --ui-r-pill: 999px;

    /* Elevation (soft) */
    --ui-sh-xs: 0 1px 2px rgba(24, 18, 22, 0.05);
    --ui-sh-sm: 0 1px 3px rgba(24, 18, 22, 0.06), 0 1px 2px rgba(24, 18, 22, 0.04);
    --ui-sh-md: 0 6px 20px rgba(24, 18, 22, 0.07);
    --ui-sh-lg: 0 18px 50px rgba(24, 18, 22, 0.12);
    --ui-ring: 0 0 0 3px rgba(168, 64, 82, 0.14);
}

/* ---------- Typography helpers ---------- */
.ui-display { font-family: 'Playfair Display', Georgia, serif; letter-spacing: -0.01em; }
.ui-sans { font-family: 'Inter', system-ui, sans-serif; }
.ui-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ui-brand); }
.ui-h1 { font-family: 'Playfair Display', serif; font-size: clamp(24px, 3vw, 30px); font-weight: 600; color: var(--ui-text); letter-spacing: -0.01em; }
.ui-section-title { font-size: 15px; font-weight: 700; color: var(--ui-text); letter-spacing: -0.01em; display: flex; align-items: center; gap: 9px; }
.ui-section-title .ic { color: var(--ui-brand); font-size: 14px; }

/* ---------- Cards ---------- */
.ui-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-r);
    box-shadow: var(--ui-sh-sm);
}
.ui-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--ui-border);
}
.ui-card-body { padding: 20px; }
.ui-card-hover { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease; }
.ui-card-hover:hover { transform: translateY(-3px); box-shadow: var(--ui-sh-md); border-color: var(--ui-border-strong); }
.ui-link { color: var(--ui-brand); font-size: 12.5px; font-weight: 600; transition: color .15s; }
.ui-link:hover { color: var(--ui-brand-700); }

/* ---------- Stat / metric card ---------- */
.ui-stat {
    position: relative; background: var(--ui-surface);
    border: 1px solid var(--ui-border); border-radius: var(--ui-r);
    padding: 18px 18px 16px; box-shadow: var(--ui-sh-sm);
    transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.ui-stat:hover { transform: translateY(-3px); box-shadow: var(--ui-sh-md); }
.ui-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ui-stat-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.ui-stat-ic.brand { background: var(--ui-brand-100); color: var(--ui-brand); }
.ui-stat-ic.ok { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-stat-ic.info { background: var(--ui-info-bg); color: var(--ui-info); }
.ui-stat-ic.warn { background: var(--ui-warn-bg); color: var(--ui-warn); }
.ui-stat-ic.violet { background: #efe9fb; color: #6d4bd0; }
.ui-stat-val { font-size: 27px; font-weight: 800; color: var(--ui-text); letter-spacing: -0.02em; line-height: 1.05; }
.ui-stat-label { font-size: 12.5px; color: var(--ui-muted); margin-top: 4px; }

/* ---------- Trend chip ---------- */
.ui-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--ui-r-pill); }
.ui-trend.up { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-trend.down { background: var(--ui-danger-bg); color: var(--ui-danger); }
.ui-trend.flat { background: #f0eef0; color: var(--ui-muted); }

/* ---------- Buttons ---------- */
.ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1;
    padding: 11px 18px; border-radius: var(--ui-r-pill); border: 1px solid transparent;
    cursor: pointer; transition: all .2s cubic-bezier(.2,.7,.2,1); white-space: nowrap;
}
.ui-btn:disabled { opacity: .55; pointer-events: none; }
.ui-btn-primary { background: var(--ui-brand); color: #fff; box-shadow: 0 6px 16px rgba(168,64,82,.22); }
.ui-btn-primary:hover { background: var(--ui-brand-600); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(168,64,82,.3); }
.ui-btn-soft { background: var(--ui-brand-100); color: var(--ui-brand-700); }
.ui-btn-soft:hover { background: var(--ui-brand-200); }
.ui-btn-ghost { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border-strong); }
.ui-btn-ghost:hover { border-color: var(--ui-brand); color: var(--ui-brand); background: var(--ui-brand-50); }
.ui-btn-sm { padding: 8px 13px; font-size: 12.5px; }
.ui-icon-btn {
    width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--ui-surface); border: 1px solid var(--ui-border); color: var(--ui-text-soft); transition: all .18s ease; position: relative;
}
.ui-icon-btn:hover { color: var(--ui-brand); border-color: var(--ui-brand-200); background: var(--ui-brand-50); }
.ui-icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--ui-brand); border: 2px solid var(--ui-surface); }

/* ---------- Inputs / search ---------- */
.ui-input {
    width: 100%; font-family: inherit; font-size: 14px; color: var(--ui-text);
    padding: 11px 14px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r-sm);
    background: var(--ui-surface); transition: border-color .18s, box-shadow .18s;
}
.ui-input::placeholder { color: var(--ui-muted); }
.ui-input:focus { outline: none; border-color: var(--ui-brand); box-shadow: var(--ui-ring); }
.ui-label { display: block; font-size: 13px; font-weight: 500; color: var(--ui-text-soft); margin-bottom: 6px; }
.ui-search { position: relative; display: flex; align-items: center; }
/* Icon is centred vertically regardless of the container's display mode.
   Absolutely-positioned children ignore the flex `align-items`, and some
   callers add `sm:block` on the wrapper, so an explicit top/transform is the
   only reliable way to keep the glyph on the field's centre line. */
.ui-search i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--ui-muted); font-size: 13px; line-height: 0; pointer-events: none;
}
.ui-search input {
    width: 100%; height: 40px; font-size: 13.5px; color: var(--ui-text);
    padding: 0 14px 0 36px; line-height: normal;
    border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r-pill); background: var(--ui-surface-2); transition: all .18s;
}
.ui-search input:focus { outline: none; border-color: var(--ui-brand); box-shadow: var(--ui-ring); background: #fff; }

/* ---------- Badges / chips ---------- */
.ui-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--ui-r-pill); }
.ui-chip .dot { width: 6px; height: 6px; border-radius: 50%; }
.ui-chip-neutral { background: #f1eff1; color: var(--ui-text-soft); }
.ui-chip-brand { background: var(--ui-brand-100); color: var(--ui-brand-700); }

/* Premium status badge (works with global .badge-* + statusBadge()) */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px 4px 9px; border-radius: var(--ui-r-pill);
    font-size: 11.5px; font-weight: 600; line-height: 1.4; border: 1px solid transparent;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.badge-pending { background: var(--ui-warn-bg); color: #a4671a; }
.badge-paid { background: var(--ui-info-bg); color: #2f5bb0; }
.badge-in_progress { background: #eef0fe; color: #4a49b8; }
.badge-review { background: var(--ui-brand-100); color: var(--ui-brand-700); }
.badge-done { background: var(--ui-ok-bg); color: #0b7a54; }
.badge-cancelled { background: var(--ui-danger-bg); color: #b23446; }
/* Buglist statuses. `in_progress` and `done` are shared with orders above. */
.badge-open { background: var(--ui-danger-bg); color: #b23446; }
.badge-need_test { background: var(--ui-warn-bg); color: #a4671a; }
/* Bug severity */
.badge-low { background: #f1eff1; color: #6b6470; }
.badge-normal { background: var(--ui-info-bg); color: #2f5bb0; }
.badge-high { background: var(--ui-warn-bg); color: #a4671a; }
.badge-critical { background: #fde7ea; color: #a01e33; }

/* ---------- Avatar ---------- */
.ui-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 11px; font-weight: 700; font-size: 14px;
    background: linear-gradient(135deg, var(--ui-brand-300), var(--ui-brand)); color: #fff;
}
.ui-avatar.sm { width: 30px; height: 30px; border-radius: 9px; font-size: 12px; }

/* ---------- Alerts ---------- */
.ui-alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--ui-r-sm); font-size: 13.5px; align-items: flex-start; border: 1px solid; }
.ui-alert i { margin-top: 1px; }
.ui-alert-info { background: var(--ui-info-bg); border-color: #cfdcf7; color: #2f5bb0; }
.ui-alert-ok { background: var(--ui-ok-bg); border-color: #c3ecdc; color: #0b7a54; }
.ui-alert-warn { background: var(--ui-warn-bg); border-color: #f2ddba; color: #a4671a; }

/* ---------- Segmented tabs ---------- */
.ui-segment { display: inline-flex; gap: 3px; padding: 4px; background: #f1eff1; border-radius: var(--ui-r-pill); }
.ui-segment button { padding: 7px 15px; border-radius: var(--ui-r-pill); font-size: 13px; font-weight: 600; color: var(--ui-text-soft); transition: all .18s; }
.ui-segment button.active { background: #fff; color: var(--ui-brand); box-shadow: var(--ui-sh-xs); }

/* ---------- Progress ---------- */
.ui-progress { height: 8px; background: #eeecee; border-radius: var(--ui-r-pill); overflow: hidden; }
.ui-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ui-brand-300), var(--ui-brand)); transition: width .6s cubic-bezier(.2,.7,.2,1); }

/* ---------- Table ---------- */
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table thead th {
    text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--ui-muted); padding: 12px 20px; background: var(--ui-surface-2); border-bottom: 1px solid var(--ui-border);
}
.ui-table tbody td { padding: 15px 20px; font-size: 13.5px; color: var(--ui-text-soft); border-bottom: 1px solid var(--ui-border); }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr { transition: background .12s ease; }
.ui-table tbody tr:hover { background: var(--ui-brand-50); }

/* ---------- Empty state ---------- */
.ui-empty { text-align: center; padding: 48px 20px; }
.ui-empty-ic {
    width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center; font-size: 26px;
    background: var(--ui-brand-50); color: var(--ui-brand-300);
}
.ui-empty-title { font-size: 15px; font-weight: 600; color: var(--ui-text); }
.ui-empty-sub { font-size: 13px; color: var(--ui-muted); margin-top: 4px; }

/* ---------- Skeleton loaders ---------- */
.ui-skel { position: relative; overflow: hidden; background: #eeecef; border-radius: 8px; }
.ui-skel::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
    animation: ui-shimmer 1.4s infinite;
}
@keyframes ui-shimmer { 100% { transform: translateX(100%); } }
.ui-skel-line { height: 12px; border-radius: 6px; }
.ui-skel-card { height: 108px; border-radius: var(--ui-r); }

/* ---------- Spinner refinement ---------- */
.loader { border: 3px solid var(--ui-brand-100); border-top-color: var(--ui-brand); border-radius: 50%; width: 2rem; height: 2rem; animation: spin .8s linear infinite; }

/* ---------- Toast refinement ---------- */
.toast {
    border-radius: 12px; box-shadow: var(--ui-sh-lg); font-weight: 500; font-size: 13.5px;
    padding: 13px 18px; display: flex; align-items: center; gap: 10px;
}

/* ============================================================
   Customer Dashboard shell
   ------------------------------------------------------------
   Shell-nya sekarang template Sneat, lihat
   resources/views/layouts/dashboard.blade.php. Yang lama sudah
   dihapus dari sini karena markup-nya tidak ada lagi:
     .cust-sidebar .cust-brand .cust-nav .cust-nav-label
     .cust-nav-item .cust-user .cust-logout .cust-main
     .cust-topbar .cust-hamburger .cust-backdrop
     + media query 1024px
   Penggantinya di shell Sneat:
     sidebar   -> aside#layout-menu.layout-menu + .menu-item/.menu-link
     topbar    -> nav.layout-navbar.navbar-detached + .navbar-page-title
     blok user -> dropdown avatar di navbar
     hamburger -> .layout-menu-toggle + .layout-overlay (menu.js)
   Semuanya ditata di cms-sneat.css seksi 4.

   Dua class ini SENGAJA dipertahankan:
     .cust-body     penanda halaman dashboard. Tipografi & latarnya
                    ditimpa cms-sneat.css yang dimuat setelah file ini.
     .cust-content  kontainer konten. Padding-nya dilepas karena
                    `container-xxl container-p-y` milik Sneat yang
                    mengatur, tapi batas lebar 1180px dari desain lama
                    dipertahankan di cms-sneat.css seksi 4.
   ============================================================ */
.cust-body { font-family: 'Inter', system-ui, sans-serif; background: var(--ui-bg); color: var(--ui-text); -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; }

/* Hero banner (dashboard welcome) */
.ui-hero {
    position: relative; overflow: hidden; border-radius: var(--ui-r-lg);
    background: linear-gradient(120deg, var(--ui-brand-700), var(--ui-brand) 55%, #c2687a);
    color: #fff; padding: 30px 32px;
}
.ui-hero::after {
    content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
}
.ui-hero-title { font-family: 'Playfair Display', serif; font-size: clamp(22px, 3vw, 28px); font-weight: 600; }
.ui-hero-sub { color: rgba(255,255,255,.82); font-size: 14px; margin-top: 6px; max-width: 460px; }

/* list row */
.ui-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; transition: background .14s; }
.ui-row:hover { background: var(--ui-brand-50); }
.ui-row + .ui-row { border-top: 1px solid var(--ui-border); }
.ui-thumb { width: 46px; height: 46px; border-radius: 12px; background: var(--ui-brand-50); color: var(--ui-brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }