/* ===== MDS HR – theme layer on top of Azia ===== */
:root {
  --hr-primary: #0b8fac;
  --hr-primary-dark: #08718a;
  --hr-accent: #00beda;
  --hr-ink: #1c273c;
  --hr-muted: #7987a1;
  --hr-line: #e3e7ef;
  --hr-bg: #f4f6fa;
  --hr-card: #ffffff;
  --hr-success: #16a34a;
  --hr-warning: #d97706;
  --hr-danger: #dc2626;
  --hr-info: #0284c7;
  --hr-purple: #7c3aed;
  --hr-radius: 12px;
}
body { background: var(--hr-bg); color: var(--hr-ink); font-family: "Roboto", -apple-system, "Segoe UI", sans-serif; font-size: 14px; }
.az-header { border-bottom: 3px solid var(--hr-accent); }
.az-logo img { height: 46px; }
.hr-brand-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--hr-primary); text-transform: uppercase; margin-left: 6px; border-left: 1px solid var(--hr-line); padding-left: 8px; }
.az-header-menu .nav-link { font-weight: 500; }
.az-header-menu .nav-item.active > .nav-link,
.az-header-menu .nav-item.active > .nav-link::before { color: var(--hr-primary); }
.az-menu-sub .nav-link.active { color: var(--hr-primary); font-weight: 600; }
.az-menu-sub .nav-link i { width: 18px; color: var(--hr-muted); }
.az-menu-sub .menu-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--hr-muted); margin: 10px 0 4px; font-weight: 700; }
.az-content { padding-bottom: 30px !important; min-height: calc(100vh - 110px); }
.az-footer { background: #fff; }

/* Page header */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.page-head .crumbs { font-size: 12px; color: var(--hr-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.page-head .crumbs a { color: var(--hr-muted); }
.page-head h2 { font-size: 24px; font-weight: 700; margin: 0; color: var(--hr-ink); }
.page-head .sub { color: var(--hr-muted); margin-top: 2px; }
.page-head .actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Cards */
.card { border: 1px solid var(--hr-line); border-radius: var(--hr-radius); box-shadow: 0 1px 2px rgba(28,39,60,.04); background: var(--hr-card); }
.card-header { background: transparent; border-bottom: 1px solid var(--hr-line); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-header h5, .card-title { font-size: 15px; font-weight: 700; margin: 0; color: var(--hr-ink); }
.card-body { padding: 18px; }
.card + .card { margin-top: 16px; }
.section-gap > * + * { margin-top: 16px; }

/* Buttons */
.btn { border-radius: 8px; font-weight: 500; }
.btn-primary { background: var(--hr-primary); border-color: var(--hr-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--hr-primary-dark); border-color: var(--hr-primary-dark); }
.btn-outline-primary { color: var(--hr-primary); border-color: var(--hr-primary); }
.btn-outline-primary:hover { background: var(--hr-primary); border-color: var(--hr-primary); color: #fff; }
.btn-icon-sm { padding: 3px 8px; font-size: 12px; }
.btn-light { background: #f1f4f9; border-color: #e3e7ef; }

/* Forms */
.form-control, .form-select { border-radius: 8px; border-color: #d4dae5; font-size: 14px; }
.form-control:focus, .form-select:focus { border-color: var(--hr-accent); box-shadow: 0 0 0 .15rem rgba(0,190,218,.2); }
.form-label { font-weight: 500; color: #3b4863; margin-bottom: 4px; font-size: 13px; }
.form-label .req { color: var(--hr-danger); }
.form-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hr-primary); margin: 6px 0 12px; padding-bottom: 6px; border-bottom: 1px dashed var(--hr-line); }
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single { height: 38px; border-color: #d4dae5; border-radius: 8px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filter-bar > div { min-width: 160px; }

/* Tables */
.table { color: var(--hr-ink); }
.table thead th { background: #f6f8fb; color: #3b4863; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--hr-line) !important; white-space: nowrap; }
.table td { vertical-align: middle; border-color: #eef1f6; }
.table-hover tbody tr:hover { background: #f8fbfd; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1px solid #d4dae5; border-radius: 6px; padding: 4px 8px; }
table.dataTable.no-footer { border-bottom: 1px solid var(--hr-line); }

/* Badges */
.hr-badge { font-weight: 600; font-size: 11px; padding: 4px 9px; letter-spacing: .02em; }
.hr-badge-success { background: #dcfce7; color: #166534; }
.hr-badge-warning { background: #fef3c7; color: #92400e; }
.hr-badge-danger { background: #fee2e2; color: #991b1b; }
.hr-badge-info { background: #e0f2fe; color: #075985; }
.hr-badge-primary { background: #e0e7ff; color: #3730a3; }
.hr-badge-secondary { background: #eef1f6; color: #475569; }
.hr-badge-dark { background: #e2e8f0; color: #1e293b; }
.hr-badge-purple { background: #ede9fe; color: #5b21b6; }

/* Avatars */
.avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: #e0f7fb; color: var(--hr-primary-dark); flex-shrink: 0; object-fit: cover; }
.avatar-lg { width: 84px; height: 84px; font-size: 28px; }
.person { display: flex; align-items: center; gap: 10px; }
.person .name { font-weight: 600; color: var(--hr-ink); line-height: 1.2; }
.person .meta { font-size: 12px; color: var(--hr-muted); }

/* KPI tiles */
.kpi { padding: 16px 18px; height: 100%; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.kpi .kpi-label { font-size: 12px; color: var(--hr-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.kpi .kpi-value { font-size: 28px; font-weight: 700; color: var(--hr-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .kpi-foot { font-size: 12px; color: var(--hr-muted); }
.kpi .kpi-icon { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.kpi a.stretched-link { color: inherit; }
.tone-primary .kpi-icon { background: #e0f7fb; color: var(--hr-primary); }
.tone-success .kpi-icon { background: #dcfce7; color: var(--hr-success); }
.tone-warning .kpi-icon { background: #fef3c7; color: var(--hr-warning); }
.tone-danger .kpi-icon { background: #fee2e2; color: var(--hr-danger); }
.tone-info .kpi-icon { background: #e0f2fe; color: var(--hr-info); }
.tone-purple .kpi-icon { background: #ede9fe; color: var(--hr-purple); }
.meter { height: 6px; background: #eef1f6; border-radius: 4px; overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--hr-success); border-radius: 4px; }

/* Lists */
.list-clean { list-style: none; margin: 0; padding: 0; }
.list-clean > li { padding: 10px 0; border-bottom: 1px solid #eef1f6; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.list-clean > li:last-child { border-bottom: 0; }
.empty-state { text-align: center; color: var(--hr-muted); padding: 22px 10px; font-size: 13px; }
.empty-state i { display: block; font-size: 26px; margin-bottom: 6px; opacity: .5; }
.date-chip { width: 44px; text-align: center; border: 1px solid var(--hr-line); border-radius: 8px; padding: 3px 0; line-height: 1.1; flex-shrink: 0; }
.date-chip .d { font-size: 16px; font-weight: 700; }
.date-chip .m { font-size: 10px; text-transform: uppercase; color: var(--hr-muted); }

/* Welcome / check-in */
.welcome { background: linear-gradient(120deg, #0b8fac 0%, #0e7490 60%, #155e75 100%); color: #fff; border: 0; }
.welcome h3 { color: #fff; font-weight: 700; margin: 0; font-size: 22px; }
.welcome .muted { color: rgba(255,255,255,.8); }
.welcome .btn-light { background: #fff; color: var(--hr-primary-dark); border: 0; }
.welcome .btn-outline-light { border-color: rgba(255,255,255,.6); color: #fff; }
.clock { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Attendance register */
.register-wrap { overflow-x: auto; }
.register th, .register td { text-align: center; padding: 6px 4px !important; font-size: 12px; min-width: 30px; }
.register td.emp, .register th.emp { text-align: left; min-width: 190px; position: sticky; left: 0; background: #fff; z-index: 1; }
.register th.wk { background: #f1f5f9; color: #94a3b8; }
.att { display: inline-block; min-width: 24px; border-radius: 5px; font-weight: 700; font-size: 11px; padding: 2px 3px; }
.att-present { background: #dcfce7; color: #166534; } .att-late { background: #fef3c7; color: #92400e; }
.att-half-day { background: #e0f2fe; color: #075985; } .att-absent { background: #fee2e2; color: #991b1b; }
.att-on_leave { background: #e0e7ff; color: #3730a3; } .att-holiday { background: #ede9fe; color: #5b21b6; }
.att-weekly_off { color: #cbd5e1; } .att-unmarked { color: #cbd5e1; } .att-upcoming, .att-not_employed { color: #e2e8f0; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--hr-muted); }

/* Profile */
.profile-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px 12px; font-size: 13px; }
.kv dt { color: var(--hr-muted); font-weight: 500; }
.kv dd { margin: 0; color: var(--hr-ink); font-weight: 500; }
.nav-tabs .nav-link { color: var(--hr-muted); font-weight: 600; border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active { color: var(--hr-primary); border-bottom-color: var(--hr-primary); background: transparent; }

/* Permission tree */
.perm-group { border: 1px solid var(--hr-line); border-radius: 10px; margin-bottom: 14px; }
.perm-group > .perm-group-head { background: #f6f8fb; padding: 10px 14px; border-bottom: 1px solid var(--hr-line); font-weight: 700; border-radius: 10px 10px 0 0; }
.perm-module { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #f1f4f8; }
.perm-module:last-child { border-bottom: 0; }
.perm-module .mod { width: 210px; font-weight: 600; }

/* Payslip */
.payslip { max-width: 820px; margin: 0 auto; }
.payslip table td, .payslip table th { padding: 6px 10px; }
.toast-stack { position: fixed; top: 76px; right: 18px; z-index: 2000; width: 340px; }
.toast-stack .alert { box-shadow: 0 8px 24px rgba(28,39,60,.15); border-radius: 10px; }

@media print {
  .no-print, .az-header, .az-footer, .toast-stack { display: none !important; }
  body { background: #fff; }
  .card { border: 0; box-shadow: none; }
  .az-content { padding: 0 !important; }
}
@media (max-width: 991px) {
  .hr-brand-tag { display: none; }
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn:hover, .nav-link:hover, .dropdown-item:hover, .stretched-link:hover, .az-logo:hover { text-decoration: none; }
.page-head .actions .form-select, .page-head .actions .form-control { min-width: 150px; }
.kpi .kpi-label { padding-right: 46px; }
.kpi .kpi-value.money { font-size: 22px; padding-top: 4px; }