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

/* ── Reset & Base ──────────────────────────────────────────── */
*{box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif!important;background:#F1F5F9!important;color:#0F172A!important}

/* ── Top Header ────────────────────────────────────────────── */
#header_main{
  background:#1E293B!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;
  box-shadow:0 1px 3px rgba(0,0,0,.3)!important;
  height:60px!important;
}
#header_main .header_main_content{height:60px!important}
#header_main .uk-navbar{height:60px!important;min-height:60px!important}
#header_main label{
  font-family:'Inter',system-ui,sans-serif!important;
  font-size:14px!important;
  font-weight:600!important;
  color:#CBD5E1!important;
  letter-spacing:.01em
}
.sSwitch .sSwitchIcon,
.sSwitch .sSwitchIcon:before,
.sSwitch .sSwitchIcon:after{background:#94A3B8!important}
.user_action_icon .material-icons{color:#94A3B8!important}
.uk-dropdown{border-radius:8px!important;box-shadow:0 10px 40px rgba(0,0,0,.2)!important;border:1px solid #E2E8F0!important;padding:6px!important}
.uk-dropdown a{border-radius:6px!important;font-size:13px!important;font-weight:500!important;color:#374151!important;padding:8px 12px!important}
.uk-dropdown a:hover{background:#F1F5F9!important;color:#2563EB!important}

/* ── Sidebar ───────────────────────────────────────────────── */
#sidebar_main{
  background:#0F172A!important;
  border-right:1px solid rgba(255,255,255,.04)!important;
  box-shadow:2px 0 8px rgba(0,0,0,.25)!important;
}
.sidebar_main_header{
  background:#0F172A!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
  padding:16px 0!important;
}
.sidebar_logo img{
  border-radius:10px!important;
  border:2px solid rgba(255,255,255,.1)!important;
}
.menu_section>ul>li>a{
  color:#94A3B8!important;
  font-size:13px!important;
  font-weight:500!important;
  font-family:'Inter',system-ui,sans-serif!important;
  border-radius:0!important;
  padding:10px 20px!important;
  transition:.15s!important;
  border-left:3px solid transparent!important;
}
.menu_section>ul>li>a:hover{
  background:rgba(37,99,235,.12)!important;
  color:#E2E8F0!important;
  border-left-color:#2563EB!important;
}
.menu_section>ul>li.active_main>a,
.menu_section>ul>li.current_section.open>a{
  background:rgba(37,99,235,.15)!important;
  color:#fff!important;
  border-left-color:#2563EB!important;
}
.menu_section>ul>li>a .menu_icon .material-icons{
  color:#64748B!important;
  font-size:20px!important;
  transition:.15s!important;
}
.menu_section>ul>li>a:hover .menu_icon .material-icons,
.menu_section>ul>li.active_main>a .menu_icon .material-icons,
.menu_section>ul>li.current_section.open>a .menu_icon .material-icons{
  color:#60A5FA!important;
}
.menu_section>ul>li>a .menu_title{
  font-family:'Inter',system-ui,sans-serif!important;
  font-weight:500!important;
}
/* Submenu */
.menu_section>ul>li>ul{
  background:#080F1E!important;
  border-top:1px solid rgba(255,255,255,.04)!important;
  border-bottom:1px solid rgba(255,255,255,.04)!important;
}
.menu_section>ul>li>ul li a{
  font-family:'Inter',system-ui,sans-serif!important;
  font-size:12.5px!important;
  font-weight:400!important;
  color:#64748B!important;
  padding:8px 20px 8px 52px!important;
  transition:.12s!important;
}
.menu_section>ul>li>ul li a:hover{
  background:rgba(37,99,235,.1)!important;
  color:#93C5FD!important;
}
/* Sidebar nav chevron arrow */
.menu_section>ul>li.current_section>a:after{
  color:#475569!important;
}

/* ── Page Content ──────────────────────────────────────────── */
#page_content{background:#F1F5F9!important}
#page_content_inner{padding:0!important}

/* ── Cards / db-card ───────────────────────────────────────── */
.db-card,.db-wrap .uk-panel,.uk-panel-box{
  background:#fff!important;
  border-radius:12px!important;
  box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04)!important;
  border:1px solid #E2E8F0!important;
}
.db-card-hdr{
  background:#fff!important;
  border-bottom:1px solid #F1F5F9!important;
  padding:14px 20px!important;
  border-radius:12px 12px 0 0!important;
}
.db-card-hdr h3{
  font-family:'Inter',system-ui,sans-serif!important;
  font-size:13.5px!important;
  font-weight:700!important;
  color:#0F172A!important;
}
.db-card-hdr a{color:#2563EB!important;font-weight:600!important;font-size:12px!important}
.db-card-body{padding:16px 20px!important}

/* ── KPI Cards ─────────────────────────────────────────────── */
.kpi{
  background:#fff!important;
  border-radius:12px!important;
  box-shadow:0 1px 3px rgba(0,0,0,.06)!important;
  border:1px solid #E2E8F0!important;
  border-left:none!important;
  padding:20px!important;
  position:relative;
  overflow:hidden;
}
.kpi::before{
  content:'';
  position:absolute;
  top:0;left:0;bottom:0;
  width:4px;
  border-radius:12px 0 0 12px;
}
.kpi.orange::before,.kpi.blue::before{background:#2563EB}
.kpi.yellow::before{background:#D97706}
.kpi.green::before{background:#16A34A}
.kpi.red::before{background:#DC2626}
.kpi.teal::before{background:#0891B2}
.kpi-val{
  font-family:'Inter',system-ui,sans-serif!important;
  font-size:30px!important;
  font-weight:800!important;
  color:#0F172A!important;
  line-height:1!important;
}
.kpi-lbl{
  font-family:'Inter',system-ui,sans-serif!important;
  font-size:12px!important;
  font-weight:500!important;
  color:#64748B!important;
  margin-top:6px!important;
}
.kpi-sub{font-size:11px!important;color:#94A3B8!important;margin-top:2px!important}
.kpi-icon{color:#0F172A!important;opacity:.06!important;font-size:48px!important}
.kpi:hover{
  box-shadow:0 4px 12px rgba(0,0,0,.1)!important;
  transform:translateY(-1px)!important;
  border-color:#BFDBFE!important;
}

/* ── Module Panels ─────────────────────────────────────────── */
.mod-panel{
  background:#fff!important;
  border-radius:12px!important;
  box-shadow:0 1px 3px rgba(0,0,0,.06)!important;
  border:1px solid #E2E8F0!important;
}
.mod-panel::before{border-radius:12px 12px 0 0!important;height:3px!important}
.mod-panel.taxi::before{background:#2563EB!important}
.mod-panel.food::before{background:#D97706!important}
.mod-panel.freight::before{background:#374151!important}
.mod-title{
  font-family:'Inter',system-ui,sans-serif!important;
  font-size:11px!important;
  font-weight:700!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  color:#94A3B8!important;
}
.mod-big{
  font-family:'Inter',system-ui,sans-serif!important;
  font-size:26px!important;
  font-weight:800!important;
  color:#0F172A!important;
}
.mod-link{color:#2563EB!important;font-weight:600!important;font-size:12px!important}

/* ── Tables ────────────────────────────────────────────────── */
.co-tbl th{
  background:#F8FAFC!important;
  color:#475569!important;
  font-size:11px!important;
  font-weight:700!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
  padding:10px 12px!important;
  border-bottom:1px solid #E2E8F0!important;
}
.co-tbl td{
  font-size:13px!important;
  color:#374151!important;
  padding:10px 12px!important;
  border-bottom:1px solid #F8FAFC!important;
}
.co-tbl tr:hover td{background:#F8FAFC!important}
.co-tbl a{color:#2563EB!important}

/* ── Badges ────────────────────────────────────────────────── */
.badge-active,.bx-approved,.bx-active{
  background:#DCFCE7!important;
  color:#166534!important;
  border-radius:20px!important;
  font-size:11px!important;
  font-weight:700!important;
  padding:3px 10px!important;
}
.badge-suspended,.bx-suspended{
  background:#FEE2E2!important;
  color:#991B1B!important;
  border-radius:20px!important;
  font-size:11px!important;
  font-weight:700!important;
  padding:3px 10px!important;
}
.bx-trial,.bx-pending{
  background:#FEF3C7!important;
  color:#92400E!important;
  border-radius:20px!important;
  font-size:11px!important;
  font-weight:700!important;
  padding:3px 10px!important;
}
.bx-rejected{
  background:#FEE2E2!important;
  color:#991B1B!important;
  border-radius:20px!important;
  font-size:11px!important;
  font-weight:700!important;
  padding:3px 10px!important;
}
span[class^="bdg"],span[class*=" bdg"]{
  border-radius:20px!important;
  font-size:11px!important;
  font-weight:700!important;
  padding:3px 10px!important;
}

/* ── Buttons ───────────────────────────────────────────────── */
.uk-button,.sa-btn{
  font-family:'Inter',system-ui,sans-serif!important;
  font-size:13px!important;
  font-weight:600!important;
  border-radius:8px!important;
  padding:8px 16px!important;
  transition:.15s!important;
  border:none!important;
}
.uk-button-primary,.sa-btn-approve,.sa-btn-b{
  background:#2563EB!important;
  color:#fff!important;
}
.uk-button-primary:hover,.sa-btn-approve:hover,.sa-btn-b:hover{
  background:#1D4ED8!important;
}
.uk-button-danger,.sa-btn-r{
  background:#DC2626!important;
  color:#fff!important;
}
.sa-btn-g{background:#16A34A!important;color:#fff!important}
.sa-btn-g:hover{background:#15803D!important}
.sa-btn-n{
  background:#F1F5F9!important;
  color:#374151!important;
  border:1px solid #E2E8F0!important;
}
.sa-btn-n:hover{background:#E2E8F0!important}

/* ── Form Inputs ───────────────────────────────────────────── */
input[type=text],input[type=email],input[type=number],input[type=password],
input[type=date],input[type=time],select,textarea{
  font-family:'Inter',system-ui,sans-serif!important;
  border:1.5px solid #E2E8F0!important;
  border-radius:8px!important;
  padding:9px 12px!important;
  font-size:13px!important;
  color:#0F172A!important;
  background:#fff!important;
  transition:.15s!important;
}
input:focus,select:focus,textarea:focus{
  outline:none!important;
  border-color:#2563EB!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.1)!important;
}

/* ── Quick Links ───────────────────────────────────────────── */
.ql-btn{
  border-radius:8px!important;
  font-size:12.5px!important;
  font-weight:600!important;
  border:1.5px solid #E2E8F0!important;
  color:#374151!important;
  padding:7px 14px!important;
  transition:.15s!important;
}
.ql-btn:hover{
  border-color:#2563EB!important;
  color:#2563EB!important;
  background:#EFF6FF!important;
  text-decoration:none!important;
}

/* ── Attention rows ────────────────────────────────────────── */
.attn-btn{border-radius:6px!important;font-size:12px!important;font-weight:600!important}
.attn-btn-red{background:#FEE2E2!important;color:#991B1B!important}
.attn-btn-amber{background:#FEF3C7!important;color:#92400E!important}
.attn-btn-blue{background:#EFF6FF!important;color:#1D4ED8!important}

/* ── Greeting & page headings ──────────────────────────────── */
.db-greeting{
  font-family:'Inter',system-ui,sans-serif!important;
  font-size:22px!important;
  font-weight:800!important;
  color:#0F172A!important;
}
.db-sub{
  font-family:'Inter',system-ui,sans-serif!important;
  font-size:13px!important;
  color:#64748B!important;
}
.db-wrap{padding:24px!important}

/* ── Activity Feed ─────────────────────────────────────────── */
.feed-dot{border-radius:50%!important}
.feed-dot.orange,.feed-dot.blue{background:#EFF6FF!important;color:#2563EB!important}
.feed-dot.green{background:#F0FDF4!important;color:#16A34A!important}
.feed-dot.amber{background:#FFFBEB!important;color:#D97706!important}
.feed-dot.red{background:#FEF2F2!important;color:#DC2626!important}
.feed-msg{color:#374151!important;font-size:13px!important}
.feed-time{color:#94A3B8!important;font-size:11.5px!important}

/* ── UIKit Alert overrides ─────────────────────────────────── */
.uk-alert{border-radius:8px!important;font-size:13px!important}
.uk-alert-success{background:#F0FDF4!important;color:#166534!important;border:1px solid #BBF7D0!important}
.uk-alert-danger{background:#FEF2F2!important;color:#991B1B!important;border:1px solid #FECACA!important}
.uk-alert-warning{background:#FFFBEB!important;color:#92400E!important;border:1px solid #FDE68A!important}

/* ── Modals ────────────────────────────────────────────────── */
.uk-modal-dialog{border-radius:14px!important;box-shadow:0 20px 60px rgba(0,0,0,.25)!important}
.modal-overlay.open .modal-box,
.modal-overlay .modal-box,
[id^="modal-"]{border-radius:14px!important;box-shadow:0 20px 60px rgba(0,0,0,.25)!important}

/* ── Page title in header ──────────────────────────────────── */
#header_main .col-md-4 label{
  font-size:14px!important;
  font-weight:600!important;
  color:#CBD5E1!important;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#F1F5F9}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#94A3B8}

/* ── SA page specific overrides ────────────────────────────── */
.req-card{
  border-radius:12px!important;
  border:1px solid #E2E8F0!important;
  box-shadow:0 1px 3px rgba(0,0,0,.05)!important;
}
.sa-stat{
  background:#fff!important;
  border-radius:12px!important;
  border:1px solid #E2E8F0!important;
  box-shadow:0 1px 3px rgba(0,0,0,.06)!important;
}
.sa-stat.green{border-top:3px solid #16A34A!important}
.sa-stat.yellow{border-top:3px solid #D97706!important}
.sa-stat.red{border-top:3px solid #DC2626!important}
.sa-stat.blue{border-top:3px solid #2563EB!important}
.sa-stat-v{
  font-family:'Inter',system-ui,sans-serif!important;
  font-size:28px!important;
  font-weight:800!important;
  color:#0F172A!important;
}
.sa-stat-l{
  font-size:12px!important;
  color:#64748B!important;
  font-weight:500!important;
}

/* ── Tab buttons ───────────────────────────────────────────── */
.tab-btn{
  font-family:'Inter',system-ui,sans-serif!important;
  font-size:13px!important;
  font-weight:600!important;
  border-radius:8px!important;
  border:1.5px solid #E2E8F0!important;
  background:#fff!important;
  color:#64748B!important;
  padding:7px 16px!important;
  transition:.15s!important;
}
.tab-btn.active,.tab-btn:focus{
  background:#EFF6FF!important;
  color:#2563EB!important;
  border-color:#BFDBFE!important;
  outline:none!important;
}
.tab-btn:hover{
  border-color:#BFDBFE!important;
  color:#2563EB!important;
}

/* ── Council portal ────────────────────────────────────────── */
.cp-stat{
  background:#fff!important;
  border-radius:8px!important;
  border:1px solid #E2E8F0!important;
  box-shadow:0 1px 3px rgba(0,0,0,.06)!important;
  padding:8px 12px!important;
}
.cp-stat.flag{border-top:3px solid #D97706!important}
.cp-stat-v{font-family:'Inter',system-ui,sans-serif!important;font-size:18px!important;font-weight:800!important;color:#0F172A!important;line-height:1.15!important}
.cp-stat-l{font-size:11px!important;color:#64748B!important;font-weight:500!important;margin-top:2px!important}