/* =====================================================================
   Hifikirana admin / seller / delivery panels: design layer over the Mazer template.
   Loaded last (welcome.blade.php). Dense, flat, kirana green + yellow, like the storefront.
   ===================================================================== */
:root {
  --hk-green: #1B6B2F;
  --hk-green-dark: #14532A;
  --hk-green-soft: #E8F5E9;
  --hk-yellow: #FFC107;
  --hk-bg: #F1F3F6;
  --hk-border: #E3E6EA;
  --hk-text: #212121;
  --hk-muted: #6B7280;
  --hk-radius: 6px;
  --hk-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

body, .btn, .form-control, .form-select, .table, .dropdown-menu, .modal, .swal2-popup {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
body { background: var(--hk-bg) !important; color: var(--hk-text); font-size: .875rem; }
h1, h2, h3, h4, h5, h6 { color: var(--hk-text); letter-spacing: -.01em; }
a { color: var(--hk-green); }
::selection { background: var(--hk-green-soft); }

/* ---------- layout ---------- */
#main { padding: 1rem 1.25rem; }
#main #main-content { padding: 1rem 0; }
.page-heading { margin: 0 0 1rem; }
.page-heading h3, .page-title h3 { font-size: 1.15rem !important; font-weight: 600 !important; }
.navbar { height: 60px !important; padding: .75rem 1.25rem !important; }

/* ---------- sidebar ---------- */
.sidebar-wrapper { width: 260px; box-shadow: 1px 0 0 var(--hk-border); }
@media screen and (min-width: 1200px) { #main { margin-left: 260px; } }
.sidebar-wrapper .sidebar-header { padding: .9rem 1.25rem; font-size: 1.4rem; }
.sidebar-wrapper .menu { padding: 0 .75rem; font-weight: 500; }
.sidebar-wrapper .menu .sidebar-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--hk-muted); margin: 1rem 0 .35rem; padding: 0 .75rem; }
.sidebar-wrapper .menu .sidebar-item { margin-top: 2px; }
.sidebar-wrapper .menu .sidebar-link { font-size: .85rem; padding: .5rem .75rem; border-radius: var(--hk-radius); color: #344054; transition: background-color .15s ease, color .15s ease; }
.sidebar-wrapper .menu .sidebar-link span { margin-left: .7rem; }
.sidebar-wrapper .menu .sidebar-link i, .sidebar-wrapper .menu .sidebar-link svg { color: #7A8699; font-size: 1rem; }
.sidebar-wrapper .menu .sidebar-link:hover { background: #F4F8F5; color: var(--hk-green); }
.sidebar-wrapper .menu .sidebar-item.active > .sidebar-link { background: var(--hk-green) !important; }
.sidebar-wrapper .menu .submenu .submenu-item a { font-size: .8rem; font-weight: 500; padding: .4rem .75rem .4rem 2.4rem; color: #475467; }
.sidebar-wrapper .menu .submenu .submenu-item a:hover { margin-left: 0; color: var(--hk-green); }
.sidebar-wrapper .menu .submenu .submenu-item.active > a { color: var(--hk-green) !important; font-weight: 600; }
.sidebar-wrapper .menu .sidebar-item.has-sub .sidebar-link:after { top: 7px; right: 10px; }

/* ---------- cards ---------- */
.card { border-radius: var(--hk-radius) !important; box-shadow: var(--hk-shadow) !important; border: 1px solid var(--hk-border) !important; margin-bottom: 1rem; }
.card .card-header { background: #fff; padding: .85rem 1rem; border-bottom: 1px solid var(--hk-border) !important; border-radius: var(--hk-radius) var(--hk-radius) 0 0 !important; }
.card .card-header h4, .card .card-title { font-size: .95rem !important; font-weight: 600 !important; margin: 0; }
.card .card-body { padding: 1rem; }
.card .card-header ~ .card-body { padding-top: 1rem; }

/* dashboard stat tiles: one tinted family instead of rainbow */
.stats-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--hk-radius); }
.stats-icon i { font-size: 1.3rem; }
.stats-icon.purple, .stats-icon.blue, .stats-icon.red, .stats-icon.green { background-color: var(--hk-green-soft) !important; }
.stats-icon.purple i, .stats-icon.blue i, .stats-icon.red i, .stats-icon.green i { color: var(--hk-green) !important; }
.card.card-statistic { background: var(--hk-green) !important; box-shadow: none !important; }

/* ---------- buttons ---------- */
.btn { border-radius: 4px; font-weight: 500; font-size: .825rem; padding: .4rem .85rem; transition: background-color .15s ease, border-color .15s ease, transform .1s ease; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--hk-green); outline-offset: 2px; box-shadow: none !important; }
.btn-primary, .btn-primary:focus, .btn-primary.disabled, .btn-primary:disabled { background-color: var(--hk-green) !important; border-color: var(--hk-green) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:active { background-color: var(--hk-green-dark) !important; border-color: var(--hk-green-dark) !important; }
.btn-outline-primary { color: var(--hk-green) !important; border-color: var(--hk-green) !important; }
.btn-outline-primary:hover, .btn-outline-primary:active { background-color: var(--hk-green) !important; color: #fff !important; }
.btn.btn-light-primary, .bg-light-primary { background-color: var(--hk-green-soft) !important; color: var(--hk-green-dark) !important; }
.btn-warning { background-color: var(--hk-yellow) !important; border-color: var(--hk-yellow) !important; color: #3B2F00 !important; }
.btn-sm { padding: .25rem .55rem; font-size: .775rem; }
.swal2-styled.swal2-confirm { background-color: var(--hk-green) !important; border-radius: 4px !important; }

/* ---------- forms ---------- */
.form-control, .form-select, .custom-select, .dataTable-input, .vs__dropdown-toggle {
  border: 1px solid #D0D5DD !important; border-radius: 4px !important; font-size: .85rem; min-height: 36px; box-shadow: none !important;
}
.form-control:focus, .form-select:focus, .custom-select:focus, .dataTable-input:focus {
  border-color: var(--hk-green) !important; box-shadow: 0 0 0 3px rgba(27, 107, 47, .12) !important;
}
.form-group { margin-bottom: .85rem; }
.form-group label, label { color: #344054; font-weight: 500; font-size: .8rem; }
.form-check-input:checked, .custom-control-input:checked ~ .custom-control-label::before,
.form-check .form-check-input.form-check-primary { background-color: var(--hk-green) !important; border-color: var(--hk-green) !important; }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--hk-green) !important; border-color: var(--hk-green) !important; }

/* ---------- tables ---------- */
.table { font-size: .825rem; color: var(--hk-text); }
.table thead th, .b-table thead th {
  background: #F8FAFC; color: #475467; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--hk-border) !important; padding: .6rem .75rem !important; white-space: nowrap;
}
.table td { padding: .55rem .75rem !important; border-color: #EEF0F3 !important; }
.table-hover tbody tr:hover, .table tbody tr:hover { background: #F7FBF8; }
.table img { border-radius: 4px; }

/* ---------- nav, pagination, badges ---------- */
.nav-tabs .nav-link { color: var(--hk-muted); font-weight: 500; font-size: .85rem; }
.nav-tabs .nav-link.active { color: var(--hk-green) !important; }
.nav-tabs .nav-link.active:after { background-color: var(--hk-green) !important; box-shadow: none !important; }
.nav-pills .nav-link.active { background-color: var(--hk-green) !important; box-shadow: none !important; }
.page-item.active .page-link, .pagination .page-item.active .page-link { background-color: var(--hk-green) !important; border-color: var(--hk-green) !important; box-shadow: none !important; }
.page-link { color: var(--hk-green); border-radius: 4px !important; }
.badge { border-radius: 4px; font-weight: 600; font-size: .72rem; padding: .3em .55em; }
.badge.bg-primary, .badge-primary { background-color: var(--hk-green) !important; }
.alert-primary { background-color: var(--hk-green-soft) !important; color: var(--hk-green-dark) !important; }
.progress .progress-bar, .progress.progress-primary .progress-bar { background-color: var(--hk-green) !important; }
.text-primary { color: var(--hk-green) !important; }
.bg-primary { background-color: var(--hk-green) !important; }
.modal .modal-content { border-radius: 8px; }
.modal .modal-header { padding: .85rem 1rem; border-bottom: 1px solid var(--hk-border); }
.modal .modal-header .modal-title { font-size: 1rem; font-weight: 600; }

/* ---------- auth (login) ---------- */
#auth #auth-left { padding: 3rem 4rem; }
#auth #auth-left .auth-title { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
#auth #auth-right { background: var(--hk-green) !important; }

/* ---------- dark mode: keep the template's dark surfaces, only the accent changes ---------- */
body.theme-dark { background: #151521 !important; color: #c2c2d9; }
body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark h5, body.theme-dark h6 { color: #e4e4f0; }
body.theme-dark .card { background-color: #1e1e2d !important; border-color: #2b2b40 !important; }
body.theme-dark .card .card-header { background-color: #1e1e2d !important; border-bottom-color: #2b2b40 !important; }
body.theme-dark .table thead th, body.theme-dark .b-table thead th { background: #1b1b29; color: #a1a1b8; border-bottom-color: #2b2b40 !important; }
body.theme-dark .table td { border-color: #2b2b40 !important; }
body.theme-dark .table tbody tr:hover { background: #24243a; }
body.theme-dark .sidebar-wrapper { box-shadow: 1px 0 0 #2b2b40; }
body.theme-dark .sidebar-wrapper .menu .sidebar-link, body.theme-dark .sidebar-wrapper .menu .submenu .submenu-item a { color: #c2c2d9; }
body.theme-dark .sidebar-wrapper .menu .sidebar-link:hover { background: #24243a; color: #fff; }
body.theme-dark .form-group label, body.theme-dark label { color: #a1a1b8; }
body.theme-dark .form-control, body.theme-dark .form-select, body.theme-dark .custom-select { border-color: #3a3a52 !important; }
body.theme-dark .modal .modal-header { border-bottom-color: #2b2b40; }