@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root{
	--bg1:#0b1220;
	--bg2:#0e1a2b;
	--brand:#5bbcff;
	--brand-2:#7c5cff;
	--text:#e6ecf3;
	--muted:#9fb0c5;
	--card:rgba(255,255,255,0.06);
	--border:rgba(255,255,255,0.14);
	--shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* Light theme */
[data-theme="light"]{
	--bg1:#f4f7fb;
	--bg2:#eaf0f8;
	--text:#0f172a;
	--muted:#4b5563;
	--card:rgba(255,255,255,0.7);
	--border:rgba(0,0,0,0.08);
	--shadow: 0 10px 30px rgba(0,0,0,0.08);
}

html, body{height:100%;}
body{
	margin:0;
	font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color:var(--text);
	background: radial-gradient(1200px 800px at -10% -10%, rgba(124,92,255,0.18), transparent 60%),
							radial-gradient(800px 600px at 110% 10%, rgba(91,188,255,0.18), transparent 60%),
							linear-gradient(135deg, var(--bg1), var(--bg2));
}

.navbar{ background: rgba(10,15,25,0.55)!important; backdrop-filter: blur(10px); border-bottom:1px solid var(--border); }
.navbar .btn-nav{ border:1px solid rgba(255,255,255,0.18); color:var(--text); background:transparent; padding:6px 10px; border-radius:10px; font-weight:500; }
.navbar .btn-nav:hover{ background: rgba(255,255,255,0.08); }
.navbar .btn-nav.active{ background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; color:#0b1020; }
.navbar .navbar-brand strong{ letter-spacing: .2px; }
.navbar .navbar-brand, .navbar a{ color: var(--text); }

/* Light mode: make navbar a blue gradient with white text for contrast */
[data-theme="light"] .navbar{
	background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
	border-bottom: 1px solid rgba(255,255,255,0.35);
	color: #ffffff;
}
[data-theme="light"] .navbar .navbar-brand,
[data-theme="light"] .navbar a{ color:#ffffff; }
[data-theme="light"] .navbar .btn-nav{
	color:#ffffff; border-color: rgba(255,255,255,0.55);
}
[data-theme="light"] .navbar .btn-nav:hover{
	background: rgba(255,255,255,0.12);
}
[data-theme="light"] .navbar .btn-outline-light{
	color:#ffffff; border-color: rgba(255,255,255,0.6);
}
[data-theme="light"] .navbar .btn-outline-light:hover{
	background: rgba(255,255,255,0.12);
}

.glass{background:var(--card); border-radius:16px; border:1px solid var(--border); color:var(--text); box-shadow:var(--shadow);}
.card{background:var(--card); border:1px solid var(--border);}

/* Modal: make content less transparent for readability */
.modal-content.glass{
	background: rgba(15,20,30,0.92); /* darker, more opaque */
	border:1px solid var(--border);
	color: var(--text);
	box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
[data-theme="light"] .modal-content.glass{
	background: rgba(255,255,255,0.98);
}
/* Stronger backdrop to prevent background text showing through */
.modal-backdrop{ background: rgba(0,0,0,0.8); }
.modal-backdrop.show{ opacity: .55; }

/* Stats grid */
.stats-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.stat-card{ padding:14px; border-radius:14px; border:1px solid var(--border); background: rgba(255,255,255,0.04); box-shadow: var(--shadow); }
.stat-card .label{ font-size:12px; color: var(--muted); margin-bottom:6px; }
.stat-card .value{ font-size:22px; font-weight:700; letter-spacing:.3px; }
.stat-card.green{ background: linear-gradient(180deg, rgba(34,197,94,0.12), transparent); }
.stat-card.red{ background: linear-gradient(180deg, rgba(239,68,68,0.12), transparent); }
.stat-card.amber{ background: linear-gradient(180deg, rgba(245,158,11,0.14), transparent); }

/* Chart card */
.chart-card{ border:1px solid var(--border); border-radius:16px; background: rgba(255,255,255,0.04); padding:12px; box-shadow: var(--shadow); overflow:hidden; }
.chart-card:hover{ box-shadow: 0 8px 28px rgba(0,0,0,0.18); transition: box-shadow .2s ease; }
.chart-card canvas{ display:block; width:100%; }

/* Mini stats in Ringkasan */
.mini-stats{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.mini-card{ border:1px solid var(--border); border-radius:12px; padding:10px 12px; background: rgba(255,255,255,0.05); }
.mini-card .mini-label{ font-size:11px; color: var(--muted); margin-bottom:4px; }
.mini-card .mini-value{ font-size:18px; font-weight:700; }
.mini-card.blue{ background: linear-gradient(180deg, rgba(59,130,246,0.14), transparent); }
.mini-card.brand{ background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 35%, transparent), transparent); }
.mini-card.green{ background: linear-gradient(180deg, rgba(34,197,94,0.14), transparent); }
.mini-card.red{ background: linear-gradient(180deg, rgba(239,68,68,0.14), transparent); }

/* Buttons */
.btn-primary{ background: linear-gradient(135deg, var(--brand), var(--brand-2)); border:0; }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-outline-secondary{ border-color: var(--border); color:var(--text); background:transparent; }
.btn-outline-secondary:hover{ background:rgba(255,255,255,0.07); }
.btn-outline-light{ border-color: var(--border); color: var(--text); background: transparent; }
.btn-outline-light:hover{ background: rgba(255,255,255,0.08); }
/* Improve contrast in light mode */
[data-theme="light"] .btn-outline-secondary:hover{ background: rgba(0,0,0,0.06); }
[data-theme="light"] .btn-outline-light:hover{ background: rgba(0,0,0,0.06); }

/* Tables */
.table{ --bs-table-bg: transparent; --bs-table-color: var(--text); }
.table thead th{ background: rgba(255,255,255,0.06); border-color: var(--border); color: var(--text); }
.table td, .table th{ border-color: rgba(255,255,255,0.12)!important; }
.table-hover tbody tr:hover{ background: rgba(255,255,255,0.05); }
.table-sm> :not(caption)>*>*{ padding:.4rem .5rem; }
/* Keep action buttons inline and prevent vertical wrap */
.table .text-nowrap{ white-space: nowrap; }
.table-theme tr:nth-child(even){ background: rgba(255,255,255,0.03); }
.table-theme .text-secondary{ color: var(--muted) !important; }

/* Fancy status rows (orders list) */
tbody tr.row-status-confirmed{
	background: linear-gradient(90deg, color-mix(in oklab, var(--brand) 26%, transparent), color-mix(in oklab, var(--brand-2) 18%, transparent));
	box-shadow: inset 0 0 0 1px rgba(124,92,255,0.16), 0 6px 22px rgba(91,188,255,0.12);
	color: var(--text);
}
tbody tr.row-status-completed{
	background: linear-gradient(90deg, rgba(34,197,94,0.22), rgba(21,128,61,0.16));
	box-shadow: inset 0 0 0 1px rgba(34,197,94,0.22), 0 6px 22px rgba(34,197,94,0.16);
	color: var(--text);
}
tbody tr.row-status-cancelled{
	background: linear-gradient(90deg, rgba(239,68,68,0.22), rgba(220,38,38,0.16));
	box-shadow: inset 0 0 0 1px rgba(239,68,68,0.22), 0 6px 22px rgba(239,68,68,0.14);
	color: var(--text);
}
tbody tr.row-status-confirmed a,
tbody tr.row-status-completed a,
tbody tr.row-status-cancelled a{ color: inherit; }

/* Legend chips under the table */
.legend-chip{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; margin-right:8px; border:1px solid rgba(255,255,255,0.18); }
.legend-chip.chip-blue{ background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0b1020; border-color: rgba(0,0,0,0.08); }
.legend-chip.chip-green{ background: linear-gradient(135deg, #22c55e, #16a34a); color:#06130b; border-color: rgba(0,0,0,0.08); }
.legend-chip.chip-red{ background: linear-gradient(135deg, #ef4444, #dc2626); color:#1a0909; border-color: rgba(0,0,0,0.08); }

/* Lists */
.list-group-item{ background-color: transparent; color: var(--text); border-color: var(--border); }

/* Calendar */
#calendar{min-height:320px;border:1px dashed rgba(255,255,255,0.18);border-radius:14px;padding:12px}
/* Year view */
.calendar-year-wrapper{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:14px; margin-top:14px; }
.calendar-year-month{ border:1px solid var(--border); border-radius:12px; padding:8px; background: rgba(255,255,255,0.04); }
.calendar-year-month h6{ margin:0 0 6px; font-size:13px; font-weight:600; letter-spacing:.3px; }
.calendar-year-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:4px; }
.calendar-year-grid .dow{ font-size:10px; text-align:center; color:var(--muted); }
.calendar-year-grid .d{ position:relative; font-size:11px; min-height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.calendar-year-grid .d.has{ background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0b1020; font-weight:600; }
.calendar-year-grid .d.muted{ opacity:.45; }
.calendar-year-grid .d.target{ outline:2px solid var(--brand); outline-offset:2px; }

/* Calendar grid */
.calendar-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.calendar-header .cal-title{ font-weight:600; letter-spacing:.3px; }
.calendar-header .cal-nav{ display:flex; gap:6px; }
.calendar-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; margin-top:10px; }
.calendar-dow{ font-size:12px; color:var(--muted); text-align:center; }
.calendar-cell{ min-height:98px; background: rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:12px; padding:10px 8px 6px; position:relative; overflow:hidden; }
.calendar-cell.muted{ opacity:.55; }
.calendar-cell .date-badge{ position:absolute; top:6px; right:8px; font-size:11px; color:var(--muted); }
.calendar-cell.cal-focus{ outline:2px solid var(--brand); outline-offset:2px; box-shadow:0 0 0 3px rgba(91,188,255,0.35); }
.event-pin{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; font-size:11px; line-height:1.15; padding:6px 8px; border-radius:8px; margin-top:4px; background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 65%, transparent), color-mix(in oklab, var(--brand-2) 65%, transparent)); color:#f1f6ff; border:1px solid rgba(0,0,0,0.05); cursor:pointer; min-width:0; width:100%; box-sizing:border-box; }
.event-pin.success{ background: linear-gradient(135deg, #22c55e, #16a34a); color:#06130b; }
.event-pin.danger{ background: linear-gradient(135deg, #ef4444, #dc2626); color:#1a0909; }
.event-pin .t{ display:inline-block; font-weight:800; font-variant-numeric: tabular-nums; font-size:12px; background: rgba(255,255,255,0.85); color:#0b1020; padding:2px 6px; border-radius:999px; line-height:1; }
.event-pin .s{ opacity:.98; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; min-width:0; width:100%; max-width:100%; }

/* Responsive tweaks */
@media (max-width: 575px){
	.calendar-grid{ gap:6px; }
	.calendar-cell{ min-height:84px; padding:8px 6px 6px; }
	.event-pin{ font-size:10px; padding:4px 5px; gap:2px; }
	.event-pin .t{ font-size:10px; padding:1px 4px; }
	/* Allow up to two lines for name on small screens */
	.event-pin .s{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient: vertical; overflow:hidden; max-height: 2.4em; }
}
@media (min-width: 992px){
	/* Slightly larger on desktop to balance space */
	.calendar-cell{ min-height:110px; }
	.event-pin{ font-size:11.5px; padding:6px 8px; }
}
@media (max-width: 767px){
	.stats-grid{ grid-template-columns: 1fr; }
}

/* Links */
a{color:var(--brand)}
a.link-light{ color: #cfe7ff; }
/* Order title link follows theme text for contrast on colored rows */
.order-title-link{ color: inherit; font-weight:600; text-decoration: none; }
.order-title-link:hover{ text-decoration: underline; }

/* Sidebar (hamburger) */
.nav-toggle{ display:none; }
@media (max-width: 991px){
	.nav-toggle{ display:inline-flex; align-items:center; justify-content:center; height:36px; width:40px; border-radius:8px; border:1px solid var(--border); background:rgba(255,255,255,0.06); color:var(--text); }
	/* Mobile: show only hamburger (hide nav buttons, search, logout) – keep theme toggle visible */
	.navbar .btn-nav,
	.navbar form,
	.navbar .btn-danger { display:none !important; }
	.navbar .ms-auto{ gap:6px; }
}
.sidebar{ position:fixed; top:0; left:0; height:100vh; width:260px; background:rgba(13,18,30,0.88); border-right:1px solid var(--border); backdrop-filter: blur(12px); transform: translateX(-110%); transition: transform .25s ease; z-index:1040; padding:16px; color:#e6ecf3; }
.sidebar.open{ transform: translateX(0); }
.sidebar .menu a{ display:block; padding:10px 12px; color:#e6ecf3; border-radius:10px; text-decoration:none; border:1px solid transparent; }
.sidebar .menu a:hover{ background:rgba(255,255,255,0.07); border-color:var(--border); }
.sidebar .menu a.active{ background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0b1020; border-color: transparent; }
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.4); backdrop-filter: blur(2px); opacity:0; visibility:hidden; transition:.2s ease; z-index:1035; }
.overlay.show{ opacity:1; visibility:visible; }

/* Footer / bottombar */
.bottombar{ margin-top:24px; padding:14px 0; text-align:center; color:var(--muted); font-size:13px; opacity:0.9; }
.bottombar a{ color:var(--brand); text-decoration:none; }

/* Forms */
.form-control, .form-select{ background: rgba(255,255,255,0.06); border:1px solid var(--border); color:var(--text); }
.form-control:focus, .form-select:focus{ background: rgba(255,255,255,0.10); box-shadow:none; border-color: rgba(124,92,255,0.6); color:var(--text); }
::placeholder{ color: color-mix(in oklab, var(--text) 60%, transparent); opacity: 0.85; }
/* Input group text contrast (orders search) */
.input-group-text{ background: rgba(255,255,255,0.06); color: var(--text); border:1px solid var(--border); }
[data-theme="light"] .input-group-text{ background: rgba(0,0,0,0.04); color:#111827; border:1px solid var(--border); }
/* Dark mode (default when no data-theme=light on <html>): keep input text white */
html:not([data-theme="light"]) .form-control,
html:not([data-theme="light"]) input,
html:not([data-theme="light"]) textarea,
html:not([data-theme="light"]) select{ color:#ffffff !important; caret-color:#ffffff; }
html:not([data-theme="light"]) .form-control:focus,
html:not([data-theme="light"]) input:focus,
html:not([data-theme="light"]) textarea:focus,
html:not([data-theme="light"]) select:focus{ color:#ffffff !important; }
/* Dark dropdown options readable */
html:not([data-theme="light"]) select option{ background-color:#0f1a2b; color:#e6ecf3; }
/* Autofill fix for Chrome per theme */
html:not([data-theme="light"]) input:-webkit-autofill,
html:not([data-theme="light"]) input:-webkit-autofill:focus{ -webkit-text-fill-color:#ffffff; transition: background-color 9999s ease-in-out 0s; }
[data-theme="light"] input:-webkit-autofill,
[data-theme="light"] input:-webkit-autofill:focus{ -webkit-text-fill-color:#111827; transition: background-color 9999s ease-in-out 0s; }
/* Light mode explicit colors for inputs */
[data-theme="light"] .form-control,
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="time"],
[data-theme="light"] textarea,
[data-theme="light"] select,
[data-theme="light"] input{ color:#111827 !important; background: rgba(0,0,0,0.04); caret-color:#111827; }
[data-theme="light"] .form-control:focus,
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus{ color:#111827 !important; background: rgba(0,0,0,0.06); }
[data-theme="light"] ::placeholder{ color: rgba(17,24,39,0.55); }
/* Explicit placeholder color for dark mode */
html:not([data-theme="light"]) ::placeholder{ color: rgba(255,255,255,0.75); }
/* Disabled/read-only legibility */
.form-control:disabled, .form-control[readonly], .form-select:disabled{ opacity:.95; }
html:not([data-theme="light"]) .form-control:disabled,
html:not([data-theme="light"]) .form-control[readonly],
html:not([data-theme="light"]) .form-select:disabled{ color:#f1f6ff !important; background: rgba(255,255,255,0.10); }
[data-theme="light"] .form-control:disabled,
[data-theme="light"] .form-control[readonly],
[data-theme="light"] .form-select:disabled{ color:#1f2937 !important; background: rgba(0,0,0,0.03); }

/* Badges */
.badge{ border:1px solid rgba(255,255,255,0.15); }

/* Search box */
.search-box{ max-width: 320px; }

/* Features grid (login) */
.features-grid{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:10px; }
.feature-item{ display:flex; gap:10px; align-items:flex-start; padding:10px; border:1px solid var(--border); border-radius:12px; background: rgba(255,255,255,0.04); }
.feature-item .fi-icon{ font-size:18px; line-height:1; width:22px; text-align:center; }
.feature-item .fi-text{ font-size:13px; color: var(--text); }
@media (max-width: 520px){ .features-grid{ grid-template-columns: 1fr; } }