/* =====================================================================
   Roto-Rooter PMS - app.css
   Palet industrial: biru tua korporat + aksen merah Roto-Rooter.
   ===================================================================== */
:root{
  --rr-blue:#003DA5;        /* primary */
  --rr-navy:#012A6B;        /* sidebar */
  --rr-navy-2:#001E4D;      /* sidebar bawah */
  --rr-red:#E2231A;         /* aksen Roto-Rooter */
  --rr-red-dark:#B71C13;
  --rr-ink:#1B2430;
  --rr-muted:#64748B;
  --rr-line:#E3E8F0;
  --rr-bg:#F4F6FA;
  --rr-card:#FFFFFF;
  --rr-sidebar-w:248px;
  --rr-topbar-h:60px;
  --rr-radius:12px;
  --rr-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --rr-shadow-md:0 4px 12px rgba(16,24,40,.10);
  --bs-primary:#003DA5;
}
*{ -webkit-tap-highlight-color:transparent; }
body{
  background:var(--rr-bg);
  color:var(--rr-ink);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:14.5px;
  letter-spacing:.1px;
}
a{ text-decoration:none; }
.text-rr-red{ color:var(--rr-red)!important; }
.bg-rr-blue{ background:var(--rr-blue)!important; }

/* ---------- LAYOUT ---------- */
.rr-shell{ display:flex; min-height:100vh; }
.rr-sidebar{
  width:var(--rr-sidebar-w); flex:0 0 var(--rr-sidebar-w);
  background:linear-gradient(180deg,var(--rr-navy) 0%,var(--rr-navy-2) 100%);
  color:#cdd7ec; position:fixed; top:0; bottom:0; left:0; z-index:1040;
  display:flex; flex-direction:column; transition:transform .25s ease;
}
.rr-brand{
  height:var(--rr-topbar-h); display:flex; align-items:center; gap:10px;
  padding:0 18px; border-bottom:1px solid rgba(255,255,255,.08); flex:0 0 auto;
}
.rr-brand .mark{
  width:30px;height:30px;border-radius:8px;background:var(--rr-red);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;
  box-shadow:0 2px 6px rgba(226,35,26,.5);
}
.rr-brand .name{ color:#fff;font-weight:700;font-size:15px;line-height:1; }
.rr-brand .name small{ display:block;font-weight:400;font-size:10.5px;color:#9fb2d6;margin-top:3px;letter-spacing:.4px; }
.rr-nav{ overflow-y:auto; padding:10px 0 24px; flex:1 1 auto; }
.rr-nav::-webkit-scrollbar{ width:6px; } .rr-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15);border-radius:3px; }
.rr-nav .sect{ font-size:10.5px;text-transform:uppercase;letter-spacing:1.1px;color:#6f86b2;padding:14px 20px 6px; }
.rr-nav a{
  display:flex;align-items:center;gap:11px;padding:9px 20px;color:#c6d2ea;
  font-size:13.7px;border-left:3px solid transparent;transition:.12s;
}
.rr-nav a i{ font-size:16px;width:20px;text-align:center;color:#8aa0c9; }
.rr-nav a:hover{ background:rgba(255,255,255,.06);color:#fff; }
.rr-nav a:hover i{ color:#fff; }
.rr-nav a.active{ background:rgba(0,61,165,.45);color:#fff;border-left-color:var(--rr-red); }
.rr-nav a.active i{ color:#fff; }
.rr-nav a .pill{ margin-left:auto;background:var(--rr-red);color:#fff;font-size:10.5px;font-weight:700;border-radius:20px;padding:1px 7px; }

.rr-main{ flex:1 1 auto; margin-left:var(--rr-sidebar-w); display:flex;flex-direction:column;min-width:0; }
.rr-topbar{
  height:var(--rr-topbar-h);background:#fff;border-bottom:1px solid var(--rr-line);
  display:flex;align-items:center;gap:14px;padding:0 20px;position:sticky;top:0;z-index:1030;
}
.rr-topbar .toggle{ display:none;background:none;border:0;font-size:21px;color:var(--rr-ink); }
.rr-topbar .pagetitle{ font-weight:700;font-size:16px;color:var(--rr-ink); }
.rr-topbar .pagetitle small{ display:block;font-weight:400;font-size:11.5px;color:var(--rr-muted); }
.rr-topbar .spacer{ flex:1 1 auto; }
.rr-icon-btn{
  position:relative;width:38px;height:38px;border-radius:9px;border:1px solid var(--rr-line);
  background:#fff;color:var(--rr-ink);display:inline-flex;align-items:center;justify-content:center;font-size:17px;
}
.rr-icon-btn:hover{ background:var(--rr-bg); }
.rr-icon-btn .dot{
  position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--rr-red);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff;
}
.rr-avatar{ width:34px;height:34px;border-radius:50%;background:var(--rr-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px; }

.rr-content{ padding:22px; flex:1 1 auto; }
.rr-page-head{ display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:18px; }
.rr-page-head h1{ font-size:21px;font-weight:700;margin:0; }
.rr-page-head .sub{ color:var(--rr-muted);font-size:13px;margin-top:2px; }

/* ---------- CARDS ---------- */
.card{ border:1px solid var(--rr-line);border-radius:var(--rr-radius);box-shadow:var(--rr-shadow); }
.card-header{ background:#fff;border-bottom:1px solid var(--rr-line);font-weight:600;padding:13px 16px;border-radius:var(--rr-radius) var(--rr-radius) 0 0; }
.rr-kpi{ position:relative;overflow:hidden; }
.rr-kpi .v{ font-size:24px;font-weight:800;line-height:1.1; }
.rr-kpi .l{ color:var(--rr-muted);font-size:12.5px;font-weight:500;margin-top:3px; }
.rr-kpi .ic{ position:absolute;right:14px;top:14px;font-size:30px;opacity:.16; }
.rr-kpi.b-blue{ border-left:4px solid var(--rr-blue); } .rr-kpi.b-blue .ic{ color:var(--rr-blue); }
.rr-kpi.b-green{ border-left:4px solid #16a34a; } .rr-kpi.b-green .ic{ color:#16a34a; }
.rr-kpi.b-amber{ border-left:4px solid #d97706; } .rr-kpi.b-amber .ic{ color:#d97706; }
.rr-kpi.b-red{ border-left:4px solid var(--rr-red); } .rr-kpi.b-red .ic{ color:var(--rr-red); }
.rr-kpi.b-slate{ border-left:4px solid var(--rr-muted); } .rr-kpi.b-slate .ic{ color:var(--rr-muted); }

/* ---------- TABLES ---------- */
.table{ --bs-table-hover-bg:#f1f5fc; margin:0; }
.table thead th{ background:#f7f9fd;color:#5a6b85;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;border-bottom:1px solid var(--rr-line);white-space:nowrap; }
.table tbody td{ vertical-align:middle;font-size:13.6px;border-color:#eef1f6; }
.table-card{ border-radius:var(--rr-radius);overflow:hidden; }
.rr-rowlink{ cursor:pointer; }

/* ---------- BADGES / BUTTONS ---------- */
.badge{ font-weight:600;letter-spacing:.2px;padding:.36em .6em;border-radius:7px; }
.btn{ border-radius:9px;font-weight:600;font-size:13.7px; }
.btn-primary{ background:var(--rr-blue);border-color:var(--rr-blue); }
.btn-primary:hover{ background:#00328a;border-color:#00328a; }
.btn-rr-red{ background:var(--rr-red);border-color:var(--rr-red);color:#fff; }
.btn-rr-red:hover{ background:var(--rr-red-dark);border-color:var(--rr-red-dark);color:#fff; }
.btn-soft{ background:#eef2fb;border:1px solid var(--rr-line);color:var(--rr-blue); }
.btn-soft:hover{ background:#e2e9f8; }

/* ---------- PROGRESS ---------- */
.progress{ background:#eaeef5;border-radius:20px;height:9px; }
.rr-prog-lbl{ font-size:11.5px;color:var(--rr-muted);font-weight:600; }

/* ---------- FORMS ---------- */
.form-label{ font-weight:600;font-size:13px;color:#37475f;margin-bottom:4px; }
.form-control,.form-select{ border-radius:9px;border-color:#d7deea;font-size:14px; }
.form-control:focus,.form-select:focus{ border-color:var(--rr-blue);box-shadow:0 0 0 3px rgba(0,61,165,.12); }
.rr-form-section{ font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--rr-blue);margin:6px 0 2px;padding-bottom:6px;border-bottom:2px solid #eef1f6; }
.req::after{ content:" *";color:var(--rr-red); }

/* ---------- KANBAN ---------- */
.rr-kanban{ display:flex;gap:14px;overflow-x:auto;padding-bottom:8px; }
.rr-kan-col{ flex:0 0 290px;background:#eef1f7;border-radius:var(--rr-radius);display:flex;flex-direction:column;max-height:78vh; }
.rr-kan-col h6{ padding:11px 13px;margin:0;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #dde3ee;display:flex;justify-content:space-between;align-items:center; }
.rr-kan-body{ padding:10px;overflow-y:auto;flex:1 1 auto;min-height:60px; }
.rr-kan-card{ background:#fff;border:1px solid var(--rr-line);border-left:3px solid var(--rr-blue);border-radius:9px;padding:10px 11px;margin-bottom:9px;box-shadow:var(--rr-shadow);cursor:grab; }
.rr-kan-card.dragging{ opacity:.5; }
.rr-kan-card .t{ font-weight:600;font-size:13.4px;margin-bottom:5px; }
.rr-kan-card .m{ font-size:11.5px;color:var(--rr-muted);display:flex;justify-content:space-between;align-items:center; }
.rr-kan-col.dragover{ outline:2px dashed var(--rr-blue);outline-offset:-4px; }

/* ---------- PHOTOS ---------- */
.rr-photo-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px; }
.rr-photo{ position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--rr-line);aspect-ratio:4/3;background:#eef1f7; }
.rr-photo img{ width:100%;height:100%;object-fit:cover; }
.rr-photo .cat{ position:absolute;top:6px;left:6px;background:rgba(0,0,0,.62);color:#fff;font-size:10px;padding:1px 6px;border-radius:5px; }
.rr-photo .del{ position:absolute;top:6px;right:6px; }

/* ---------- EMPTY ---------- */
.rr-empty{ text-align:center;padding:46px 18px;color:var(--rr-muted); }
.rr-empty i{ font-size:42px;opacity:.4;display:block;margin-bottom:10px; }

/* ---------- HEALTH RAIL ---------- */
.rr-health{ display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:12.5px; }
.rr-health .d{ width:10px;height:10px;border-radius:50%; }
.h-on .d,.badge-on{ background:#16a34a; } .h-at .d{ background:#d97706; }
.h-de .d{ background:#dc2626; } .h-ov .d{ background:var(--rr-red); } .h-cr .d{ background:#7f1d1d; }

/* ---------- AUTH ---------- */
.rr-auth{ min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(1200px 600px at 10% -10%,rgba(0,61,165,.35),transparent),linear-gradient(135deg,var(--rr-navy),var(--rr-navy-2)); }
.rr-auth-card{ width:100%;max-width:410px;background:#fff;border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden; }
.rr-auth-head{ padding:26px 30px 14px;text-align:center; }
.rr-auth-head .mark{ width:54px;height:54px;border-radius:14px;background:var(--rr-red);color:#fff;font-weight:800;font-size:22px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 6px 16px rgba(226,35,26,.45); }
.rr-auth-head h1{ font-size:19px;font-weight:800;margin:0;color:var(--rr-ink); }
.rr-auth-head p{ color:var(--rr-muted);font-size:13px;margin:4px 0 0; }
.rr-auth-body{ padding:8px 30px 28px; }
.rr-auth-foot{ background:#f7f9fd;padding:13px;text-align:center;font-size:11.5px;color:var(--rr-muted);border-top:1px solid var(--rr-line); }

/* ---------- MOBILE BOTTOM NAV ---------- */
.rr-mobnav{ display:none; }

@media (max-width:991.98px){
  .rr-sidebar{ transform:translateX(-100%); box-shadow:0 0 40px rgba(0,0,0,.4); }
  .rr-sidebar.open{ transform:translateX(0); }
  .rr-main{ margin-left:0; }
  .rr-topbar .toggle{ display:inline-block; }
  .rr-backdrop{ position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1039;display:none; }
  .rr-backdrop.show{ display:block; }
  .rr-content{ padding:16px 14px 86px; }
  .rr-mobnav{
    display:flex;position:fixed;bottom:0;left:0;right:0;height:60px;background:#fff;border-top:1px solid var(--rr-line);
    z-index:1035;box-shadow:0 -2px 10px rgba(16,24,40,.08);
  }
  .rr-mobnav a{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--rr-muted);font-size:10.5px; }
  .rr-mobnav a i{ font-size:19px; }
  .rr-mobnav a.active{ color:var(--rr-blue); }
  .rr-mobnav a .pill{ position:absolute;top:6px;margin-left:24px;background:var(--rr-red);color:#fff;font-size:9px;border-radius:10px;padding:0 5px; }
}

/* ---------- PRINT ---------- */
@media print{
  .rr-sidebar,.rr-topbar,.rr-mobnav,.rr-backdrop,.no-print,.btn{ display:none!important; }
  .rr-main{ margin-left:0; } .rr-content{ padding:0; } body{ background:#fff;font-size:12px; }
  .rr-print{ display:block!important; }
  .card{ box-shadow:none;border:1px solid #ccc; }
  .rr-print-head{ display:flex;justify-content:space-between;border-bottom:3px solid var(--rr-blue);padding-bottom:10px;margin-bottom:16px; }
  table{ page-break-inside:auto; } tr{ page-break-inside:avoid; }
  .rr-sign{ margin-top:50px;display:flex;justify-content:space-between;gap:40px; }
  .rr-sign div{ flex:1;text-align:center; } .rr-sign .line{ margin-top:60px;border-top:1px solid #333;padding-top:5px; }
}
.rr-print{ display:none; }