/* =====================================================================
   Mega Links Master ERP Control Center — Design System
   Theme: White / Blue / Light Grey — premium corporate SaaS look
   ===================================================================== */

:root{
  --blue-50:#eef4ff; --blue-100:#dbe7ff; --blue-200:#b8d0ff; --blue-500:#155EEF;
  --blue-600:#0f4fd1; --blue-700:#0c3fa8; --blue-900:#0a2a70;
  --grey-50:#f7f8fa; --grey-100:#eef0f3; --grey-200:#e2e5ea; --grey-300:#cdd2da;
  --grey-400:#9aa1ac; --grey-500:#6b7280; --grey-600:#4b5563; --grey-700:#374151;
  --grey-800:#1f2937; --grey-900:#111827;
  --green-500:#12b76a; --green-100:#d1fae5;
  --amber-500:#f79009; --amber-100:#fef3c7;
  --red-500:#f04438; --red-100:#fee4e2;
  --white:#ffffff;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 4px 12px rgba(16,24,40,.08);
  --shadow-lg:0 12px 32px rgba(16,24,40,.12);
  --sidebar-w:264px; --topbar-h:64px;
  --transition:all .18s ease;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--grey-50); color:var(--grey-800); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue-600); text-decoration:none;}
a:hover{color:var(--blue-700);}
h1,h2,h3,h4{margin:0 0 4px; color:var(--grey-900); font-weight:700;}
p{margin:0 0 8px;}
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:var(--grey-300); border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* ---------- Layout shell ---------- */
.app-shell{display:flex; min-height:100vh;}
.main-area{flex:1; margin-left:var(--sidebar-w); min-width:0; display:flex; flex-direction:column; transition:var(--transition);}
.content{padding:24px 28px 60px; max-width:1600px; width:100%; margin:0 auto;}

/* ---------- Sidebar ---------- */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w); background:var(--white);
  border-right:1px solid var(--grey-200); z-index:100; display:flex; flex-direction:column;
  transition:var(--transition); overflow:hidden;
}
.sidebar-brand{display:flex; align-items:center; gap:10px; padding:18px 20px; border-bottom:1px solid var(--grey-100); flex-shrink:0;}
.sidebar-brand .logo-mark{width:38px;height:38px;border-radius:10px;background:var(--blue-600); display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px; flex-shrink:0;}
.sidebar-brand .brand-text{line-height:1.25; overflow:hidden;}
.sidebar-brand .brand-text strong{display:block;font-size:11.5px;letter-spacing:.01em;color:var(--grey-900); white-space:normal;}
.sidebar-brand .brand-text span{font-size:11px;color:var(--grey-500);}
.sidebar-nav{flex:1; overflow-y:auto; padding:12px 12px 24px;}
.nav-group-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--grey-400); font-weight:700; padding:14px 10px 6px;}
.nav-item{display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--radius-sm); color:var(--grey-600); font-size:13.5px; font-weight:500; margin-bottom:2px; cursor:pointer; transition:var(--transition);}
.nav-item .nav-ic{width:18px; text-align:center; flex-shrink:0; font-size:15px;}
.nav-item:hover{background:var(--grey-100); color:var(--grey-900);}
.nav-item.active{background:var(--blue-50); color:var(--blue-600); font-weight:600;}
.nav-item .nav-badge{margin-left:auto; background:var(--red-100); color:var(--red-500); font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:20px;}
.nav-item.disabled{opacity:.45; cursor:default;}
.sidebar-collapsed .sidebar{width:76px;}
.sidebar-collapsed .main-area{margin-left:76px;}
.sidebar-collapsed .brand-text,.sidebar-collapsed .nav-item span.nav-label,.sidebar-collapsed .nav-group-label{display:none;}

/* ---------- Topbar ---------- */
.topbar{
  height:var(--topbar-h); background:var(--white); border-bottom:1px solid var(--grey-200);
  display:flex; align-items:center; gap:16px; padding:0 24px; position:sticky; top:0; z-index:90;
}
.topbar .sidebar-toggle{border:none; background:var(--grey-50); width:36px;height:36px;border-radius:8px; cursor:pointer; color:var(--grey-600); display:flex;align-items:center;justify-content:center; transition:var(--transition); font-size:15px;}
.topbar .sidebar-toggle:hover{background:var(--grey-100); color:var(--grey-900);}
.global-search{flex:1; max-width:440px; position:relative;}
.global-search input{width:100%; padding:9px 14px 9px 36px; border:1px solid var(--grey-200); border-radius:8px; background:var(--grey-50); font-size:13.5px; outline:none; transition:var(--transition);}
.global-search input:focus{border-color:var(--blue-500); background:var(--white); box-shadow:0 0 0 3px var(--blue-50);}
.global-search .search-ic{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--grey-400);}
.search-results{position:absolute; top:44px; left:0; right:0; background:#fff; border:1px solid var(--grey-200); border-radius:10px; box-shadow:var(--shadow-lg); max-height:360px; overflow-y:auto; display:none; z-index:200;}
.search-results.show{display:block;}
.search-result-item{padding:10px 14px; border-bottom:1px solid var(--grey-100); cursor:pointer;}
.search-result-item:hover{background:var(--grey-50);}
.search-result-item small{color:var(--grey-500); display:block;}
.topbar-right{display:flex; align-items:center; gap:8px; margin-left:auto;}
.icon-btn{position:relative; width:38px;height:38px;border-radius:8px;border:none; background:var(--grey-50); color:var(--grey-600); cursor:pointer; display:flex; align-items:center;justify-content:center; transition:var(--transition); font-size:15px;}
.icon-btn:hover{background:var(--grey-100); color:var(--grey-900);}
.icon-btn .dot{position:absolute; top:6px; right:6px; width:8px;height:8px;background:var(--red-500); border-radius:50%; border:2px solid #fff;}
.user-chip{display:flex; align-items:center; gap:9px; padding:5px 10px 5px 5px; border-radius:24px; border:1px solid var(--grey-200); cursor:pointer; background:#fff;}
.user-avatar{width:30px;height:30px;border-radius:50%; background:var(--blue-100); color:var(--blue-700); display:flex;align-items:center;justify-content:center; font-weight:700; font-size:12.5px;}
.user-chip .u-name{font-size:12.5px; font-weight:600; color:var(--grey-800); line-height:1.1;}
.user-chip .u-role{font-size:10.5px; color:var(--grey-500);}

/* dropdown */
.dropdown{position:relative;}
.dropdown-menu{position:absolute; right:0; top:46px; min-width:230px; background:#fff; border:1px solid var(--grey-200); border-radius:10px; box-shadow:var(--shadow-lg); padding:6px; display:none; z-index:200;}
.dropdown-menu.show{display:block;}
.dropdown-menu a, .dropdown-menu button{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 10px; border-radius:7px; border:0; background:none; font-size:13px; color:var(--grey-700); cursor:pointer;}
.dropdown-menu a:hover, .dropdown-menu button:hover{background:var(--grey-100); color:var(--grey-900);}
.dropdown-divider{height:1px; background:var(--grey-100); margin:6px 4px;}
.notif-panel{width:360px; max-height:420px; overflow-y:auto;}
.notif-item{padding:10px; border-radius:8px;}
.notif-item:hover{background:var(--grey-50);}
.notif-item .n-title{font-size:12.5px; font-weight:600; color:var(--grey-800);}
.notif-item .n-time{font-size:11px; color:var(--grey-400);}

/* ---------- Page header ---------- */
.page-header{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap;}
.page-header h1{font-size:21px;}
.breadcrumb{font-size:12.5px; color:var(--grey-500); margin-bottom:4px;}
.breadcrumb a{color:var(--grey-500);}
.page-actions{display:flex; gap:8px; flex-wrap:wrap;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:8px; font-size:13px; font-weight:600; border:1px solid transparent; cursor:pointer; transition:var(--transition); white-space:nowrap;}
.btn-primary{background:var(--blue-500); color:#fff;}
.btn-primary:hover{background:var(--blue-600); color:#fff;}
.btn-secondary{background:#fff; color:var(--grey-700); border-color:var(--grey-200);}
.btn-secondary:hover{background:var(--grey-100);}
.btn-danger{background:var(--red-500); color:#fff;}
.btn-danger:hover{background:#d13c31;}
.btn-success{background:var(--green-500); color:#fff;}
.btn-outline{background:transparent; border-color:var(--blue-200); color:var(--blue-600);}
.btn-sm{padding:6px 11px; font-size:12px;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn-icon{width:34px; height:34px; padding:0; justify-content:center;}

/* ---------- Cards / KPI ---------- */
.grid{display:grid; gap:18px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:1200px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{background:#fff; border:1px solid var(--grey-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);}
.card-body{padding:20px;}
.card-header{padding:16px 20px; border-bottom:1px solid var(--grey-100); display:flex; align-items:center; justify-content:space-between;}
.card-header h3{font-size:14.5px;}

.kpi-card{padding:18px 20px; display:flex; flex-direction:column; gap:10px; border-left:4px solid var(--blue-500); transition:var(--transition);}
.kpi-card:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
.kpi-top{display:flex; align-items:center; gap:8px; justify-content:flex-start;}
.kpi-label{font-size:11px; color:var(--grey-600); font-weight:700; text-transform:uppercase; letter-spacing:.05em;}
.kpi-icon{order:-1; width:auto;height:auto;border-radius:0; display:inline-flex;align-items:center;justify-content:center; font-size:15px; background:none !important; color:var(--blue-500) !important;}
.kpi-value{font-size:28px; font-weight:800; color:var(--blue-700); letter-spacing:-.01em;}
.kpi-trend{font-size:11.5px; font-weight:600;}
.kpi-trend.up{color:var(--green-500);} .kpi-trend.down{color:var(--red-500);}
.ic-blue,.ic-green,.ic-amber,.ic-red{background:none; color:var(--blue-500);}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;}
table.data-table{width:100%; border-collapse:collapse; font-size:13px;}
.data-table thead th{background:var(--grey-50); text-align:left; padding:11px 14px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--grey-500); font-weight:700; border-bottom:1px solid var(--grey-200); white-space:nowrap;}
.data-table tbody td{padding:12px 14px; border-bottom:1px solid var(--grey-100); color:var(--grey-700); vertical-align:middle;}
.data-table tbody tr:hover{background:var(--grey-50);}
.data-table tbody tr:last-child td{border-bottom:none;}
.cell-strong{font-weight:600; color:var(--grey-900);}
.cell-muted{color:var(--grey-400); font-size:12px;}
.row-actions{display:flex; gap:6px;}

/* ---------- Badges ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; text-transform:capitalize;}
.badge::before{content:''; width:6px;height:6px;border-radius:50%; background:currentColor;}
.badge-success{background:var(--green-100); color:#0a8a51;}
.badge-warning{background:var(--amber-100); color:#b45309;}
.badge-danger{background:var(--red-100); color:#c0362a;}
.badge-info{background:var(--blue-100); color:var(--blue-700);}
.badge-neutral{background:var(--grey-100); color:var(--grey-600);}

/* ---------- Forms ---------- */
.form-group{margin-bottom:16px;}
.form-row{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.form-row-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media(max-width:720px){.form-row,.form-row-3{grid-template-columns:1fr;}}
label{display:block; font-size:12.5px; font-weight:600; color:var(--grey-700); margin-bottom:6px;}
label .req{color:var(--red-500);}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=datetime-local],input[type=tel],input[type=url],input[type=file],select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--grey-200); border-radius:8px; font-size:13.5px; background:#fff; color:var(--grey-800); outline:none; transition:var(--transition); font-family:inherit;
}
input:focus,select:focus,textarea:focus{border-color:var(--blue-500); box-shadow:0 0 0 3px var(--blue-50);}
textarea{resize:vertical; min-height:80px;}
.field-error{color:var(--red-500); font-size:11.5px; margin-top:5px;}
.field-hint{color:var(--grey-400); font-size:11.5px; margin-top:5px;}
.form-actions{display:flex; gap:10px; justify-content:flex-end; padding-top:14px; border-top:1px solid var(--grey-100); margin-top:6px;}
.checkbox-group{display:flex; align-items:center; gap:8px;}
.checkbox-group input{width:auto;}

/* ---------- Filters bar ---------- */
.filters-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; padding:14px; background:#fff; border:1px solid var(--grey-200); border-radius:var(--radius-md);}
.filters-bar select, .filters-bar input{width:auto; min-width:150px;}
.filters-bar .spacer{flex:1;}

/* ---------- Pagination ---------- */
.pagination{display:flex; align-items:center; justify-content:space-between; padding:14px 4px 4px; font-size:12.5px; color:var(--grey-500);}
.pagination .pages{display:flex; gap:5px;}
.pagination a, .pagination span{padding:6px 11px; border-radius:7px; border:1px solid var(--grey-200); color:var(--grey-600); font-weight:600;}
.pagination a:hover{background:var(--grey-100);}
.pagination .current{background:var(--blue-500); color:#fff; border-color:var(--blue-500);}

/* ---------- Tabs ---------- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--grey-200); margin-bottom:20px; overflow-x:auto;}
.tab-item{padding:11px 16px; font-size:13px; font-weight:600; color:var(--grey-500); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap;}
.tab-item.active{color:var(--blue-600); border-color:var(--blue-500);}
.tab-panel{display:none;} .tab-panel.active{display:block;}

/* ---------- Modal ---------- */
.modal-backdrop{position:fixed; inset:0; background:rgba(17,24,39,.5); display:none; align-items:center; justify-content:center; z-index:1000; padding:20px;}
.modal-backdrop.show{display:flex;}
.modal{background:#fff; border-radius:var(--radius-lg); width:100%; max-width:640px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); animation:modalIn .18s ease;}
.modal.modal-lg{max-width:880px;}
@keyframes modalIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
.modal-header{padding:18px 22px; border-bottom:1px solid var(--grey-100); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:#fff; z-index:2;}
.modal-header h3{font-size:15.5px;}
.modal-close{width:30px;height:30px;border-radius:8px; border:none; background:var(--grey-100); cursor:pointer; color:var(--grey-600);}
.modal-body{padding:22px;}

/* ---------- Alerts / toasts ---------- */
.alert{padding:12px 16px; border-radius:9px; font-size:13px; margin-bottom:16px; display:flex; align-items:center; gap:10px;}
.alert-success{background:var(--green-100); color:#0a7a48;}
.alert-error{background:var(--red-100); color:#b5342a;}
.alert-info{background:var(--blue-100); color:var(--blue-700);}
.toast-stack{position:fixed; top:18px; right:18px; z-index:2000; display:flex; flex-direction:column; gap:10px;}
.toast{min-width:280px; background:#fff; border-radius:10px; box-shadow:var(--shadow-lg); padding:13px 16px; border-left:4px solid var(--blue-500); font-size:13px; animation:toastIn .2s ease;}
.toast.success{border-color:var(--green-500);} .toast.error{border-color:var(--red-500);}
@keyframes toastIn{from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:translateX(0);}}

/* ---------- Empty / loading states ---------- */
.empty-state{text-align:center; padding:60px 20px; color:var(--grey-500);}
.empty-state .ei{font-size:38px; margin-bottom:12px; opacity:.5;}
.loading-screen{position:fixed; inset:0; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:9999; gap:14px;}
.spinner{width:36px;height:36px; border:3px solid var(--grey-200); border-top-color:var(--blue-500); border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.skeleton{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 37%,var(--grey-100) 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:6px;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* ---------- Login page ---------- */
.auth-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--blue-900); padding:20px;}
.auth-card{background:#fff; width:100%; max-width:400px; border-radius:18px; padding:36px 32px; box-shadow:var(--shadow-lg);}
.auth-logo{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:22px; text-align:center;}
.auth-logo .logo-mark{width:52px;height:52px;border-radius:14px;background:var(--blue-600); display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px;}
.auth-logo h2{font-size:15.5px;}
.auth-logo span{font-size:11.5px; color:var(--grey-500);}

/* ---------- Utility ---------- */
.text-muted{color:var(--grey-500);}
.text-danger{color:var(--red-500);}
.text-success{color:var(--green-500);}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.d-flex{display:flex;} .align-center{align-items:center;} .justify-between{justify-content:space-between;} .gap-8{gap:8px;} .gap-12{gap:12px;}
.w-full{width:100%;}
.progress-bar{height:7px; background:var(--grey-100); border-radius:20px; overflow:hidden;}
.progress-bar span{display:block; height:100%; background:var(--blue-500); border-radius:20px;}

/* ---------- Print ---------- */
@media print{
  .sidebar,.topbar,.filters-bar,.page-actions,.no-print{display:none !important;}
  .main-area{margin-left:0 !important;}
  body{background:#fff;}
}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.mobile-open{transform:translateX(0); box-shadow:var(--shadow-lg);}
  .main-area{margin-left:0;}
  .global-search{display:none;}
}

/* ---------- Dark mode (optional, toggled via body.dark) ---------- */
body.dark{--grey-50:#0f1117; --grey-100:#171a22; --grey-200:#242833; --white:#171a22; background:#0f1117; color:#e5e7eb;}
body.dark .card,body.dark .sidebar,body.dark .topbar,body.dark .modal,body.dark .filters-bar{background:#171a22; border-color:#242833;}
body.dark input,body.dark select,body.dark textarea{background:#0f1117; color:#e5e7eb; border-color:#242833;}
body.dark .data-table thead th{background:#0f1117;}