/* =========================================================
   KC Time — Minimal UI theme
   โหลดหลัง Tailwind CDN ในทุกหน้า เพื่อปรับโทนให้สะอาด มินิมอล
   ใช้ selector ขึ้นต้นด้วย html เพื่อให้ชนะ utility ของ Tailwind
   ========================================================= */

:root {
    --ui-bg: #f6f7f9;
    --ui-surface: #ffffff;
    --ui-surface-2: #f9fafb;
    --ui-border: #e5e7eb;
    --ui-border-strong: #d1d5db;
    --ui-text: #111827;
    --ui-muted: #6b7280;
    --ui-primary: #2563eb;
    --ui-primary-hover: #1d4ed8;
    --ui-primary-soft: #eff6ff;
    --ui-radius: 14px;
    --ui-radius-lg: 18px;
    --ui-shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
    --ui-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 3px rgba(17, 24, 39, 0.04);
    --ui-shadow-md: 0 4px 16px -6px rgba(17, 24, 39, 0.10);
    --ui-font: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ui-font-num: 'Inter', 'Sarabun', system-ui, sans-serif;
}

/* ---------- Base ---------- */
html body {
    font-family: var(--ui-font) !important;
    background: var(--ui-bg) !important;
    color: var(--ui-text);
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}
html input, html select, html textarea, html button {
    font-family: var(--ui-font) !important;
}
html .font-mono {
    font-family: var(--ui-font-num) !important;
    font-feature-settings: 'tnum' 1;
}
html .uppercase { text-transform: none; }
html .tracking-wider, html .tracking-widest { letter-spacing: 0.01em; }

/* ---------- Surfaces / cards ---------- */
html .glass-card,
html .glass-panel {
    background: var(--ui-surface) !important;
    backdrop-filter: none !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}
/* คงเส้นสีด้านซ้ายของการ์ดสถิติไว้ แต่บางลง */
html .border-l-4 { border-left-width: 3px !important; }

html .rounded-3xl { border-radius: var(--ui-radius-lg); }
html .rounded-2xl { border-radius: var(--ui-radius); }

/* ---------- Shadows: เบาลงทั้งหมด ---------- */
html .shadow-2xs,
html .shadow-xs { box-shadow: var(--ui-shadow-xs) !important; }
html .shadow-sm,
html .shadow { box-shadow: var(--ui-shadow-sm) !important; }
html .shadow-md,
html .shadow-lg,
html .shadow-card { box-shadow: var(--ui-shadow-md) !important; }
html .shadow-xl,
html .shadow-2xl { box-shadow: 0 12px 32px -12px rgba(17, 24, 39, 0.18) !important; }
html .shadow-inner { box-shadow: none !important; }
html .drop-shadow-sm { filter: none; }

/* hover ยกการ์ดเบาๆ */
html .stat-hover:hover,
html .hover-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--ui-shadow-md) !important;
}

/* ---------- Buttons: gradient -> สีเดียว ---------- */
html a[class*="bg-gradient-to-"],
html button[class*="bg-gradient-to-"] {
    background-image: none !important;
    background-color: var(--ui-primary) !important;
    color: #fff !important;
    box-shadow: var(--ui-shadow-xs) !important;
}
html a[class*="bg-gradient-to-"]:hover,
html button[class*="bg-gradient-to-"]:hover {
    background-color: var(--ui-primary-hover) !important;
}
/* คงความหมายของสีปุ่ม (แดง = ลงเวลากลับ/ลบ, เหลือง = เตือน, เขียว = ยืนยัน) */
html a[class*="from-rose-"], html button[class*="from-rose-"],
html a[class*="from-red-"], html button[class*="from-red-"] { background-color: #e11d48 !important; }
html a[class*="from-rose-"]:hover, html button[class*="from-rose-"]:hover,
html a[class*="from-red-"]:hover, html button[class*="from-red-"]:hover { background-color: #be123c !important; }
html a[class*="from-amber-"], html button[class*="from-amber-"],
html a[class*="from-orange-"], html button[class*="from-orange-"] { background-color: #d97706 !important; }
html a[class*="from-amber-"]:hover, html button[class*="from-amber-"]:hover,
html a[class*="from-orange-"]:hover, html button[class*="from-orange-"]:hover { background-color: #b45309 !important; }
html a[class*="from-emerald-"], html button[class*="from-emerald-"],
html a[class*="from-green-"], html button[class*="from-green-"],
html a[class*="from-teal-"], html button[class*="from-teal-"] { background-color: #059669 !important; }
html a[class*="from-emerald-"]:hover, html button[class*="from-emerald-"]:hover,
html a[class*="from-green-"]:hover, html button[class*="from-green-"]:hover,
html a[class*="from-teal-"]:hover, html button[class*="from-teal-"]:hover { background-color: #047857 !important; }

html .font-sans { font-family: var(--ui-font) !important; }

html a[class*="hover:-translate-y"]:hover,
html button[class*="hover:-translate-y"]:hover { transform: none; }

/* ---------- Forms ---------- */
html input[type="text"],
html input[type="password"],
html input[type="number"],
html input[type="email"],
html input[type="date"],
html input[type="time"],
html input[type="search"],
html select,
html textarea {
    border-color: var(--ui-border);
}
html input:focus,
html select:focus,
html textarea:focus {
    outline: none;
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

/* ---------- Tables ---------- */
html table thead {
    background: var(--ui-surface-2);
}
html table thead th {
    color: var(--ui-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--ui-border);
}
html table tbody tr { transition: background-color .15s ease; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 999px;
    border: 2px solid var(--ui-bg);
}
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ---------- Admin light sidebar ---------- */
.ui-topbar {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--ui-border);
}
.ui-sidebar {
    background: var(--ui-surface);
    border-right: 1px solid var(--ui-border);
}
.ui-nav-label {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    padding: 18px 12px 6px;
}
.ui-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    color: #4b5563;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}
.ui-nav-item i { width: 18px; text-align: center; color: #9ca3af; font-size: 13px; }
.ui-nav-item:hover { background: #f3f4f6; color: var(--ui-text); }
.ui-nav-item:hover i { color: #6b7280; }
.ui-nav-item.is-active {
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    font-weight: 600;
}
.ui-nav-item.is-active i { color: var(--ui-primary); }

/* ---------- Print: ไม่ให้ธีมไปกระทบงานพิมพ์ ---------- */
@media print {
    html body { background: #fff !important; }
    html .glass-card, html .glass-panel { box-shadow: none !important; }
}