/*
 * KomputerHub Professional UI System
 * Visual layer only: no database logic.
 * Design direction: ASMS + Quakco cleanliness with KomputerHub red/slate identity.
 */
:root {
    --kh-red: #dc2626;
    --kh-red-dark: #b91c1c;
    --kh-red-soft: #fef2f2;
    --kh-ink: #0f172a;
    --kh-muted: #64748b;
    --kh-bg: #f8fafc;
    --kh-card: #ffffff;
    --kh-line: #e2e8f0;
    --kh-line-soft: #f1f5f9;
    --kh-radius: 18px;
    --kh-radius-sm: 12px;
    --kh-shadow: 0 8px 28px rgba(15, 23, 42, .06);
    --kh-shadow-lg: 0 24px 70px rgba(15, 23, 42, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--kh-bg); }
body {
    margin: 0;
    color: var(--kh-ink);
    background: var(--kh-bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
::selection { background: rgba(220,38,38,.14); color: var(--kh-ink); }
a { text-underline-offset: 3px; }
hr { border-color: var(--kh-line); }
img { image-rendering: auto; }

/* Workspace */
.kh-main {
    min-height: 100vh;
    background:
        radial-gradient(circle at 100% 0%, rgba(220,38,38,.035), transparent 30rem),
        var(--kh-bg);
}
.kh-page-header {
    border-bottom: 1px solid rgba(226,232,240,.92) !important;
    background: rgba(255,255,255,.95) !important;
    box-shadow: 0 1px 0 rgba(15,23,42,.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.kh-workspace {
    width: min(100%, 1580px);
    margin: 0 auto;
    padding: 1.25rem;
}
.kh-eyebrow,
.kh-section-kicker {
    display: block;
    color: var(--kh-red);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.kh-page-title {
    margin: .2rem 0 0;
    color: var(--kh-ink);
    font-size: clamp(1.55rem, 2vw, 2rem);
    font-weight: 900;
    line-height: 1.15;
}
.kh-page-subtitle { margin: .35rem 0 0; color: var(--kh-muted); font-size: .9rem; }

/* Panels / cards */
.kh-panel,
section[class*="bg-white"][class*="rounded"],
div[class*="bg-white"][class*="rounded"][class*="shadow"] {
    background: var(--kh-card);
    border: 1px solid var(--kh-line) !important;
    box-shadow: var(--kh-shadow) !important;
}
.kh-panel { border-radius: var(--kh-radius); }
.kh-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid var(--kh-line);
    background: linear-gradient(180deg,#fff 0%,#fcfdff 100%);
}
.kh-panel-header h2,
.kh-modal-header h3 { margin: .12rem 0 0; color: var(--kh-ink); font-size: 1.08rem; font-weight: 900; }
.kh-panel-header p,
.kh-modal-header p { margin: .25rem 0 0; color: var(--kh-muted); font-size: .82rem; }
.kh-stat-card {
    min-height: 128px;
    padding: 1.15rem 1.2rem;
    border: 1px solid var(--kh-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(15,23,42,.045);
}
.kh-stat-label { color: #94a3b8; font-size: .68rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.kh-stat-card strong { display: block; margin-top: .4rem; font-size: 1.75rem; font-weight: 900; color: var(--kh-ink); }
.kh-stat-card small { display: block; margin-top: .2rem; color: var(--kh-muted); font-size: .78rem; }
.kh-detail-card { padding: 1rem; border: 1px solid var(--kh-line); border-radius: 14px; background: #fff; }
.kh-detail-card > span { color:#94a3b8; font-size:.65rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.kh-detail-card > strong { display:block; margin-top:.35rem; color:var(--kh-ink); font-size:.92rem; font-weight:900; word-break:break-word; }
.kh-detail-card > small { display:block; margin-top:.25rem; color:var(--kh-muted); font-size:.75rem; }

/* Forms */
.kh-label,
label { color:#334155; font-weight:800; }
.kh-label { display:block; margin-bottom:.4rem; font-size:.72rem; letter-spacing:.02em; }
.kh-help { margin:.3rem 0 0; color:#94a3b8; font-size:.7rem; }
.kh-input,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
    width: 100%;
    border: 1px solid #cbd5e1 !important;
    border-radius: var(--kh-radius-sm) !important;
    background: #fff;
    color: var(--kh-ink);
    box-shadow: 0 1px 2px rgba(15,23,42,.025);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select { min-height: 44px; }
textarea { min-height: 96px; resize: vertical; }
.kh-input { min-height: 44px; padding: .68rem .82rem; font-size: .88rem; }
input::placeholder, textarea::placeholder { color:#94a3b8; }
.kh-input:focus,
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    outline:none !important;
    border-color:#ef4444 !important;
    box-shadow:0 0 0 4px rgba(220,38,38,.085) !important;
}
input:disabled, select:disabled, textarea:disabled { cursor:not-allowed; background:#f8fafc !important; color:#94a3b8 !important; }

/* Buttons */
button, a { -webkit-tap-highlight-color: transparent; }
button,
a[class*="bg-red-"],a[class*="bg-blue-"],a[class*="bg-emerald-"],a[class*="bg-slate-"],a[class*="bg-amber-"],a[class*="bg-orange-"] {
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease, background-color .14s ease, border-color .14s ease !important;
}
button:not(:disabled):hover,
a[class*="bg-red-"]:hover,a[class*="bg-blue-"]:hover,a[class*="bg-emerald-"]:hover,a[class*="bg-slate-"]:hover,a[class*="bg-amber-"]:hover,a[class*="bg-orange-"]:hover { transform: translateY(-1px); }
button:focus-visible,a:focus-visible { outline:3px solid rgba(220,38,38,.16) !important; outline-offset:2px; }
button:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }
.kh-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.48rem;
    min-height:42px;
    padding:.62rem .95rem;
    border:1px solid transparent;
    border-radius:12px;
    font-size:.8rem;
    font-weight:900;
    line-height:1;
    text-decoration:none;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.kh-btn-sm { min-height:36px; padding:.5rem .7rem; font-size:.73rem; }
.kh-btn-primary { background:var(--kh-red); color:#fff; }
.kh-btn-primary:hover { background:var(--kh-red-dark); box-shadow:0 8px 18px rgba(220,38,38,.18); }
.kh-btn-secondary { background:#fff; border-color:#cbd5e1; color:#334155; }
.kh-btn-secondary:hover { background:#f8fafc; border-color:#94a3b8; }
.kh-btn-danger { background:#b91c1c; color:#fff; }
.kh-btn-danger-soft { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.kh-icon-btn,.kh-icon-button {
    min-width:40px; min-height:40px; display:inline-flex !important; align-items:center; justify-content:center;
    border-radius:12px !important; box-shadow:0 1px 2px rgba(15,23,42,.05);
}
.kh-icon-button { width:40px; height:40px; border:1px solid var(--kh-line); background:#fff; color:#475569; }

/* Tables */
table,.kh-table { width:100%; border-collapse:separate !important; border-spacing:0 !important; color:#1e293b; }
table thead th,.kh-table thead th {
    padding:.78rem 1rem !important;
    background:#f8fafc;
    color:#64748b;
    border-top:0;
    border-bottom:1px solid var(--kh-line) !important;
    font-size:.65rem;
    font-weight:900;
    letter-spacing:.07em;
    line-height:1.35;
    text-transform:uppercase;
    white-space:nowrap;
}
table tbody td,.kh-table tbody td {
    padding:.82rem 1rem !important;
    border-bottom:1px solid #edf1f5 !important;
    vertical-align:middle;
    font-size:.82rem;
}
table tbody tr { transition:background-color .12s ease; }
table tbody tr:hover { background:#fffafa !important; }
table tbody tr:last-child td { border-bottom-color:transparent !important; }
.kh-cell-muted { color:#94a3b8; font-size:.7rem; margin-top:.16rem; }
.overflow-x-auto,.overflow-auto,.kh-table-scroll { scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
.overflow-x-auto::-webkit-scrollbar,.overflow-auto::-webkit-scrollbar,.kh-table-scroll::-webkit-scrollbar { height:8px; width:8px; }
.overflow-x-auto::-webkit-scrollbar-thumb,.overflow-auto::-webkit-scrollbar-thumb,.kh-table-scroll::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:999px; }

/* Badges / notices */
.kh-badge, span[class*="rounded-full"] { font-weight:900; letter-spacing:.01em; }
.kh-badge { display:inline-flex; align-items:center; gap:.3rem; padding:.36rem .58rem; border-radius:999px; font-size:.64rem; line-height:1; }
.kh-alert { display:flex; align-items:flex-start; gap:.7rem; padding:.9rem 1rem; border:1px solid; border-radius:14px; font-size:.82rem; font-weight:800; }
.kh-alert-success { color:#047857; background:#ecfdf5; border-color:#a7f3d0; }
.kh-alert-danger { color:#b91c1c; background:#fef2f2; border-color:#fecaca; }
.kh-info-strip { display:flex; align-items:flex-start; gap:.65rem; padding:.85rem 1rem; border:1px solid #dbeafe; border-radius:13px; background:#eff6ff; color:#1e40af; font-size:.78rem; line-height:1.5; }
.kh-empty { min-height:160px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; color:#94a3b8; }
.kh-empty i { font-size:1.6rem; margin-bottom:.6rem; color:#cbd5e1; }
.kh-empty strong { color:#475569; font-weight:900; }
.kh-empty span { margin-top:.25rem; max-width:38rem; font-size:.78rem; }

/* Sidebar polish */
.kh-sidebar { border-right:1px solid rgba(255,255,255,.055); }
.kh-sidebar-link { border-radius:13px !important; }
.kh-sidebar-link:not(.kh-red-gradient):hover { background:rgba(255,255,255,.085) !important; }
.kh-sidebar .kh-logo-img { filter:drop-shadow(0 4px 10px rgba(15,23,42,.12)); }
.kh-sidebar-toggle { border-radius:13px !important; border:1px solid rgba(255,255,255,.18); }

/* Modals */
.kh-modal-backdrop {
    position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
    padding:1rem; background:rgba(2,6,23,.6); backdrop-filter:blur(8px); overflow-y:auto;
}
.kh-modal-backdrop.hidden { display:none; }
.kh-modal-card { width:100%; max-height:calc(100vh - 2rem); overflow:auto; background:#fff; border:1px solid var(--kh-line); border-radius:20px; box-shadow:var(--kh-shadow-lg); }
.kh-modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.1rem 1.25rem; border-bottom:1px solid var(--kh-line); }
[role="dialog"] > div[class*="bg-white"],div[class*="fixed"][class*="inset-0"] div[class*="bg-white"][class*="rounded"] { border:1px solid var(--kh-line); box-shadow:var(--kh-shadow-lg) !important; }

/* Reports / receipt screens */
.kh-report-shell { background:#fff; border:1px solid var(--kh-line); border-radius:18px; overflow:hidden; box-shadow:var(--kh-shadow); }
.kh-report-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; padding:1rem 1.15rem; border-bottom:1px solid var(--kh-line); background:#fff; }
.kh-receipt-card { max-width:820px; margin:0 auto; background:#fff; border:1px solid #dbe2ea; border-radius:18px; box-shadow:0 12px 36px rgba(15,23,42,.08); }

@media (min-width: 768px) { .kh-workspace { padding:1.5rem; } }
@media (min-width: 1280px) { .kh-workspace { padding:1.75rem 2rem; } }
@media (max-width: 1023px) { .kh-main { width:100% !important; } .kh-page-header { min-height:68px; } }
@media (max-width: 767px) {
    .kh-workspace { padding:1rem; }
    .kh-main > div[class*="p-6"],.kh-main > div[class*="p-8"] { padding-left:1rem !important; padding-right:1rem !important; }
    section[class*="bg-white"][class*="rounded"],.kh-panel { border-radius:15px !important; }
    table,.kh-table { font-size:12px; }
    table thead th,table tbody td,.kh-table thead th,.kh-table tbody td { padding-left:.72rem !important; padding-right:.72rem !important; }
    .kh-panel-header { padding:1rem; }
    .kh-btn { min-height:42px; }
}
@media (max-width:480px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea,.kh-input { font-size:16px; }
}

@media print {
    @page { margin:12mm; }
    body,.kh-main { background:#fff !important; color:#000 !important; }
    #khSidebar,#khSidebarToggle,#khMobileOverlay,.no-print,.kh-page-header { display:none !important; }
    .kh-main { margin-left:0 !important; width:100% !important; }
    .kh-workspace { width:100%; max-width:none; padding:0; }
    section[class*="bg-white"][class*="rounded"],div[class*="bg-white"][class*="rounded"][class*="shadow"],.kh-panel,.kh-report-shell,.kh-receipt-card { box-shadow:none !important; border-color:#d1d5db !important; }
    table thead th { background:#f3f4f6 !important; color:#111827 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    table tbody td { color:#111827 !important; }
    a { color:#000 !important; text-decoration:none !important; }
}