/* Univerzal Company — light "StarAdmin" style overrides on FlowDash: white surfaces, soft
   peach/orange accent for highlights, dark-ink CTA buttons. */

@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Scheherazade+New:wght@400;700&display=swap');

:root {
  --cf-red: #DFE0C3;         /* warm light accent */
  --cf-red-dark: #000000;    /* jet black for readable text / active states */
  --cf-red-soft: #DFE0C3;    /* single accent shade for highlights */
  --cf-black: #000000;       /* jet black — header, sidebar, CTA buttons */
  --cf-white: #FFFFFF;
  --cf-gray: #7A7F87;
  --cf-gray-light: #ECEDF1;
  --primary: var(--cf-red);
  --dark: var(--cf-black);
}

.bismillah {
  font-family: 'Amiri', 'Scheherazade New', serif;
  text-align: center;
  direction: rtl;
  font-size: 1.5rem;
  line-height: 2.4;
  padding: 0.4rem 0;
  letter-spacing: 0.5px;
}

.bismillah--on-dark {
  color: var(--cf-white);
  background-color: var(--cf-black);
}

.bismillah--on-light {
  color: var(--cf-black);
  background-color: var(--cf-white);
}

/* Premium dark-ink CTA buttons, orange accent for outlines/links/highlights. */
[dir] .btn-primary,
[dir] .btn-primary.disabled,
[dir] .btn-primary:disabled {
  background-color: var(--cf-black) !important;
  background-image: none !important;
  border-color: var(--cf-black) !important;
  color:#fff !important;
}
[dir] .btn-primary:hover,
[dir] .btn-primary:focus,
[dir] .btn-primary.focus,
[dir] .btn-primary:not(:disabled):not(.disabled):active,
[dir] .btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--cf-red) !important;
  background-image: none !important;
  border-color: var(--cf-red) !important;
  color:#000000 !important;
}
[dir] .btn-outline-primary {
  color: var(--cf-red-dark) !important;
  border-color: var(--cf-red) !important;
}
[dir] .btn-outline-primary:hover,
[dir] .btn-outline-primary:focus,
[dir] .btn-outline-primary.focus,
[dir] .btn-outline-primary:not(:disabled):not(.disabled):active,
[dir] .btn-outline-primary:not(:disabled):not(.disabled).active {
  background-color: var(--cf-red) !important;
  border-color: var(--cf-red) !important;
  color: #000000 !important;
}
[dir] .btn-outline-danger:hover,
[dir] .btn-outline-danger:focus,
[dir] .btn-outline-danger.focus,
[dir] .btn-outline-danger:not(:disabled):not(.disabled):active {
  background-color: var(--cf-red) !important;
  border-color: var(--cf-red) !important;
  color: #000000 !important;
}

/* Green action buttons need dark text for clear contrast in every state. */
[dir] .btn-success,
[dir] .btn-success:hover,
[dir] .btn-success:focus,
[dir] .btn-success.focus,
[dir] .btn-success:active,
[dir] .btn-success.active,
[dir] .btn-success.disabled,
[dir] .btn-success:disabled,
[dir] .btn-success:not(:disabled):not(.disabled):active,
[dir] .btn-success:not(:disabled):not(.disabled).active,
[dir] .show > .btn-success.dropdown-toggle,
[dir] .btn-success i,
[dir] .btn-success span {
  color: #000000 !important;
}

.text-primary { color: var(--cf-red-dark) !important; }
[dir] .bg-primary { background-color: var(--cf-red) !important; color:#000000 !important; }
[dir] .bg-primary * { color:#000000 !important; }
[dir] .border-primary { border-color: var(--cf-red) !important; }

a { color: var(--cf-red-dark); }
a:hover, a:focus { color: var(--cf-red); }

[dir] .badge-primary { background-color: var(--cf-red-soft) !important; color: var(--cf-red-dark) !important; }
[dir] .alert-primary { background-color: var(--cf-red-soft) !important; border-color: var(--cf-red) !important; color: var(--cf-red-dark) !important; }

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--cf-red) !important;
  border-color: var(--cf-red) !important;
}
.form-control:focus {
  border-color: var(--cf-red) !important;
  box-shadow: 0 0 0 0.2rem rgba(223, 224, 195, 0.30) !important;
}

[dir] .page-item.active .page-link {
  background-color: var(--cf-red) !important;
  border-color: var(--cf-red) !important;
}
.page-link { color: var(--cf-red-dark); }

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  color: var(--cf-red-dark) !important;
  border-color: var(--cf-red) !important;
}

/* Sidebar / header -> black, with a soft peach highlight for the active item */
[dir] .bg-dark,
[dir] .navbar-dark.bg-dark {
  background-color: var(--cf-black) !important;
}

[dir] .mdk-drawer__content,
[dir] .sidebar.sidebar-dark {
  background-color: var(--cf-black) !important;
}

.sidebar-dark .sidebar-heading {
  color: rgba(255, 255, 255, 0.4) !important;
}
.sidebar-dark .sidebar-link,
.sidebar-dark .sidebar-text,
.sidebar-dark .sidebar-menu-button,
.sidebar-dark .sidebar-menu-text {
  color: #FFFFFF !important;
}

/* Lock icon column width so a slow-loading icon font can never push/wrap the label text. */
.sidebar-dark .sidebar-menu-button {
  display: flex;
  align-items: center;
  margin: 2px 10px;
  border-radius: 10px;
  transition: background-color .15s ease, color .15s ease;
}
.sidebar-dark .sidebar-menu-icon {
  color: #FFFFFF !important;
  flex: 0 0 30px;
  width: 30px;
  min-width: 30px;
  overflow: visible !important;
  padding-right: 4px;
  text-align: center;
}
.sidebar-dark .sidebar-menu-text {
  white-space: nowrap;
  font-weight: 600;
}

.sidebar-dark .sidebar-menu-button:hover,
.sidebar-dark .sidebar-menu-button.active,
[dir=ltr] .sidebar-dark .sidebar-menu > li.sidebar-menu-item.active:not(.open) > .sidebar-menu-button {
  color: #111111 !important;
  background-color: #DFE0C3 !important;
  background-image: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.18);
  border-left: 3px solid var(--cf-red-dark);
}
.sidebar-dark .sidebar-menu-button:hover .sidebar-menu-icon,
.sidebar-dark .sidebar-menu-button.active .sidebar-menu-icon,
[dir=ltr] .sidebar-dark .sidebar-menu > li.sidebar-menu-item.active:not(.open) > .sidebar-menu-button .sidebar-menu-icon {
  color: #000000 !important;
}
.sidebar-dark .sidebar-menu-button:hover .sidebar-menu-text,
.sidebar-dark .sidebar-menu-button.active .sidebar-menu-text,
[dir=ltr] .sidebar-dark .sidebar-menu > li.sidebar-menu-item.active:not(.open) > .sidebar-menu-button .sidebar-menu-text {
  color: #000000 !important;
}
[dir] .sidebar-dark .sidebar-brand-bg {
  background-color: var(--cf-black) !important;
}
.sidebar-dark .sidebar-account strong {
  color: var(--cf-white) !important;
}
.sidebar.sidebar-dark { display:flex;flex-direction:column;min-height:100%; }
.sidebar.sidebar-dark .sidebar-account { margin-top:auto; }
.sidebar-powered-by { flex:0 0 auto;color:#fff !important;background:transparent !important; }
.sidebar-powered-by .text-muted { color:rgba(255,255,255,.72) !important; }
.sidebar-powered-by:hover { background:rgba(223,224,195,.14) !important; }
.app-download-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;color:#000000!important;background:#DFE0C3;border:1px solid #DFE0C3;border-radius:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 22px rgba(0,0,0,.3);text-decoration:none!important;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.app-download-icon>.fab{font-size:20px}.app-download-icon__arrow{position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:17px;height:17px;color:#DFE0C3;background:#000000;border:2px solid #000000;border-radius:50%;font-size:7px}.app-download-icon:hover,.app-download-icon:focus{color:#000000!important;filter:brightness(.96);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 28px rgba(0,0,0,.38)}

/* Keep Bootstrap modals usable on short screens. Modal forms in this app
   wrap .modal-content, so constrain that wrapper as well as the content. */
.modal-dialog > form {
  display: flex;
  max-height: calc(100vh - 3.5rem);
}
.modal-dialog > form > .modal-content {
  max-height: calc(100vh - 3.5rem);
}
.modal-dialog > form > .modal-content > .modal-body {
  overflow-y: auto;
}

/* Page background / cards -> light StarAdmin */
body {
  background-color: #F5F6FA;
}
.card {
  background-color: var(--cf-white);
  border-color: var(--cf-gray-light);
}

/* Remove the native up/down spinner buttons on every number field across the CRM
   (they're easy to bump by accident, on top of the scroll-wheel value change
   already disabled in app.blade.php). */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Shared stat-card widget — used for every metric tile row across the CRM
   (Dashboard, POS, Sales, Purchases, Expenses, Reports) so they all share one look. */
.stat-card{ border:0;border-radius:14px;box-shadow:0 4px 18px rgba(31,41,55,.06); height:100%; }
.stat-card .card-body{ display:flex;align-items:center;gap:14px;padding:18px; }
.stat-card__icon{ display:inline-flex;align-items:center;justify-content:center;flex:0 0 46px;width:46px;height:46px;border-radius:12px;font-size:18px; }
.stat-card__body{ min-width:0; }
.stat-card__label{ color:#9AA0AB;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px; }
.stat-card__value{ color:#1D2027;font-size:19px;font-weight:800;line-height:1.3; }
.stat-card__hint{ color:#9AA0AB;font-size:11.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.stat-card--orange .stat-card__icon{ color:#000000;background:#DFE0C3; }
.stat-card--green .stat-card__icon{ color:#2E7D32;background:#E7F6EC; }
.stat-card--purple .stat-card__icon{ color:#6D4AFF;background:#EFEAFF; }
.stat-card--blue .stat-card__icon{ color:#6B7280;background:#F3F4F6; }
.stat-card--red .stat-card__icon{ color:#C62828;background:#FDEAEA; }
.stat-card--gray .stat-card__icon{ color:#565B66;background:#F1F2F4; }

/* Greeting header (Good Morning, {name}) */
.header-greeting { display:flex;flex-direction:column;line-height:1.25; }
.header-greeting__title { color:#fff;font-size:17px;font-weight:700; }
.header-greeting__title strong { font-weight:800;color:var(--cf-red); }
.header-greeting__subtitle { color:rgba(255,255,255,.55);font-size:11.5px;font-weight:500; }
@media (max-width:767.98px) { .header-greeting{ display:none; } }

/* Attendance dashboard */
.attendance-hero { display:flex;align-items:center;justify-content:space-between;min-height:130px;padding:24px 30px;color:#1D2027;background:#FFFFFF;border-left:4px solid #DFE0C3;border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.10);overflow:hidden; }
.attendance-hero img { width:150px;height:auto;opacity:.9; }
.attendance-hero__eyebrow { color:#000000;font-size:10px;font-weight:700;letter-spacing:1.7px; }
.attendance-hero__title { margin:4px 0 8px;color:#1D2027;font-size:28px;font-weight:700; }
.attendance-hero__date { display:flex;align-items:center;color:#7A7F87;font-size:13px; }
.attendance-hero__date .material-icons { margin-right:7px;font-size:17px;color:#000000; }
.attendance-stat { border:0;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.06);overflow:hidden; }
.attendance-stat .card-body { display:flex;align-items:center;padding:18px; }
.attendance-stat__icon { display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:13px;border-radius:10px; }
.attendance-stat__label { color:#72777f;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px; }
.attendance-stat__value { color:#20252b;font-size:25px;font-weight:700;line-height:1.1; }
.attendance-stat--present .attendance-stat__icon { color:#278447;background:#e7f6ec; }
.attendance-stat--absent .attendance-stat__icon { color:#c62828;background:#fdeaea; }
.attendance-stat--leave .attendance-stat__icon { color:#546e7a;background:#edf2f4; }
.attendance-stat--late .attendance-stat__icon { color:#d17b00;background:#fff3dd; }
.attendance-stat--halfday .attendance-stat__icon { color:#6d4aff;background:#efeaff; }
.attendance-filter-card { border:0;border-radius:10px;box-shadow:0 3px 12px rgba(0,0,0,.05); }
.attendance-filters label { color:#6d737b;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px; }
.attendance-filters .attendance-filter-action { position:relative !important;display:inline-block !important;flex:0 0 145px !important;width:145px !important;height:36px !important;padding:0 !important;white-space:nowrap !important;overflow:visible !important; }
.attendance-filters .attendance-filter-action .attendance-action-icon { position:absolute !important;left:25px !important;right:auto !important;top:50% !important;bottom:auto !important;width:18px !important;height:18px !important;margin:0 !important;transform:translateY(-50%) !important;font-size:17px !important;line-height:18px !important;text-align:center !important; }
.attendance-filters .attendance-filter-action .attendance-action-label { position:absolute !important;left:50% !important;right:auto !important;top:50% !important;bottom:auto !important;display:block !important;width:auto !important;height:auto !important;margin:0 !important;padding:0 !important;transform:translate(-35%,-50%) !important;line-height:16px !important;color:inherit !important;visibility:visible !important;opacity:1 !important; }
.attendance-filters .btn-primary.attendance-filter-action,
.attendance-filters .btn-primary.attendance-filter-action span,
.attendance-filters .btn-primary.attendance-filter-action .material-icons { color:#fff !important; }
.monthly-download-actions { display:flex;align-items:center;gap:8px; }
.monthly-download-actions .btn { position:relative !important;display:inline-block !important;width:120px !important;min-width:120px !important;max-width:120px !important;height:36px !important;padding:0 !important;white-space:nowrap !important;overflow:visible !important;text-align:center !important; }
.monthly-download-actions .btn .material-icons { display:none !important; }
.monthly-download-actions .btn span { position:absolute !important;left:50% !important;top:50% !important;display:block !important;width:auto !important;margin:0 !important;padding:0 !important;transform:translate(-50%,-50%) !important;line-height:16px !important;color:inherit !important;visibility:visible !important;opacity:1 !important; }
.js-month-attendance-edit { cursor:pointer;outline:1px solid transparent;transition:outline-color .15s ease,transform .15s ease; }
.js-month-attendance-edit:hover { position:relative;z-index:2;outline:2px solid var(--cf-red);transform:scale(1.04); }
.attendance-sheet-card { border:0;border-radius:11px;box-shadow:0 6px 20px rgba(0,0,0,.07);overflow:hidden; }
.attendance-sheet-card > .card-header { display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:#fff;border-bottom:2px solid var(--cf-red); }
.attendance-sheet-card__title { display:block;color:#20242a;font-size:15px;font-weight:700; }
.attendance-sheet-card .card-header small { display:block;margin-top:2px;color:#92979e; }
.attendance-sheet-card__date { padding:5px 10px;color:var(--cf-red-dark);background:var(--cf-red-soft);border-radius:20px;font-size:11px;font-weight:700; }
.attendance-sheet-card thead th { border-top:0;background:#f6f7f9;color:#747b84;font-size:10px;text-transform:uppercase;letter-spacing:.45px; }
.attendance-sheet-card tbody tr { transition:background-color .15s ease; }
.attendance-sheet-card tbody tr:hover { background:var(--cf-red-soft); }
.attendance-employee { display:flex;align-items:center;color:#222 !important; }
.attendance-employee:hover { text-decoration:none;color:var(--cf-red-dark) !important; }
.attendance-employee small { display:block;color:#9a9fa5;font-size:10px; }
.attendance-avatar { display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-right:10px;color:#000000;background:#DFE0C3;border-radius:9px;font-weight:700; }
.attendance-fine { color:#a2a6ab;font-size:11px; }
.attendance-fine--due { display:inline-block;padding:4px 8px;color:#6B7280;background:#E5E7EB;border-radius:14px;font-weight:700; }
.attendance-manual-btn { display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:82px; }
.attendance-manual-btn .material-icons { position:static;top:auto;margin:0;font-size:15px; }
.payroll-toolbar-action { position:relative !important;display:inline-block !important;width:205px !important;min-width:205px !important;max-width:205px !important;height:38px !important;padding:0 !important;white-space:nowrap !important;overflow:visible !important;text-align:center !important; }
.payroll-toolbar-action .material-icons { display:none !important; }
.payroll-toolbar-action span { position:absolute !important;left:50% !important;right:auto !important;top:50% !important;display:block !important;width:auto !important;margin:0 !important;padding:0 !important;transform:translate(-50%,-50%) !important;line-height:16px !important;visibility:visible !important;opacity:1 !important;color:inherit !important; }
.bulk-adjustment-head,.bulk-adjustment-row { display:grid;grid-template-columns:120px 1.35fr 125px 1fr 38px;gap:8px;align-items:center; }
.bulk-adjustment-head { margin-bottom:5px;color:#747b84;font-size:9px;font-weight:700;text-transform:uppercase; }
.bulk-adjustment-row { margin-bottom:8px; }
.bulk-adjustment-row .form-control { min-width:0; }
.bulk-adjustment-basic .form-control { color:#26384f;background:#edf1f5;font-weight:700; }
.bulk-adjustment-remove { width:38px;height:38px;padding:0;font-size:20px; }
.bulk-adjustment-add-actions { display:flex;gap:7px; }
@media (max-width:767.98px) { .bulk-adjustment-head { display:none; }.bulk-adjustment-row { grid-template-columns:1fr 1fr; }.bulk-adjustment-row .bulk-adjustment-remove { grid-column:2;justify-self:end; } }
.monthly-department-tabs { display:flex;gap:10px;padding:3px 1px 8px;overflow-x:auto; }
.monthly-department-tab { display:flex;align-items:center;flex:0 0 auto;min-width:155px;padding:12px 15px;color:#343a40 !important;background:#fff;border:1px solid #dce0e5;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,.05);transition:all .18s ease; }
.monthly-department-tab:hover { color:var(--cf-red-dark) !important;border-color:var(--cf-red);text-decoration:none;transform:translateY(-2px); }
.monthly-department-tab.active { color:var(--cf-red-dark) !important;background:var(--cf-red-soft);border-color:var(--cf-red);box-shadow:0 6px 15px rgba(223,224,195,.28); }
.monthly-department-tab .material-icons { margin-right:10px;font-size:23px; }
.monthly-department-tab span { font-size:12px;font-weight:700; }
.monthly-department-tab small { display:block;margin-top:2px;color:#8b9198;font-size:9px;font-weight:500; }
.monthly-department-tab.active small { color:var(--cf-red-dark);opacity:.75; }
.monthly-overview-card { border-top:0; }
.monthly-overview-header { color:#1D2027;background:linear-gradient(110deg,#F4F5F7 0%,#FFFFFF 60%,#E5E7EB 100%) !important;border-bottom:3px solid var(--cf-red) !important; }
.monthly-overview-header .attendance-sheet-card__title { color:#1D2027;font-size:17px; }
.monthly-overview-header small { color:#7A7F87 !important; }
.monthly-overview-header .attendance-sheet-card__date { color:#fff;background:var(--cf-red); }
.monthly-attendance-wrap { max-height:68vh;background:#f7f8fa; }
.monthly-attendance-table { width:max-content;min-width:100%;font-size:11px; }
.monthly-attendance-table th,.monthly-attendance-table td { min-width:47px;padding:9px 6px;text-align:center;vertical-align:middle; }
.monthly-attendance-table thead th { position:sticky;top:0;z-index:3;color:#565B66;background:#F8F9FB; }
.monthly-attendance-table .monthly-employee-col { position:sticky;left:0;z-index:2;min-width:220px;text-align:left;background:#fff;box-shadow:3px 0 5px rgba(0,0,0,.05); }
.monthly-attendance-table thead .monthly-employee-col { z-index:4;background:#F8F9FB; }
.monthly-employee-col a { color:#222 !important;font-size:12px; }
.monthly-employee-col a:hover { color:var(--cf-red-dark) !important;text-decoration:none; }
.monthly-employee-col small { display:block;margin-top:3px;color:#777f88;font-size:9px;font-weight:500; }
.monthly-day-head span,.monthly-day-head small { display:block; }
.monthly-day-head small { color:#aaa;font-size:8px; }
.month-status { font-size:10px;font-weight:800; }
.month-status--present { color:#ffffff !important;background:#39b54a !important;font-weight:800; }
.month-status--late { color:#744100 !important;background:#f5cf82 !important; }
.month-status--absent { color:#8d111b !important;background:#f4b7bd !important; }
.month-status--leave { color:#0c4d8f !important;background:#b7d5f5 !important; }
.month-status--off { color:#155b2b !important;background:#bce3c7 !important;font-weight:800; }
.month-status--weekly-off { color:#ffffff !important;background:#d21f3c !important;font-weight:800; }
.month-total { color:#111;background:#f5f5f5;font-weight:700; }
.monthly-legend span { display:inline-block;margin:0 4px 0 12px;padding:3px 6px;border-radius:4px;font-size:9px;font-weight:700; }
.page-back-button { display:inline-flex;align-items:center;gap:5px;margin-left:15px;padding:7px 13px;border-radius:7px;font-weight:600; }
.page-back-button .material-icons { font-size:17px; }
.page-back-button:hover,.page-back-button:focus { color:#fff !important;background:var(--cf-red) !important;border-color:var(--cf-red) !important; }
@media (max-width:767.98px) {
  .attendance-hero { min-height:110px;padding:20px; }
  .attendance-hero img { width:95px; }
  .attendance-hero__title { font-size:23px; }
  .attendance-filters .btn { margin-top:10px; }
}

/* Shared CRM design system — consistent polished light UI across every module. */
.page__heading-container { padding-top:6px; }
.page__heading {
  position:relative;
  min-height:76px;
  padding:16px 22px !important;
  align-items:center !important;
  color:#1D2027;
  background:transparent;
  border:0 !important;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}
.page__heading::after { content:none; }
.page__heading h1 { position:relative;z-index:1;color:#1D2027;font-size:23px;font-weight:800;letter-spacing:-.3px; }
.page__heading .breadcrumb { position:relative;z-index:1;background:transparent;padding-left:0; }
.page__heading .breadcrumb-item,.page__heading .breadcrumb-item a { color:#9AA0AB !important;font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase; }
.page__heading .breadcrumb-item.active { color:var(--cf-red-dark) !important; }
.page__heading .breadcrumb-item + .breadcrumb-item::before { color:#C7CBD1; }
.page__heading .page-back-button { position:relative;z-index:2;color:#565B66;border-color:var(--cf-gray-light);background:#fff; }
.page__container { padding-top:20px; }
.page__container > .card,.page__container .row > [class*="col-"] > .card { border:0;border-radius:14px;box-shadow:0 4px 18px rgba(31,41,55,.06); }
.page__container .card-header { min-height:52px;padding:14px 18px;color:#24282d;background:#fff;border-bottom:1px solid var(--cf-gray-light);font-size:14px; }
.page__container .card-header.font-weight-bold,.page__container .card-header .font-weight-bold { font-weight:700 !important; }
.page__container .card-body { padding:18px; }
.page__container .table { margin-bottom:0;color:#27384f; }
.page__container .table thead th { padding:11px 13px;color:#7A7F87;background:#F8F9FB;border-color:var(--cf-gray-light);font-size:9px;font-weight:700;letter-spacing:.55px;text-transform:uppercase;vertical-align:middle; }
.page__container .table tbody td { padding:11px 13px;border-color:#e3e6ea;vertical-align:middle; }
.page__container .table-hover tbody tr { transition:background-color .15s ease,transform .15s ease; }
.page__container .table-hover tbody tr:hover { background:var(--cf-red-soft); }
.page__container .form-control { min-height:38px;border:1px solid #dce0e5;border-radius:8px;background-color:#fff;transition:border-color .15s ease,box-shadow .15s ease; }
.page__container textarea.form-control { min-height:90px; }
.page__container label { margin-bottom:6px;color:#606872;font-size:11px;font-weight:700;letter-spacing:.25px; }
.page__container .btn { flex-grow:0;width:auto;border-radius:8px;font-weight:600;box-shadow:none;transition:all .15s ease; }
.equal-action-buttons { gap:10px; }
.equal-action-buttons .btn { display:inline-flex;align-items:center;justify-content:center;flex:0 0 255px;width:255px;min-height:38px;margin:0 !important;padding:8px 13px;white-space:nowrap; }
.page__container .btn-primary { box-shadow:0 4px 12px rgba(43,47,56,.18); }
.page__container .attendance-filters .attendance-filter-action { flex:0 0 145px;width:145px;min-width:145px;max-width:145px;height:36px; }
.page__container .attendance-filters a.attendance-filter-action { color:#fff !important;text-decoration:none !important; }
.page__container .attendance-filters a.btn-outline-secondary.attendance-filter-action { color:#68727d !important; }
.page__container .btn:hover { transform:translateY(-1px); }
.page__container .badge { padding:5px 8px;border-radius:20px;font-size:9px;font-weight:700;letter-spacing:.2px; }
.page__container .alert { border:0;border-left:4px solid;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.05); }
.page__container .alert-success { border-left-color:#2e7d32; }
.page__container .alert-danger { border-left-color:var(--cf-red); }
.page__container .pagination { gap:4px; }
.page__container .page-link { border:0;border-radius:6px !important;box-shadow:0 2px 6px rgba(0,0,0,.06); }
.page__container .card-group-row__card .card-body { position:relative;overflow:hidden; }
.page__container .card-group-row__card .card-header__title { color:#7a818a;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase; }
.page__container .card-group-row__card .h4 { color:#21252a;font-size:24px;font-weight:700; }

/* Slightly larger, easier-to-read typography in the main white workspace only.
   This deliberately excludes the black sidebar and its powered-by footer. */
.mdk-drawer-layout__content.page .page__heading h1 { font-size:26px; }
.mdk-drawer-layout__content.page .page__heading .breadcrumb-item,
.mdk-drawer-layout__content.page .page__heading .breadcrumb-item a { font-size:10px; }
.mdk-drawer-layout__content.page .page__container { font-size:15px; }
.mdk-drawer-layout__content.page .page__container .card-header { font-size:15px; }
.mdk-drawer-layout__content.page .page__container .table thead th { font-size:10.5px; }
.mdk-drawer-layout__content.page .page__container .table tbody td { font-size:14px; }
.mdk-drawer-layout__content.page .page__container label { font-size:12px; }
.mdk-drawer-layout__content.page .page__container .form-control,
.mdk-drawer-layout__content.page .page__container .custom-select { font-size:14.5px; }
.mdk-drawer-layout__content.page .page__container .btn { font-size:14px; }
.mdk-drawer-layout__content.page .page__container .badge { font-size:10px; }
.mdk-drawer-layout__content.page .page__container small { font-size:11.5px; }
.mdk-drawer-layout__content.page .page__container .stat-card__label,
.mdk-drawer-layout__content.page .page__container .pos-stat .label,
.mdk-drawer-layout__content.page .page__container .sales-stat .label,
.mdk-drawer-layout__content.page .page__container .expense-stat .label,
.mdk-drawer-layout__content.page .page__container .purchase-stat .label,
.mdk-drawer-layout__content.page .page__container .report-stat small { font-size:11.5px; }
.mdk-drawer-layout__content.page .page__container .stat-card__value { font-size:21px; }
.modal-content { border:0;border-radius:14px;box-shadow:0 20px 50px rgba(31,41,55,.16);overflow:hidden; }
.modal-header { color:#1D2027;background:#fff;border-bottom:1px solid var(--cf-gray-light); }
.modal-header .modal-title { color:#1D2027;font-weight:700; }
.modal-header .close { color:#565B66;text-shadow:none;opacity:.8; }
.modal-footer { background:#f7f8fa;border-top:1px solid #e4e7eb; }
@media (max-width:767.98px) {
  .page__heading-container { padding-top:0 !important; }
  .page__heading { min-height:auto;padding:6px 4px !important; }
  .page__heading h1 { font-size:20px; }
  .page__container { padding-top:6px;padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important; }
  .page__container .card-body { padding:14px; }
  .equal-action-buttons { flex-direction:column; }
  .equal-action-buttons .btn { flex-basis:auto;width:100%; }
}

/* Header logo — desktop */
.navbar-brand--logo{ width:256px; overflow:visible; }
.navbar-brand--logo img{
  height:56px; max-width:230px; width:auto; display:block; margin:0 auto;
  object-fit:contain; transform:translate(-16px,14px);
}

/* Login page — redesigned; styles now scoped in resources/views/components/layouts/guest.blade.php
   and resources/views/auth/login.blade.php so they never leak into the rest of the app. */
/* Mobile application shell */
.mobile-app-nav{display:none}
@media (max-width: 767.98px){
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom));background:#f5f7fb}
  /* Bottom nav — jet black like the header/sidebar, white icons/labels so they're
     actually legible (they were a washed-out gray on white before). */
  .mobile-app-nav{position:fixed;z-index:1100;display:flex;align-items:stretch;justify-content:flex-start;left:0;right:0;bottom:0;min-height:64px;padding:7px 5px calc(7px + env(safe-area-inset-bottom));overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding-inline:5px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;background:#000000;border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -10px 30px rgba(0,0,0,.3)}
  .mobile-app-nav::-webkit-scrollbar{display:none}
  .mobile-app-nav a{display:flex;flex:0 0 68px;min-width:68px;min-height:48px;flex-direction:column;align-items:center;justify-content:center;scroll-snap-align:start;color:#fff!important;text-decoration:none;font-size:10px;font-weight:700;gap:2px}
  .mobile-app-nav a span,.mobile-app-nav a i{color:#fff!important}.mobile-app-nav a i{display:block;width:24px;font-size:20px;line-height:1;text-align:center}.mobile-app-nav a.active{color:#fff!important;background:rgba(255,255,255,.1);border-radius:12px}.mobile-app-nav__primary{margin-top:0!important;width:auto;height:auto;border:0;border-radius:12px;background:transparent;color:#fff!important;box-shadow:none}
  /* Header — locked to a fixed height on mobile, no shrink/scroll effects, and the
     logo is both smaller and freed from the desktop nudge (that nudge was inline
     before and applied unscoped on mobile too, spilling the logo out of the header
     — that's what looked like "the black bar getting smaller" while scrolling). */
  #header.mdk-header{ position:fixed!important; top:0; left:0; right:0; }
  .navbar-main{min-height:58px;height:58px}
  .navbar-brand--logo{ width:auto!important; overflow:visible; }
  .navbar-brand--logo img{ height:40px; max-width:175px; transform:translateY(4px); }
  .page__heading{padding:6px 0!important}.page__heading h1{font-size:1.45rem}.page-back-button{display:none}
  .page__container{padding-top:6px!important;padding-right:12px!important;padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;padding-left:12px!important}.card{border-radius:14px;margin-bottom:14px;box-shadow:0 6px 20px rgba(31,41,55,.06)}.card-body{padding:16px}
  .mobile-stat-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-right:0;margin-bottom:12px;margin-left:0}
  .mobile-stat-grid>[class*="col-"]{width:auto;max-width:none;padding:0;margin:0}
  .mobile-stat-grid .stat-card{min-height:64px;margin:0;border-radius:11px}
  .mobile-stat-grid .stat-card .card-body{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;padding:9px 12px}
  .mobile-stat-grid .stat-card__icon{width:34px;height:34px;flex-basis:34px;border-radius:9px;font-size:13px}
  .mobile-stat-grid .stat-card__label{font-size:9.5px;line-height:1.2;letter-spacing:.3px;white-space:normal}
  .mobile-stat-grid .stat-card__value{margin-top:2px;font-size:15px!important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-stat-grid .stat-card__hint{margin-top:1px;font-size:10px;line-height:1.2}
  .table-responsive,.card-body>.table{overflow-x:auto;-webkit-overflow-scrolling:touch}.table{min-width:620px}.table td,.table th{white-space:nowrap;padding:.65rem}
  input.form-control,select.form-control,textarea.form-control,.btn{min-height:44px;font-size:16px}.btn-sm{min-height:36px;font-size:13px}.input-group .form-control{min-height:48px}
  #cart{min-width:690px}.row>[class*="col-"]{margin-bottom:4px}.alert{border-radius:12px}
}

/* Native-feeling mobile application shell. These rules intentionally stay below
   the desktop design system so the installed Android shell and mobile browser
   share one compact touch-first interface without changing desktop screens. */
@media (max-width: 767.98px) {
  html { background:#EEF0EC;scroll-padding-top:72px; }
  body.layout-default { min-width:320px;padding-bottom:calc(84px + env(safe-area-inset-bottom));background:#EEF0EC;color:#171A1A;font-size:15px;-webkit-tap-highlight-color:transparent; }
  .bismillah { display:none!important; }

  #header.mdk-header { height:64px!important;padding-top:env(safe-area-inset-top);background:#000!important;box-shadow:0 8px 24px rgba(0,0,0,.22); }
  #header .mdk-header__content,.navbar-main { height:64px!important;min-height:64px!important; }
  #navbar .container-fluid { position:relative;height:64px;padding:0 10px!important; }
  #navbar .navbar-toggler { position:absolute;z-index:4;left:8px;top:10px;display:grid!important;place-items:center;width:44px;height:44px;margin:0;padding:10px;border:0;border-radius:13px;background:rgba(255,255,255,.08); }
  #navbar .navbar-toggler-icon { width:21px;height:21px; }
  #navbar .navbar-brand--logo { position:absolute;z-index:3;left:50%;top:50%;width:min(48vw,190px)!important;height:54px;margin:0!important;transform:translate(-50%,-50%); }
  #navbar .navbar-brand--logo img { width:100%;height:46px;max-width:190px;object-fit:contain;object-position:center;transform:none!important; }
  #navbar .navbar-nav { position:absolute;z-index:4;right:8px;top:10px;height:44px;margin:0!important; }
  #navbar .navbar-nav .nav-link { display:grid;place-items:center;width:44px;height:44px;padding:4px!important;border-radius:50%;background:rgba(255,255,255,.08); }
  #navbar .navbar-nav .avatar,#navbar .navbar-nav .avatar-img { width:34px!important;height:34px!important;margin:0!important; }
  #account_menu.dropdown-menu { position:fixed!important;top:62px!important;right:10px!important;left:auto!important;width:min(310px,calc(100vw - 20px));margin:0;border:0;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.22);transform:none!important; }

  .mdk-header-layout__content { background:#EEF0EC; }
  .page__heading-container,.page__heading-container--dashboard { padding:0 16px!important;background:#EEF0EC; }
  .page__heading,.page__heading-container--dashboard .page__heading { min-height:60px!important;padding:14px 0 9px!important;align-items:center!important; }
  .page__heading .breadcrumb { display:none; }
  .page__heading h1 { overflow:hidden;color:#171A1A;font-size:22px!important;font-weight:850;line-height:1.2;letter-spacing:-.45px;text-overflow:ellipsis;white-space:nowrap; }
  .page__heading h1::after { display:block;width:28px;height:3px;margin-top:7px;border-radius:99px;background:#DFE0C3;content:""; }
  .page__container,.page__container--dashboard { padding:4px 12px calc(104px + env(safe-area-inset-bottom))!important; }
  .page__container > .row { margin-right:-5px;margin-left:-5px; }
  .page__container > .row > [class*="col-"] { padding-right:5px;padding-left:5px; }

  .page__container > .card,.page__container .row > [class*="col-"] > .card,.page__container form.card { margin-bottom:12px;border:1px solid rgba(15,23,42,.045)!important;border-radius:17px!important;background:#FFF;box-shadow:0 7px 22px rgba(16,24,20,.065)!important;overflow:visible; }
  .page__container .card-header { min-height:48px;padding:13px 15px;border-bottom:1px solid #ECEEEA;border-radius:17px 17px 0 0!important;background:#FFF;font-size:14px; }
  .page__container .card-body { padding:14px!important; }
  .page__container .card-footer { padding:12px 14px;border-top:1px solid #ECEEEA;background:#FFF;border-radius:0 0 17px 17px; }
  .page__container h2 { font-size:21px;letter-spacing:-.35px; }
  .page__container h3 { font-size:19px; }
  .page__container h4 { font-size:16px;font-weight:800; }
  .page__container p,.page__container td { font-size:13px; }
  .page__container small { font-size:11px; }

  .page__container > form.card.card-body.py-2 { padding:12px!important; }
  .page__container > form.card .d-flex { display:grid!important;grid-template-columns:minmax(0,1fr);gap:7px;align-items:stretch!important; }
  .page__container > form.card .d-flex > strong { margin:0!important;font-size:11px;text-transform:uppercase;letter-spacing:.45px; }
  .page__container > form.card select.form-control { width:100%;max-width:none!important;margin:0!important; }
  .page__container > form.card .d-flex > small { line-height:1.35; }

  .page__container label { margin-bottom:6px;color:#555D5B;font-size:11px;font-weight:800;letter-spacing:.35px;text-transform:uppercase; }
  .page__container .form-group { margin-bottom:14px; }
  .page__container .form-control { width:100%;min-height:48px;padding:10px 13px;border:1px solid #DDE1DC;border-radius:12px;background:#FAFBF9;font-size:16px;box-shadow:none; }
  .page__container textarea.form-control { min-height:96px; }
  .page__container .input-group-text { border-color:#DDE1DC;border-radius:12px 0 0 12px; }
  .page__container .custom-select { min-height:48px;border-radius:12px; }
  .page__container .btn { min-height:44px;padding:10px 14px;border-radius:12px;font-size:14px;font-weight:800;touch-action:manipulation; }
  .page__container .btn:active,.mobile-app-nav a:active { transform:scale(.97); }
  .page__container .btn-block { width:100%; }
  .page__container .btn-sm { min-height:38px;padding:8px 11px;font-size:12px;border-radius:10px; }
  .page__container .d-flex > .btn + .btn { margin-left:6px; }

  .page__container .alert { margin-bottom:12px;padding:12px 14px;border:0!important;border-radius:14px;box-shadow:none; }
  .page__container .badge { padding:6px 9px;font-size:9px; }
  .page__container hr { margin:16px 0;border-color:#ECEEEA; }

  .mobile-stat-grid { gap:8px!important;margin-right:0!important;margin-bottom:12px!important;margin-left:0!important; }
  .mobile-stat-grid .stat-card { min-height:68px;border-radius:15px!important; }
  .mobile-stat-grid .stat-card .card-body { grid-template-columns:38px minmax(0,1fr)!important;gap:11px!important;padding:10px 12px!important; }
  .mobile-stat-grid .stat-card__icon { width:38px!important;height:38px!important;flex-basis:38px!important;border-radius:11px!important;font-size:14px!important; }
  .mobile-stat-grid .stat-card__label { font-size:9px!important;letter-spacing:.45px; }
  .mobile-stat-grid .stat-card__value { font-size:16px!important; }
  .mobile-stat-grid .stat-card__hint { font-size:10px!important; }

  .table-responsive,.mobile-table-scroll { position:relative;width:100%;margin:0;overflow-x:auto!important;overflow-y:hidden;border:1px solid #E7EAE5;border-radius:13px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:x proximity; }
  .page__container .table { width:max-content;min-width:100%!important;background:#FFF; }
  .page__container .table thead th { position:sticky;top:0;padding:10px 12px;background:#F2F4F0;font-size:9px;white-space:nowrap; }
  .page__container .table tbody td,.page__container .table tfoot td,.page__container .table tfoot th { padding:11px 12px;white-space:nowrap; }
  .page__container .table th:first-child,.page__container .table td:first-child { position:sticky;left:0;z-index:1;background:inherit;box-shadow:6px 0 12px -12px #000; }
  .page__container .table thead th:first-child { z-index:3;background:#F2F4F0; }
  .page__container .pagination { justify-content:center;margin-top:12px; }

  .modal { padding:0!important; }
  .modal-dialog,.modal-dialog.modal-dialog-centered { position:absolute;right:0;bottom:0;left:0;width:100%;max-width:none;margin:0;min-height:0;align-items:flex-end; }
  .modal-dialog > form { width:100%;max-height:88dvh; }
  .modal-content,.modal-dialog > form > .modal-content { width:100%;max-height:88dvh;border-radius:22px 22px 0 0!important;box-shadow:0 -18px 48px rgba(0,0,0,.22)!important;overflow:hidden; }
  .modal-header { padding:16px 17px 12px;border-bottom:1px solid #ECEEEA; }
  .modal-header::before { position:absolute;top:6px;left:50%;width:42px;height:4px;border-radius:99px;background:#D5D8D3;content:"";transform:translateX(-50%); }
  .modal-title { margin-top:3px;font-size:17px; }
  .modal-body { padding:14px 15px;overflow-y:auto; }
  .modal-footer { padding:12px 15px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #ECEEEA;background:#FFF; }

  .product-suggestions { max-height:min(300px,42dvh)!important;border-radius:14px!important;box-shadow:0 18px 46px rgba(0,0,0,.22)!important; }
  .product-suggestion { min-height:58px;padding:11px 12px!important; }
  .product-suggestion strong { color:#171A1A;font-size:13px; }
  .product-suggestion small { margin-top:2px;font-size:10px;white-space:normal; }

  .mobile-app-nav { min-height:72px;padding:7px 6px calc(7px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.98);box-shadow:0 -12px 32px rgba(0,0,0,.24);backdrop-filter:blur(16px); }
  .mobile-app-nav a { position:relative;flex:0 0 66px;min-width:66px;min-height:56px;padding:4px 2px;border-radius:13px;font-size:9.5px;gap:4px;scroll-snap-align:center; }
  .mobile-app-nav a i { width:25px;font-size:19px;transition:transform .18s ease; }
  .mobile-app-nav a.active { color:#FFF!important;background:rgba(223,224,195,.16); }
  .mobile-app-nav a.active::before { position:absolute;top:2px;left:50%;width:22px;height:3px;border-radius:99px;background:#DFE0C3;content:"";transform:translateX(-50%); }
  .mobile-app-nav a.active i { transform:translateY(1px); }

  .dashboard-quick-actions { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
  .dashboard-quick-actions .btn { width:100%!important;margin:0!important;white-space:normal; }
}

/* Flutter app visual system: ink shell, royal-blue actions, white rounded
   surfaces and compact Material-style icon tiles. This final layer lets every
   legacy module inherit one UI without changing module behaviour. */
:root {
  --cf-red:#315CF5;--cf-red-dark:#2563EB;--cf-red-soft:#EEF2FF;--cf-black:#0B1220;
  --cf-gray:#667085;--cf-gray-light:#E4E7EC;--primary:#315CF5;--dark:#0B1220;
  --app-ink:#0B1220;--app-blue:#315CF5;--app-blue-strong:#2563EB;
  --app-blue-soft:#EEF2FF;--app-canvas:#F4F6FA;--app-muted:#667085;
  --app-border:#E4E7EC;--app-radius:22px;--app-control-radius:14px;
  --app-shadow:0 8px 28px rgba(15,23,42,.07);
}
html,body,body.layout-default,.mdk-header-layout__content,.mdk-drawer-layout__content.page{background:var(--app-canvas)!important;color:var(--app-ink)}
[dir] .bg-dark,[dir] .navbar-dark.bg-dark,#navbar,.navbar-main,[dir] .preloader,[dir] .mdk-drawer__content,[dir] .sidebar.sidebar-dark{background:var(--app-ink)!important}

[dir] .btn-primary,[dir] .btn-primary.disabled,[dir] .btn-primary:disabled,
[dir] .btn-success,[dir] .btn-success.disabled,[dir] .btn-success:disabled{
  color:#fff!important;background:var(--app-blue)!important;border-color:var(--app-blue)!important;
  border-radius:var(--app-control-radius)!important;box-shadow:0 8px 18px rgba(49,92,245,.20)!important
}
[dir] .btn-primary:hover,[dir] .btn-primary:focus,[dir] .btn-primary:active,
[dir] .btn-success:hover,[dir] .btn-success:focus,[dir] .btn-success:active{color:#fff!important;background:var(--app-blue-strong)!important;border-color:var(--app-blue-strong)!important}
[dir] .btn-primary i,[dir] .btn-primary span,[dir] .btn-success i,[dir] .btn-success span{color:#fff!important}
[dir] .btn-outline-primary{color:var(--app-blue)!important;border-color:var(--app-blue)!important;background:#fff!important}
[dir] .btn-outline-primary:hover,[dir] .btn-outline-primary:focus,[dir] .btn-outline-primary:active{color:#fff!important;background:var(--app-blue)!important;border-color:var(--app-blue)!important}
.text-primary{color:var(--app-blue)!important}

.sidebar-dark .sidebar-menu-button{min-height:46px;margin:3px 10px;padding:8px 12px;border-radius:14px}
.sidebar-dark .sidebar-menu-icon{display:grid!important;place-items:center;flex:0 0 34px!important;width:34px!important;height:34px;margin-right:10px!important;padding:0!important;border-radius:11px;background:rgba(255,255,255,.07);color:#fff!important;font-size:20px!important;line-height:1!important}
.sidebar-dark .sidebar-menu-button:hover,.sidebar-dark .sidebar-menu-button.active,
[dir=ltr] .sidebar-dark .sidebar-menu>li.sidebar-menu-item.active:not(.open)>.sidebar-menu-button{color:#fff!important;background:var(--app-blue)!important;border-left:0!important;box-shadow:0 9px 20px rgba(49,92,245,.24)!important}
.sidebar-dark .sidebar-menu-button:hover .sidebar-menu-icon,.sidebar-dark .sidebar-menu-button.active .sidebar-menu-icon,
.sidebar-dark .sidebar-menu-button:hover .sidebar-menu-text,.sidebar-dark .sidebar-menu-button.active .sidebar-menu-text,
[dir=ltr] .sidebar-dark .sidebar-menu>li.sidebar-menu-item.active:not(.open)>.sidebar-menu-button .sidebar-menu-icon,
[dir=ltr] .sidebar-dark .sidebar-menu>li.sidebar-menu-item.active:not(.open)>.sidebar-menu-button .sidebar-menu-text{color:#fff!important}
.sidebar-dark .sidebar-menu-button.active .sidebar-menu-icon{background:rgba(255,255,255,.16)}
.sidebar-heading{color:rgba(255,255,255,.48)!important;letter-spacing:1.2px}
.sidebar-powered-by:hover{background:rgba(49,92,245,.14)!important}
.app-download-icon{color:#fff!important;background:var(--app-blue)!important;border-color:var(--app-blue)!important}
.app-download-icon__arrow{color:#fff!important;background:var(--app-ink)!important;border-color:var(--app-ink)!important}

.page__heading-container{padding:6px 20px 0!important}
.page__heading{min-height:86px;padding:18px 22px!important;color:#fff!important;background:var(--app-ink)!important;border-radius:var(--app-radius)!important;box-shadow:0 12px 30px rgba(11,18,32,.15)!important}
.page__heading h1{color:#fff!important;font-size:25px!important;letter-spacing:-.45px}
.page__heading .breadcrumb-item,.page__heading .breadcrumb-item a{color:rgba(255,255,255,.56)!important}
.page__heading .breadcrumb-item.active{color:#8EABFF!important}
.page__heading .breadcrumb-item+.breadcrumb-item::before{color:rgba(255,255,255,.32)!important}
.page__heading .page-back-button{min-height:42px;color:#fff!important;background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.18)!important;border-radius:13px!important}
.page__heading .page-back-button:hover{color:#fff!important;background:var(--app-blue)!important;border-color:var(--app-blue)!important}
.page__container{padding-top:16px}

.card,.page__container>.card,.page__container .row>[class*="col-"]>.card,.page__container form.card,.stat-card,.attendance-stat,.attendance-filter-card,.attendance-sheet-card{background:#fff!important;border:1px solid rgba(228,231,236,.78)!important;border-radius:var(--app-radius)!important;box-shadow:var(--app-shadow)!important}
.page__container .card-header{min-height:56px;padding:15px 18px;color:var(--app-ink)!important;background:#fff!important;border-bottom:1px solid var(--app-border)!important;border-radius:var(--app-radius) var(--app-radius) 0 0!important}
.page__container .card-header>strong>i,.page__container .card-header>i,.page__container .card-header .font-weight-bold>i{display:inline-grid;place-items:center;width:32px;height:32px;margin-right:9px!important;color:#fff!important;background:var(--app-blue)!important;border-radius:10px;font-size:15px}
.page__container .card-body{padding:18px}
.page__container .card-footer{background:#fff;border-top:1px solid var(--app-border);border-radius:0 0 var(--app-radius) var(--app-radius)}
.stat-card .card-body{gap:12px}
.stat-card__icon,.stat-card--orange .stat-card__icon,.stat-card--green .stat-card__icon,.stat-card--purple .stat-card__icon,.stat-card--blue .stat-card__icon,.stat-card--red .stat-card__icon,.stat-card--gray .stat-card__icon{color:#fff!important;background:var(--app-blue)!important;border-radius:12px!important}
.stat-card__label{color:var(--app-muted)!important}.stat-card__value{color:var(--app-ink)!important;font-weight:900}

.page__container .form-control,.page__container .custom-select,.modal .form-control,.modal .custom-select{min-height:46px;padding:10px 14px;color:var(--app-ink);background:#fff!important;border:1px solid #D0D5DD!important;border-radius:var(--app-control-radius)!important;box-shadow:none!important}
.page__container .form-control:focus,.page__container .custom-select:focus,.modal .form-control:focus,.modal .custom-select:focus{border-color:var(--app-blue)!important;box-shadow:0 0 0 4px rgba(49,92,245,.12)!important}
.page__container label{color:var(--app-muted)!important;font-weight:700}
.page__container .btn,.modal .btn{border-radius:var(--app-control-radius)!important;font-weight:800}
.page__container .table{color:#344054;background:#fff}
.page__container .table thead th{padding:12px 13px;color:var(--app-muted)!important;background:#F8FAFC!important;border-color:var(--app-border)!important}
.page__container .table tbody td{padding:13px;border-color:#EAECF0!important}
.page__container .table-hover tbody tr:hover{background:var(--app-blue-soft)!important}
.badge-primary,.page-item.active .page-link{color:#fff!important;background:var(--app-blue)!important;border-color:var(--app-blue)!important}
.modal-content{border-radius:24px!important;box-shadow:0 24px 64px rgba(11,18,32,.22)!important}
.modal-header,.modal-footer{background:#fff!important;border-color:var(--app-border)!important}
.modal-header .modal-title{color:var(--app-ink)!important;font-weight:900}
.dropdown-menu{border:1px solid var(--app-border);border-radius:16px;box-shadow:0 18px 45px rgba(11,18,32,.14)}
.dropdown-item{padding:10px 14px;border-radius:10px}.dropdown-item:hover,.dropdown-item:focus{color:var(--app-blue)!important;background:var(--app-blue-soft)!important}

@media(max-width:767.98px){
  html,body.layout-default,.mdk-header-layout__content,.page__heading-container,.page__heading-container--dashboard{background:var(--app-canvas)!important}
  #header.mdk-header,#navbar,.navbar-main{background:var(--app-ink)!important}
  .page__heading-container{padding:6px 12px 0!important}
  .page__heading,.page__heading-container--dashboard .page__heading{min-height:62px!important;padding:13px 15px!important;border-radius:18px!important}
  .page__heading h1{color:#fff!important;font-size:20px!important}.page__heading h1::after{background:var(--app-blue)!important}
  .page__container,.page__container--dashboard{padding-top:10px!important}
  .page__container>.card,.page__container .row>[class*="col-"]>.card,.page__container form.card{border-radius:18px!important}
  .page__container .card-header{border-radius:18px 18px 0 0!important}
  .mobile-app-nav{background:rgba(11,18,32,.98)!important}
  .mobile-app-nav a.active{color:#fff!important;background:var(--app-blue)!important}.mobile-app-nav a.active::before{display:none}
  .mobile-app-nav a i{display:grid;place-items:center;width:28px;height:28px;font-size:21px!important}
  .mobile-app-nav a.active i{color:#fff!important;transform:none}
}