/* Luxe UI v3 — Ceram (Cream) Edition
   Date: 2025-08-23
   Background: Soft Cream / Elegant Light
*/
:root{
  --bg: #fdf8f3;
  --bg-soft:#f9f2ec;
  --card:#ffffff;
  --muted:#7d7d7d;
  --text:#2a2a2a;
  --brand:#c97c5d;
  --brand-2:#e1ad7c;
  --accent:#d9a066;
  --danger:#c94c4c;
  --warning:#e6a23c;
  --success:#55aa77;
  --ring: 0 0 0 3px rgba(201,124,93,.25);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.1);
}

body,html{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;}
.page-title{font-weight:800;background:linear-gradient(90deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}



/* === Imput Service — Modern Field Design (2025-08-23) === */
.service-form{ 
  background: var(--card); 
  border-radius: var(--radius); 
  box-shadow: var(--shadow);
  padding: 18px;
  border: 1px solid rgba(0,0,0,.06);
}

.service-form .form-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px 16px;
}

@media (max-width: 980px){
  .service-form .form-grid{grid-template-columns: repeat(6,1fr);}
}

.service-form .field{ 
  grid-column: span 4; 
  display: flex; 
  flex-direction: column; 
  gap: 6px;
}
.service-form .field.span-6{ grid-column: span 6; }
.service-form .field.span-8{ grid-column: span 8; }
.service-form .field.span-12{ grid-column: span 12; }

.service-form label{ 
  font-size: .78rem; 
  font-weight: 800; 
  letter-spacing: .4px; 
  text-transform: uppercase; 
  color: var(--muted);
}

.service-form input[type=text],
.service-form input[type=number],
.service-form input[type=date],
.service-form input[type=time],
.service-form input[type=email],
.service-form input[type=password],
.service-form select,
.service-form textarea{
  background: #fff;
  color: #2a2a2a;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: .8rem .95rem;
  transition: box-shadow .2s ease, border-color .2s ease, transform .08s ease;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
}

.service-form textarea{ min-height: 110px; resize: vertical; }

.service-form input:focus,
.service-form select:focus,
.service-form textarea:focus{ 
  outline: none; 
  border-color: var(--brand);
  box-shadow: var(--ring);
}

.service-form .with-prefix{
  position: relative;
}
.service-form .with-prefix .prefix{
  position: absolute; 
  left: 12px; 
  top: 50%; 
  transform: translateY(-50%);
  font-weight: 700; 
  color: #9a9a9a;
}
.service-form .with-prefix input{ padding-left: 44px; }

.service-form .status-select select{
  background: linear-gradient(180deg,#fff,#f7f7f7);
  border:1px solid #e0e0e0;
}
.service-form .status-select select:focus{
  border-color: var(--accent);
}

.service-form .actions{
  display:flex; gap:12px; align-items:center; margin-top: 6px;
}
.service-form .actions .btn{ min-width: 120px; }

/* Improve Filter section card look */
.filter-card{
  background: var(--card); 
  border-radius: var(--radius); 
  border: 1px solid rgba(0,0,0,.06);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}


/* Imput Service - Ideal Size & Layout */
.service-form {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 28px;
}
.service-form .form-grid {
  gap: 10px 14px;
}


/* Imput Service - Compact Wide Layout */
.service-form {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 22px;
}

.service-form .form-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px 14px;
}

/* Default: 3 kolom */
.service-form .field { grid-column: span 4; }

/* Variasi */
.service-form .field.span-6 { grid-column: span 6; }
.service-form .field.span-8 { grid-column: span 8; }
.service-form .field.span-12{ grid-column: span 12; }

/* Label lebih kecil */
.service-form label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 3px;
}

/* Input lebih ramping */
.service-form input,
.service-form select,
.service-form textarea {
  font-size: .85rem;
  padding: .55rem .75rem;
  height: 36px;
}

.service-form textarea {
  min-height: 70px;
}

/* Mobile responsive */
@media(max-width:768px){
  .service-form .field { grid-column: span 12; }
}


/* Imput Service — Compact Wide (4cm feel) */
.service-form {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 20px;
}
.service-form .form-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px 12px; /* lebih rapat */
}
/* Default 4 kolom sejajar (3/12) agar melebar ke samping */
.service-form .field { grid-column: span 3; }

/* Teks & input lebih ramping */
.service-form label {
  font-size: .70rem;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--muted);
  margin-bottom: 2px;
}
.service-form input,
.service-form select,
.service-form textarea {
  font-size: .84rem;
  padding: .45rem .70rem;
  height: 34px;
  border-radius: 12px;
}
.service-form textarea { min-height: 64px; }

.service-form .actions .btn {
  height: 36px;
  padding: .5rem .9rem;
  font-size: .9rem;
}

/* Mobile fallback */
@media(max-width: 768px){
  .service-form .field { grid-column: span 12; }
}


/* Custom patch for active menu item */
.sidebar a.active {
  color: #ffffff !important;   /* white text */
  font-weight: bold;
}
.sidebar a:hover {
  color: #ffd700 !important;   /* gold on hover */
}


/* Clock badge styling */
.clock-badge{
  display:flex;align-items:center;gap:8px;
  background: rgba(0,0,0,.25);
  color:#fff;
  padding:4px 10px;border-radius:10px;
}
.clock-badge .clock-icon{font-size:1.05rem;filter:drop-shadow(0 0 2px rgba(0,0,0,.2))}


/* ===== Layout fix: sidebar independent scroll ===== */
html, body { height: 100%; }
.app-shell { display: flex; min-height: 100vh; max-height: 100vh; overflow: hidden; }

/* Sidebar: fixed width & its own scroll */
.sidebar { width: 280px; flex: 0 0 280px; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding-bottom: 24px; }
@media (max-width: 991.98px){ .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 1040; transform: translateX(-100%); transition: transform .25s ease; }
  .sidebar.show { transform: translateX(0); }
  .app-shell { padding-left: 0; } }

/* Main area: fills remaining width and scrolls separately */
.main { flex: 1 1 auto; min-width: 0; overflow-y: auto; max-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 10; }

/* Ensure nav items don’t stick to edges */
.sidebar .nav { padding-bottom: 40px; }



/* Auto hide horizontal navbar scrollbar for professional layout */
.navbar-scroll,
.nav-scroll,
.navbar-nav,
.menu-scroll,
.top-nav,
.nav-wrapper {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.navbar-scroll::-webkit-scrollbar,
.nav-scroll::-webkit-scrollbar,
.navbar-nav::-webkit-scrollbar,
.menu-scroll::-webkit-scrollbar,
.top-nav::-webkit-scrollbar,
.nav-wrapper::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}


/* Hide horizontal guide/indicator/scroll hint completely */
::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
    background: transparent !important;
}
::-webkit-scrollbar-thumb {
    background: transparent !important;
}
* {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* remove gradient/guide overlays often used for horizontal nav */
.scroll-indicator,
.scroll-shadow,
.nav-shadow,
.nav-gradient,
.scroll-guide,
.guide-scroll,
.fade-left,
.fade-right {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}