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

:root{
  --sidebar-bg:#0f1a3c;
  --sidebar-bg-2:#132152;
  --sidebar-active:#2f5bff;
  --brand:#2f5bff;
  --bg:#f4f6fb;
  --card-radius:14px;
  --shadow:0 4px 18px rgba(20,30,70,.06);
}

*{font-family:'Roboto',sans-serif;box-sizing:border-box;}
body{background:var(--bg);color:#1f2937;}

/* Sidebar */
.app-sidebar{
  width:270px;min-height:100vh;background:linear-gradient(180deg,var(--sidebar-bg),var(--sidebar-bg-2));
  position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:1030;
}
.app-sidebar .brand{padding:22px 20px;display:flex;align-items:center;gap:10px;color:#fff;}
.app-sidebar .brand .logo-box{width:38px;height:38px;border-radius:10px;background:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:700;}
.app-sidebar .brand small{display:block;color:#9fb0e0;font-size:11px;}
.app-sidebar .nav-section-title{color:#6d7fb8;font-size:11px;letter-spacing:.08em;padding:16px 20px 6px;text-transform:uppercase;}
.app-sidebar .nav-link{color:#c4cdf0;padding:11px 20px;display:flex;align-items:center;gap:12px;font-size:14.5px;border-radius:0;}
.app-sidebar .nav-link:hover{background:rgba(255,255,255,.06);color:#fff;}
.app-sidebar .nav-link.active{background:var(--sidebar-active);color:#fff;font-weight:500;}

/* Topbar */
.app-topbar{
  margin-left:270px;background:#fff;border-bottom:1px solid #eef0f6;padding:14px 26px;
  display:flex;align-items:center;gap:18px;position:sticky;top:0;z-index:1020;
}
.app-topbar .search-box{flex:1;max-width:420px;background:#f4f6fb;border-radius:10px;padding:9px 14px;display:flex;align-items:center;gap:8px;color:#8a93ab;}
.app-content{margin-left:270px;padding:26px;}

/* Cards */
.stat-card{background:#fff;border-radius:var(--card-radius);box-shadow:var(--shadow);padding:16px 18px;display:flex;gap:12px;align-items:flex-start;min-width:0;overflow:hidden;}
.stat-card .icon-box{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.stat-card .stat-card-text{min-width:0;flex:1;}
.stat-card .value{font-size:22px;font-weight:700;color:#111827;line-height:1.2;overflow-wrap:break-word;word-break:break-word;}
.stat-card .label{font-size:12px;color:#8a93ab;overflow-wrap:break-word;word-break:break-word;}

.panel{background:#fff;border-radius:var(--card-radius);box-shadow:var(--shadow);padding:20px;}
.panel-title{font-weight:700;font-size:16px;color:#111827;margin-bottom:14px;}

table.erp-table{width:100%;border-collapse:collapse;}
table.erp-table thead th{font-size:12px;text-transform:uppercase;color:#8a93ab;border-bottom:1px solid #eef0f6;padding:10px 8px;text-align:left;}
table.erp-table tbody td{padding:12px 8px;border-bottom:1px solid #f4f6fb;font-size:14px;}
table.erp-table tbody tr:hover{background:#f9fafc;}

.badge-soft-success{background:#e5f8ef;color:#12b76a;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;}
.badge-soft-danger{background:#fdeceb;color:#f04438;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;}
.badge-soft-warning{background:#fff6e0;color:#e0a300;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;}
.badge-soft-info{background:#eaf0ff;color:#2f5bff;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;}

.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff;border-radius:9px;font-weight:500;}
.btn-brand:hover{background:#2247df;border-color:#2247df;color:#fff;}

.auth-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--sidebar-bg),var(--sidebar-bg-2));}
.auth-card{background:#fff;border-radius:16px;padding:40px;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.25);}

@media (max-width:992px){
  .app-sidebar{transform:translateX(-100%);transition:.25s;}
  .app-sidebar.open{transform:translateX(0);}
  .app-topbar,.app-content{margin-left:0;}
}

/* Landing / Login page */
.landing-wrapper{min-height:100vh;display:flex;flex-wrap:wrap;}
.landing-hero{flex:1 1 480px;background:linear-gradient(160deg,var(--sidebar-bg),var(--sidebar-bg-2));color:#fff;padding:48px;position:relative;overflow:hidden;}
.landing-brand{display:flex;align-items:center;gap:10px;margin-bottom:48px;color:#fff;}
.landing-logo{width:40px;height:40px;border-radius:10px;background:var(--brand);display:flex;align-items:center;justify-content:center;font-size:18px;}
.landing-title{font-size:40px;font-weight:800;line-height:1.15;margin-bottom:18px;}
.landing-subtitle{color:#c4cdf0;max-width:420px;margin-bottom:36px;}
.landing-features{display:flex;flex-direction:column;gap:22px;max-width:420px;}
.landing-feature{display:flex;gap:14px;align-items:flex-start;}
.landing-feature-icon{width:42px;height:42px;flex-shrink:0;border-radius:10px;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;}
.landing-form-side{flex:1 1 380px;background:#f4f6fb;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;}
@media (max-width:900px){
  .landing-title{font-size:30px;}
  .landing-features{display:none;}
}

/* Print — only the report/payslip content should ever print, never the
   app chrome (sidebar, topbar with its search box, buttons). */
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  .app-sidebar, .app-topbar, .d-print-none { display: none !important; }
  .app-content { margin-left: 0 !important; padding: 0 !important; }
  body { background: #fff !important; }
  .panel { box-shadow: none !important; border: none !important; }
  .payslip-sheet { max-width: 100% !important; }
}

/* Login page "Powered by" footer block */
.landing-poweredby{background:#fff;border-radius:16px;padding:16px 24px;width:100%;max-width:400px;margin-top:16px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.06);}

/* Premium corporate payslip */
.payslip-sheet{border:1px solid #eef0f6;font-size:13px;}
.payslip-sheet .erp-table thead th{padding:5px 6px;font-size:10.5px;}
.payslip-sheet .erp-table tbody td{padding:4px 6px;font-size:12.5px;}
.payslip-watermark{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%) rotate(-25deg);font-size:52px;font-weight:900;color:rgba(47,91,255,.05);white-space:nowrap;pointer-events:none;z-index:0;}
.payslip-letterhead{border-bottom:3px solid #2f5bff;padding-bottom:10px;}
.payslip-title-bar{background:#0f1a3c;color:#fff;padding:6px 14px;border-radius:8px;letter-spacing:.05em;font-size:13px;}
.payslip-info-table{width:100%;font-size:12px;}
.payslip-info-table td{padding:2px 6px;border-bottom:1px dashed #eef0f6;line-height:1.35;}
.payslip-info-table td:first-child{color:#8a93ab;width:45%;}
.payslip-info-table td:last-child{font-weight:600;color:#111827;}
.payslip-two-col-table{width:100%;border-collapse:separate;table-layout:fixed;}
.payslip-two-col-table > tbody > tr > td{width:50%;vertical-align:top !important;padding:0 10px;}
.payslip-two-col-table > tbody > tr > td:first-child{padding-left:0;}
.payslip-two-col-table > tbody > tr > td:last-child{padding-right:0;}
.payslip-section-title{font-size:11px;font-weight:700;letter-spacing:.05em;color:#2f5bff;margin-bottom:4px;border-bottom:2px solid #2f5bff;padding-bottom:2px;}
.payslip-amount-table{margin-bottom:8px;}
.payslip-net-pay-box{background:linear-gradient(135deg,#0f1a3c,#132152);color:#fff;border-radius:10px;padding:10px 16px;}
.payslip-net-pay-amount{font-size:19px;}
.payslip-footer{border-top:1px solid #eef0f6;padding-top:8px;font-size:11px;}
.payslip-sheet .mb-3{margin-bottom:.5rem !important;}
.payslip-sheet .mb-4{margin-bottom:.75rem !important;}
.payslip-sheet .mt-2{margin-top:.25rem !important;}
.payslip-sheet .mt-4{margin-top:.75rem !important;}
.payslip-sheet{padding:16px !important;}
.payslip-sheet .alert{padding:.4rem .75rem;font-size:12px;}

@media print {
  @page { margin: 8mm; }
}