/* ============================================================
   Toko Kopi — Main Stylesheet
   ============================================================ */

:root {
  --coffee-dark:   #2C1A0E;
  --coffee-brown:  #6F4E37;
  --coffee-medium: #A0724B;
  --coffee-light:  #D4A574;
  --coffee-cream:  #F5E6D3;
  --coffee-white:  #FDFAF7;
  --accent-green:  #27AE60;
  --accent-red:    #E74C3C;
  --accent-blue:   #2980B9;
  --accent-orange: #E67E22;
  --text-dark:     #2C2C2C;
  --text-mid:      #555555;
  --text-light:    #888888;
  --border:        #E0D5C9;
  --shadow:        rgba(111,78,55,.12);
  --radius:        10px;
  --radius-lg:     16px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--coffee-cream);
  color: var(--text-dark);
  min-height: 100vh;
}
a { color: var(--coffee-brown); text-decoration:none; }
a:hover { color: var(--coffee-dark); }
img { max-width:100%; }

/* ── Layout ── */
.page-wrapper { display:flex; min-height:100vh; position:relative; }
.sidebar-backdrop {
  position:fixed;
  inset:0;
  background:rgba(22, 12, 5, .45);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:25;
}
.sidebar-edge-toggle {
  position:fixed;
  top:14px;
  left:252px;
  z-index:45;
  width:38px;
  height:38px;
  border:none;
  border-radius:10px;
  background:var(--coffee-dark);
  color:#fff;
  font-size:1.05rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(44,26,14,.22);
  transition:left .22s ease, background .15s ease, transform .15s ease;
}
.sidebar-edge-toggle:hover { background:#1f1209; transform:translateY(-1px); }

/* Sidebar */
.sidebar {
  width: 240px;
  min-height: 100vh;
  height: 100vh;
  background: var(--coffee-dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  flex-shrink: 0;
  transition: transform .22s ease, margin-left .22s ease, width .22s ease;
  overflow: hidden;
}
.sidebar-logo-wrap {
  display:flex;
  align-items:stretch;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.sidebar-logo {
  padding: 24px 20px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .5px;
  flex:1;
}
.sidebar-logo span { color: var(--coffee-light); }
.sidebar-nav { padding: 16px 0; flex: 1; min-height:0; overflow-y:auto; scrollbar-width:thin; }
.sidebar-nav::-webkit-scrollbar { width:8px; }
.sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); border-radius:999px; }
.nav-section { padding: 8px 20px 4px; font-size:.7rem; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.4); }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  color: rgba(255,255,255,.75);
  transition: all .2s;
  border-left: 3px solid transparent;
  font-size:.9rem;
}
.nav-item:hover, .nav-item.active {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-left-color: var(--coffee-light);
}
.nav-item .icon { width:18px; text-align:center; }
.sidebar-footer { padding: 16px 20px; border-top:1px solid rgba(255,255,255,.1); font-size:.8rem; color:rgba(255,255,255,.5); }
.sidebar-toggle {
  border:none;
  background:transparent;
  color:rgba(255,255,255,.75);
  cursor:pointer;
  transition:background .15s, color .15s;
}
.sidebar-toggle:hover { background:rgba(255,255,255,.08); color:#fff; }
.sidebar-toggle-topbar {
  width:38px;
  height:38px;
  border-radius:10px;
  background:var(--coffee-dark);
  color:#fff;
  font-size:1.1rem;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Main content */
.main-content { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.topbar {
  background:#fff;
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top:0;
  z-index:10;
  box-shadow: 0 2px 8px var(--shadow);
  gap:16px;
}
.topbar-title-wrap { display:flex; align-items:center; gap:12px; min-width:0; }
.topbar-title { font-size:1.1rem; font-weight:600; color:var(--coffee-dark); }
.topbar-user { display:flex; align-items:center; gap:10px; font-size:.9rem; flex-wrap:wrap; justify-content:flex-end; }
.topbar-user-meta { min-width:0; }
.topbar-logout { margin-left:8px; }
.topbar-icon-btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  text-decoration:none; font-size:1.1rem;
  transition:background .15s;
}
.topbar-icon-btn:hover { background:var(--bg-light,#faf9f7); }
.notif-badge {
  position:absolute; top:2px; right:2px;
  background:#e07b39; color:#fff;
  font-size:.6rem; font-weight:700; line-height:1;
  padding:2px 4px; border-radius:8px; min-width:14px; text-align:center;
}
.avatar {
  width:34px; height:34px; border-radius:50%;
  background: var(--coffee-brown);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.85rem;
}

.page-body { padding:24px; flex:1; overflow-y:auto; min-width:0; }

html.sidebar-collapsed .sidebar {
  transform:translateX(-100%);
  margin-left:-240px;
}
html.sidebar-collapsed .main-content {
  width:100%;
}
html.sidebar-collapsed .sidebar-edge-toggle {
  left:12px;
}

/* ── Cards ── */
.card {
  background:#fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 2px 12px var(--shadow);
  border: 1px solid var(--border);
}
.card-title { font-size:1rem; font-weight:600; color:var(--coffee-dark); margin-bottom:16px; display:flex; align-items:center; gap:8px; }

.dashboard-grid-2,
.dashboard-grid-main-aside,
.dashboard-grid-main-sidebar,
.dashboard-grid-branch-detail,
.dashboard-grid-3 {
  display:grid;
  gap:20px;
}
.dashboard-grid-2,
.dashboard-grid-branch-detail { grid-template-columns:1fr 1fr; }
.dashboard-grid-main-aside { grid-template-columns:2fr 1fr; }
.dashboard-grid-main-sidebar { grid-template-columns:3fr 1fr; }
.dashboard-grid-3 { grid-template-columns:repeat(3, 1fr); }

.section-actions,
.toolbar-row,
.chart-toolbar,
.chart-toolbar-group,
.filter-grid,
.button-row {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.section-actions { align-items:center; }
.toolbar-row,
.chart-toolbar,
.chart-toolbar-group,
.filter-grid { align-items:flex-end; }
.button-row { align-items:center; }
.filter-grow { flex:1; min-width:180px; }
.filter-field { min-width:160px; }
.compact-input { padding:6px 10px; }
.compact-select { padding:6px 8px; }

.chart-card-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
  gap:10px;
  flex-wrap:wrap;
}

.chart-canvas-wrap {
  position:relative;
  height:300px;
}

.chart-canvas-wrap.chart-canvas-compact {
  height:260px;
}

/* Stat cards */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card {
  background:#fff;
  border-radius: var(--radius-lg);
  padding:20px;
  border-left:4px solid var(--coffee-brown);
  box-shadow:0 2px 12px var(--shadow);
}
.stat-card.green { border-left-color: var(--accent-green); }
.stat-card.blue  { border-left-color: var(--accent-blue); }
.stat-card.orange{ border-left-color: var(--accent-orange); }
.stat-label { font-size:.8rem; color:var(--text-light); margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px; }
.stat-value { font-size:1.8rem; font-weight:700; color:var(--coffee-dark); }
.stat-sub   { font-size:.8rem; color:var(--text-mid); margin-top:4px; }

/* ── Tables ── */
.table-wrap { overflow-x:auto; width:100%; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th { background:var(--coffee-cream); color:var(--coffee-dark); font-weight:600; text-align:left; padding:12px 16px; border-bottom:2px solid var(--border); white-space:nowrap; }
td { padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(111,78,55,.03); }

/* ── Badges ── */
.badge {
  display:inline-flex; align-items:center;
  padding:3px 10px; border-radius:20px;
  font-size:.75rem; font-weight:600;
}
.badge-green  { background:#D4EDDA; color:#155724; }
.badge-red    { background:#F8D7DA; color:#721C24; }
.badge-blue   { background:#CCE5FF; color:#004085; }
.badge-orange { background:#FFE8CC; color:#7A4000; }
.badge-gray   { background:#E2E3E5; color:#383D41; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 18px; border-radius:var(--radius);
  font-size:.9rem; font-weight:500; cursor:pointer;
  border:none; transition:all .2s; text-decoration:none;
}
.btn-primary { background:var(--coffee-brown); color:#fff; }
.btn-primary:hover { background:var(--coffee-dark); color:#fff; }
.btn-success { background:var(--accent-green); color:#fff; }
.btn-success:hover { background:#1e8449; color:#fff; }
.btn-danger  { background:var(--accent-red); color:#fff; }
.btn-danger:hover { background:#c0392b; color:#fff; }
.btn-outline { background:transparent; border:2px solid var(--coffee-brown); color:var(--coffee-brown); }
.btn-outline:hover { background:var(--coffee-brown); color:#fff; }
.btn-sm { padding:5px 12px; font-size:.8rem; }
.btn-xs { padding:3px 8px; font-size:.75rem; }

/* ── Forms ── */
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:.85rem; font-weight:500; color:var(--text-dark); margin-bottom:6px; }
.form-control {
  width:100%; padding:10px 14px; border:1.5px solid var(--border);
  border-radius:var(--radius); font-size:.9rem;
  transition:border .2s; background:#fff;
  color:var(--text-dark);
}
.form-control:focus { outline:none; border-color:var(--coffee-brown); box-shadow:0 0 0 3px rgba(111,78,55,.12); }
.form-control::placeholder { color:var(--text-light); }
select.form-control { cursor:pointer; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-error { color:var(--accent-red); font-size:.8rem; margin-top:4px; }

/* ── Login page ── */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg,var(--coffee-dark),var(--coffee-brown)); }
.login-card { background:#fff; border-radius:20px; padding:40px; width:100%; max-width:400px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.login-logo { text-align:center; margin-bottom:28px; }
.login-logo h1 { color:var(--coffee-dark); font-size:1.8rem; }
.login-logo p  { color:var(--text-light); font-size:.9rem; margin-top:4px; }

/* ── Alerts ── */
.alert { padding:12px 16px; border-radius:var(--radius); font-size:.9rem; margin-bottom:16px; }
.alert-error   { background:#fdecea; border:1px solid #f5c6cb; color:#721c24; }
.alert-success { background:#d4edda; border:1px solid #c3e6cb; color:#155724; }
.alert-info    { background:#cce5ff; border:1px solid #b8daff; color:#004085; }

/* ── Section header ── */
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.section-header h2 { font-size:1.2rem; font-weight:700; color:var(--coffee-dark); }

/* ── Modal ── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; z-index:999;
}
.modal-box {
  background:#fff; border-radius:var(--radius-lg);
  padding:28px; width:100%; max-width:520px;
  box-shadow:0 10px 40px rgba(0,0,0,.2);
  max-height:90vh; overflow-y:auto;
}
.modal-title { font-size:1.1rem; font-weight:700; color:var(--coffee-dark); margin-bottom:20px; }
.modal-footer { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.hidden { display:none !important; }

/* ── Pagination ── */
.pagination { display:flex; gap:6px; align-items:center; margin-top:16px; flex-wrap:wrap; }
.page-btn { padding:6px 12px; border:1.5px solid var(--border); border-radius:6px; cursor:pointer; font-size:.85rem; background:#fff; }
.page-btn.active { background:var(--coffee-brown); color:#fff; border-color:var(--coffee-brown); }
.page-btn:hover:not(.active) { border-color:var(--coffee-brown); color:var(--coffee-brown); }

/* ── Chat UI ── */
.chat-container {
  display:flex; flex-direction:column;
  height:100vh; max-height:100vh;
  background: #E5DDD5;
}
.chat-header {
  background: var(--coffee-dark);
  color:#fff; padding:12px 16px;
  display:flex; align-items:center; gap:12px;
}
.chat-header-avatar {
  width:40px; height:40px; border-radius:50%;
  background:var(--coffee-medium); display:flex; align-items:center;
  justify-content:center; font-size:1.2rem;
}
.chat-header-info h3 { font-size:1rem; margin:0; }
.chat-header-info span { font-size:.75rem; opacity:.8; }
.chat-messages {
  flex:1; overflow-y:auto; padding:12px;
  display:flex; flex-direction:column; gap:4px;
}
.message-wrap { display:flex; margin-bottom:8px; }
.message-wrap.bot  { justify-content:flex-start; }
.message-wrap.user { justify-content:flex-end; }
.message-bubble {
  max-width:72%; padding:10px 14px;
  border-radius:12px; font-size:.9rem; line-height:1.5;
  position:relative; word-break:break-word;
}
.message-wrap.bot  .message-bubble { background:#fff; border-radius:0 12px 12px 12px; box-shadow:0 1px 2px rgba(0,0,0,.1); }
.message-wrap.user .message-bubble { background:#DCF8C6; border-radius:12px 0 12px 12px; }
.message-time { font-size:.65rem; color:var(--text-light); margin-top:4px; text-align:right; }
.chat-input-area {
  background:#fff; border-top:1px solid var(--border);
  padding:12px; display:flex; gap:8px; align-items:flex-end;
}
.chat-input {
  flex:1; border:1.5px solid var(--border); border-radius:24px;
  padding:10px 16px; font-size:.9rem; resize:none; max-height:120px;
  outline:none;
}
.chat-input:focus { border-color:var(--coffee-brown); }
.chat-send-btn {
  width:42px; height:42px; border-radius:50%;
  background:var(--coffee-brown); color:#fff; border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.chat-send-btn:hover { background:var(--coffee-dark); }

/* Typing indicator */
.typing-indicator { display:flex; gap:4px; padding:12px 16px; align-items:center; }
.typing-dot { width:8px; height:8px; border-radius:50%; background:var(--text-light); animation:typingBounce 1.2s infinite; }
.typing-dot:nth-child(2) { animation-delay:.2s; }
.typing-dot:nth-child(3) { animation-delay:.4s; }
@keyframes typingBounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-8px)} }

/* ── Responsive ── */
@media (max-width:768px) {
  .sidebar-edge-toggle { display:none; }
  .sidebar {
    display:flex;
    position:fixed;
    left:0;
    width:min(82vw, 300px);
    z-index:30;
    transform:translateX(-100%);
    box-shadow:0 18px 36px rgba(0,0,0,.18);
  }
  html.sidebar-mobile-open .sidebar {
    transform:translateX(0);
  }
  html.sidebar-mobile-open .sidebar-backdrop {
    opacity:1;
    pointer-events:auto;
  }
  .topbar {
    padding: 14px 16px;
    align-items:flex-start;
  }
  .topbar-title {
    font-size:1rem;
    line-height:1.3;
  }
  .topbar-user {
    width:100%;
    justify-content:space-between;
  }
  .topbar-user-meta {
    flex:1;
  }
  .topbar-logout {
    margin-left:0;
  }
  .form-row { grid-template-columns:1fr; }
  .stats-grid,
  .dashboard-grid-2,
  .dashboard-grid-main-aside,
  .dashboard-grid-main-sidebar,
  .dashboard-grid-branch-detail,
  .dashboard-grid-3 {
    grid-template-columns:1fr;
  }
  .stats-grid { gap:12px; }
  .page-body { padding:16px; }
  .card { padding:16px; }
  th, td { padding:10px 12px; }
  table { font-size:.85rem; }
  .chart-canvas-wrap { height:240px; }
  .chart-canvas-wrap.chart-canvas-compact { height:220px; }
  .section-header { align-items:flex-start; }
  .section-actions { width:100%; }
  .section-actions > * { flex:1 1 auto; }
  .filter-grid > *,
  .toolbar-row > *,
  .chart-toolbar > *,
  .chart-toolbar-group > *,
  .button-row > * {
    flex:1 1 100%;
  }
  .filter-field,
  .filter-grow {
    min-width:0;
  }
  .btn,
  .btn-sm,
  .btn-xs {
    justify-content:center;
  }
  .pagination { justify-content:center; }
}