/* CamFirst Solutions — Red / Black / White theme overrides on top of FlowDash's compiled app.css */

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

:root {
  --cf-red: #D32F2F;
  --cf-red-dark: #B71C1C;
  --cf-black: #111111;
  --cf-white: #FFFFFF;
  --cf-gray: #6c757d;
  --cf-gray-light: #e9ecef;
  --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);
}

/* Buttons / accents -> red */
[dir] .btn-primary,
[dir] .btn-primary.disabled,
[dir] .btn-primary:disabled {
  background-color: var(--cf-red) !important;
  border-color: var(--cf-red) !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-dark) !important;
  border-color: var(--cf-red-dark) !important;
}
[dir] .btn-outline-primary {
  color: var(--cf-red) !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: var(--cf-white) !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: var(--cf-white) !important;
}

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

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

[dir] .badge-primary { background-color: var(--cf-red) !important; color: #fff !important; }
[dir] .alert-primary { background-color: #fbe4e4 !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(211, 47, 47, 0.25) !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); }

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

/* Sidebar / header -> black */
[dir] .bg-dark,
[dir] .navbar-dark.bg-dark {
  background-color: var(--cf-black) !important;
}

/* The template's .sidebar-dark background is transparent by default (it expects a dark
   parent). Our page background is white, so force the drawer panel solid black. */
[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: rgba(255, 255, 255, 0.85) !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;
}
.sidebar-dark .sidebar-menu-icon {
  color: rgba(255, 255, 255, 0.6) !important;
  flex: 0 0 24px;
  width: 24px;
  text-align: center;
  overflow: hidden;
}
.sidebar-dark .sidebar-menu-text {
  white-space: nowrap;
}

.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: var(--cf-white) !important;
  background-color: var(--cf-red) !important;
  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: var(--cf-white) !important;
}
[dir] .sidebar-dark .sidebar-brand-bg {
  background-color: var(--cf-black) !important;
}
.sidebar-dark .sidebar-account strong {
  color: var(--cf-white) !important;
}

/* 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 -> white */
body {
  background-color: #f4f4f5;
}
.card {
  background-color: var(--cf-white);
  border-color: var(--cf-gray-light);
}

/* Attendance dashboard */
.attendance-hero { display:flex;align-items:center;justify-content:space-between;min-height:130px;padding:24px 30px;color:#fff;background:linear-gradient(120deg,#111 0%,#202020 62%,#8f1515 100%);border-radius:12px;box-shadow:0 12px 28px rgba(17,17,17,.18);overflow:hidden; }
.attendance-hero img { width:150px;height:auto;opacity:.9; }
.attendance-hero__eyebrow { color:#ef9a9a;font-size:10px;font-weight:700;letter-spacing:1.7px; }
.attendance-hero__title { margin:4px 0 8px;color:#fff;font-size:28px;font-weight:700; }
.attendance-hero__date { display:flex;align-items:center;color:rgba(255,255,255,.72);font-size:13px; }
.attendance-hero__date .material-icons { margin-right:7px;font-size:17px;color:#ef5350; }
.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-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 #D32F2F;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 #D32F2F; }
.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:#D32F2F;background:#fff0f0;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:#fff8f8; }
.attendance-employee { display:flex;align-items:center;color:#222 !important; }
.attendance-employee:hover { text-decoration:none;color:#D32F2F !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:#fff;background:linear-gradient(135deg,#D32F2F,#8f1515);border-radius:9px;font-weight:700; }
.attendance-fine { color:#a2a6ab;font-size:11px; }
.attendance-fine--due { display:inline-block;padding:4px 8px;color:#b71c1c;background:#fdeaea;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:#D32F2F !important;border-color:#D32F2F;text-decoration:none;transform:translateY(-2px); }
.monthly-department-tab.active { color:#fff !important;background:linear-gradient(135deg,#D32F2F,#9f1717);border-color:#D32F2F;box-shadow:0 6px 15px rgba(211,47,47,.25); }
.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:rgba(255,255,255,.75); }
.monthly-overview-card { border-top:0; }
.monthly-overview-header { color:#fff;background:linear-gradient(110deg,#111 0%,#242424 70%,#7e1212 100%) !important;border-bottom:3px solid #D32F2F !important; }
.monthly-overview-header .attendance-sheet-card__title { color:#fff;font-size:17px; }
.monthly-overview-header small { color:rgba(255,255,255,.65) !important; }
.monthly-overview-header .attendance-sheet-card__date { color:#fff;background:#D32F2F; }
.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:#fff;background:#111; }
.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:#111; }
.monthly-employee-col a { color:#222 !important;font-size:12px; }
.monthly-employee-col a:hover { color:#D32F2F !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:#155d2b !important;background:#bfe6c9 !important; }
.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-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:#D32F2F !important;border-color:#D32F2F !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 UI across every module. */
.page__heading-container { padding-top:22px; }
.page__heading {
  position:relative;
  min-height:92px;
  padding:19px 24px !important;
  align-items:center !important;
  color:#fff;
  background:linear-gradient(115deg,#111 0%,#242424 72%,#811515 100%);
  border:0 !important;
  border-radius:11px;
  box-shadow:0 9px 24px rgba(17,17,17,.16);
  overflow:hidden;
}
.page__heading::after { content:"";position:absolute;right:-25px;bottom:-55px;width:175px;height:175px;border:28px solid rgba(211,47,47,.18);border-radius:50%;pointer-events:none; }
.page__heading h1 { position:relative;z-index:1;color:#fff;font-size:25px;font-weight:700;letter-spacing:-.3px; }
.page__heading .breadcrumb { position:relative;z-index:1;background:transparent; }
.page__heading .breadcrumb-item,.page__heading .breadcrumb-item a { color:rgba(255,255,255,.62) !important;font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase; }
.page__heading .breadcrumb-item.active { color:#ef9a9a !important; }
.page__heading .breadcrumb-item + .breadcrumb-item::before { color:rgba(255,255,255,.35); }
.page__heading .page-back-button { position:relative;z-index:2;color:#fff;border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.06); }
.page__container { padding-top:20px; }
.page__container > .card,.page__container .row > [class*="col-"] > .card { border:0;border-radius:10px;box-shadow:0 5px 17px rgba(0,0,0,.065); }
.page__container .card-header { min-height:52px;padding:14px 18px;color:#24282d;background:#fff;border-bottom:2px solid #D32F2F;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:#fff;background:#181818;border-color:#2d2d2d;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:#fff6f6; }
.page__container .form-control { min-height:38px;border:1px solid #dce0e5;border-radius:7px;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:6px;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 3px 8px rgba(211,47,47,.2); }
.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 7px;border-radius:5px;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:#D32F2F; }
.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; }
.modal-content { border:0;border-radius:11px;box-shadow:0 18px 48px rgba(0,0,0,.24);overflow:hidden; }
.modal-header { color:#fff;background:linear-gradient(110deg,#111,#8c1717);border:0; }
.modal-header .modal-title { color:#fff;font-weight:700; }
.modal-header .close { color:#fff;text-shadow:none;opacity:.8; }
.modal-footer { background:#f7f8fa;border-top:1px solid #e4e7eb; }
@media (max-width:767.98px) {
  .page__heading { min-height:80px;padding:16px 18px !important; }
  .page__heading h1 { font-size:21px; }
  .page__container { padding-top:14px; }
  .page__container .card-body { padding:14px; }
  .equal-action-buttons { flex-direction:column; }
  .equal-action-buttons .btn { flex-basis:auto;width:100%; }
}

/* Login page — full-width dark gradient background, form card centered */
[dir] .layout-login {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, var(--cf-black) 0%, #1a1a1a 60%, var(--cf-red-dark) 150%) !important;
  background-image: none !important;
}
.layout-login__overlay {
  display: none !important;
}
.layout-login__form {
  background-color: var(--cf-white) !important;
  max-width: 440px;
  width: 100%;
  margin: 2rem;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  flex: none !important;
  min-width: 0 !important;
}