/*
 * ctc-theme.css - Check this Card admin panel ka naya design (Minia/Bootstrap theme ke upar).
 * Sirf look badalta hai: HTML classes/ids aur JS waise hi rehte hain. Card / letter design par lagu nahi.
 * header.php aur auth pages (home, forgetpassword, forgetotp) mein app.min.css ke BAAD load hota hai.
 */
:root {
  --ctc-primary: #2856d8;
  --ctc-primary-d: #1f45b3;
  --ctc-primary-soft: #eaf0fe;
  --ctc-bg: #f4f6fb;
  --ctc-surface: #ffffff;
  --ctc-line: #e6e9f0;
  --ctc-text: #1d2433;
  --ctc-muted: #667085;
  --ctc-ok: #067647;
  --ctc-ok-soft: #ecfdf3;
  --ctc-bad: #b42318;
  --ctc-bad-soft: #fef3f2;
  --ctc-radius: 14px;
  --ctc-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 16px rgba(16, 24, 40, .06);
  --ctc-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
}
body[data-layout-mode="dark"] {
  --ctc-primary-soft: rgba(40, 86, 216, .22);
  --ctc-bg: #0f131c;
  --ctc-surface: #171c27;
  --ctc-line: #262d3b;
  --ctc-text: #e6e9f0;
  --ctc-muted: #98a2b3;
  --ctc-ok-soft: rgba(6, 118, 71, .2);
  --ctc-bad-soft: rgba(180, 35, 24, .2);
  --ctc-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
}

/* ---------- Base ---------- */
body { background: var(--ctc-bg) !important; color: var(--ctc-text); font-family: var(--ctc-font); font-size: 14px; letter-spacing: -.005em; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--ctc-font); color: var(--ctc-text); font-weight: 650; letter-spacing: -.01em; }
a { color: var(--ctc-primary); }
.text-primary { color: var(--ctc-primary) !important; }
.text-muted { color: var(--ctc-muted) !important; }
.bg-primary { background-color: var(--ctc-primary) !important; }
#preloader, #pace, .pace { display: none !important; }

/* ---------- Topbar ---------- */
#page-topbar { background: color-mix(in srgb, var(--ctc-surface) 88%, transparent) !important; backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--ctc-line); box-shadow: none !important; }
#page-topbar .navbar-header { height: 64px; }
#page-topbar .ctc-page-title { margin: 0 0 0 6px; font-size: 18px; font-weight: 700; color: var(--ctc-text); align-self: center; }
.navbar-brand-box { background: var(--ctc-surface) !important; border-right: 1px solid var(--ctc-line) !important; box-shadow: none !important; }
.navbar-brand-box .logo-txt { color: var(--ctc-text) !important; font-weight: 750; font-size: 17px; letter-spacing: -.01em; }
.header-item { color: var(--ctc-muted) !important; height: 64px; }
.header-item:hover { color: var(--ctc-text) !important; }
#page-header-user-dropdown.header-item { background: transparent !important; border: 0 !important; }
.header-profile-user { width: 34px; height: 34px; object-fit: cover; border: 2px solid var(--ctc-primary-soft); background: var(--ctc-primary-soft); }
.dropdown-menu { border: 1px solid var(--ctc-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 40, .14); padding: 6px; background: var(--ctc-surface); }
.dropdown-item { border-radius: 8px; padding: 8px 12px; color: var(--ctc-text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ctc-primary-soft); color: var(--ctc-primary); }

/* ---------- Sidebar ---------- */
.vertical-menu { background: var(--ctc-surface) !important; border-right: 1px solid var(--ctc-line) !important; box-shadow: none !important; }
#sidebar-menu { padding: 14px 10px; }
#sidebar-menu .menu-title { color: var(--ctc-muted) !important; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 14px 14px 6px !important; }
#sidebar-menu ul li a { display: flex; align-items: center; gap: 12px; margin: 2px 0; padding: 10px 14px !important; border-radius: 10px;
  color: var(--ctc-muted) !important; font-weight: 550; font-size: 14px; transition: background .15s, color .15s; }
#sidebar-menu ul li a i, #sidebar-menu ul li a svg { width: 20px; min-width: 20px; font-size: 16px; text-align: center; color: inherit !important; margin: 0 !important; }
#sidebar-menu ul li a:hover { background: var(--ctc-bg); color: var(--ctc-text) !important; }
#sidebar-menu ul li.mm-active > a, #sidebar-menu ul li a.active { background: var(--ctc-primary-soft) !important; color: var(--ctc-primary) !important; }

/* ---------- Page / content ---------- */
.main-content { background: transparent; }
.page-content { padding-top: calc(64px + 24px) !important; }
.page-title-box { padding-bottom: 18px !important; }
/* Page ka naam upar ki patti mein hai, isliye yahan dobara nahi (breadcrumb rehta hai) */
.page-title-box h4, .page-title-box h5 { display: none; }
.page-title-box { justify-content: flex-end !important; padding-bottom: 12px !important; }
.breadcrumb-item, .breadcrumb-item a { color: var(--ctc-muted); font-size: 13px; }
.footer { background: transparent !important; border-top: 1px solid var(--ctc-line); color: var(--ctc-muted) !important; font-size: 13px; }
.footer a { color: var(--ctc-muted) !important; }

/* ---------- Cards ---------- */
.card { background: var(--ctc-surface); border: 1px solid var(--ctc-line) !important; border-radius: var(--ctc-radius) !important; box-shadow: var(--ctc-shadow) !important; margin-bottom: 20px; }
.card-header { background: transparent !important; border-bottom: 1px solid var(--ctc-line) !important; padding: 16px 20px; }
.card-header h4, .card-header h5, .card-header h6, .card-title { font-weight: 650; color: var(--ctc-text) !important; margin: 0; }
.card-body { padding: 20px; }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; font-weight: 600; font-size: 14px; padding: 8px 16px; box-shadow: none !important; transition: background .15s, border-color .15s, color .15s; }
.btn-sm { border-radius: 8px; font-size: 13px; padding: 5px 10px; }
.btn-primary { background: var(--ctc-primary) !important; border-color: var(--ctc-primary) !important; }
.btn-primary:hover, .btn-primary:focus { background: var(--ctc-primary-d) !important; border-color: var(--ctc-primary-d) !important; }
.btn-outline-primary { color: var(--ctc-primary) !important; border-color: color-mix(in srgb, var(--ctc-primary) 40%, transparent) !important; background: transparent; }
.btn-outline-primary:hover { background: var(--ctc-primary-soft) !important; color: var(--ctc-primary) !important; }
.btn-outline-secondary { color: var(--ctc-muted) !important; border-color: var(--ctc-line) !important; background: var(--ctc-surface); }
.btn-outline-secondary:hover { background: var(--ctc-bg) !important; color: var(--ctc-text) !important; border-color: #cfd5e1 !important; }
.btn-success { background: var(--ctc-ok) !important; border-color: var(--ctc-ok) !important; }
.btn-danger { background: var(--ctc-bad) !important; border-color: var(--ctc-bad) !important; }
.btn-light { background: var(--ctc-bg) !important; border-color: var(--ctc-line) !important; color: var(--ctc-text) !important; }
td .btn-sm { min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; margin: 2px 1px; white-space: nowrap; }
td .btn-sm.change-status, td .btn-sm.px-3 { width: auto; padding: 0 12px !important; border-radius: 999px; font-size: 12px; }
td .btn-success.change-status, td .btn-success.btn-sm { background: var(--ctc-ok-soft) !important; color: var(--ctc-ok) !important; border-color: transparent !important; }
td .btn-danger.change-status, td .btn-danger.btn-sm { background: var(--ctc-bad-soft) !important; color: var(--ctc-bad) !important; border-color: transparent !important; }

/* ---------- Forms ---------- */
.form-label, label { font-weight: 600; font-size: 13px; color: var(--ctc-text); }
.form-control, .form-select { border-radius: 10px; border: 1px solid #d5dbe6; background-color: var(--ctc-surface); color: var(--ctc-text); padding: 9px 12px; font-size: 14px; }
body[data-layout-mode="dark"] .form-control, body[data-layout-mode="dark"] .form-select { border-color: var(--ctc-line); }
.form-control:focus, .form-select:focus { border-color: var(--ctc-primary); box-shadow: 0 0 0 4px rgba(40, 86, 216, .14); }
.input-group > .btn { border-radius: 0 10px 10px 0; }
.form-check-input:checked { background-color: var(--ctc-primary); border-color: var(--ctc-primary); }

/* ---------- Tables / DataTables ---------- */
.table { color: var(--ctc-text); border-color: var(--ctc-line); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 12px 14px; border-bottom-color: var(--ctc-line); vertical-align: middle; }
.table thead th, table.dataTable thead th { background: var(--ctc-bg) !important; color: var(--ctc-muted) !important; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--ctc-line) !important; white-space: nowrap; }
.table-bordered, .table-bordered > :not(caption) > * > * { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: color-mix(in srgb, var(--ctc-primary) 4%, transparent); }
.table img.rounded-circle, .table img.avatar-sm, .table td img { object-fit: cover; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border-radius: 10px !important; border: 1px solid #d5dbe6 !important;
  padding: 7px 12px !important; margin-left: 8px; background: var(--ctc-surface); color: var(--ctc-text); }
.dataTables_wrapper .dataTables_info { color: var(--ctc-muted); font-size: 13px; padding-top: 14px !important; }
.dataTables_wrapper .dataTables_paginate { padding-top: 10px !important; }
.page-link { border: 0; border-radius: 8px !important; margin: 0 2px; color: var(--ctc-muted); background: transparent; font-weight: 600; min-width: 34px; text-align: center; }
.page-item.active .page-link { background: var(--ctc-primary) !important; color: #fff !important; }
.page-link:hover { background: var(--ctc-primary-soft); color: var(--ctc-primary); }
div.dt-buttons .btn { border-radius: 8px !important; margin-right: 6px; background: var(--ctc-surface) !important; color: var(--ctc-text) !important; border: 1px solid var(--ctc-line) !important; }

/* ---------- Badges / alerts ---------- */
.badge { border-radius: 999px; font-weight: 650; padding: .4em .75em; }
.alert { border-radius: 12px; border: 0; }

/* ---------- Modal / offcanvas / sweetalert ---------- */
.modal-content { border: 0; border-radius: 18px; box-shadow: 0 24px 64px rgba(16, 24, 40, .25); background: var(--ctc-surface); }
.modal-header, .modal-footer { border-color: var(--ctc-line); padding: 16px 20px; }
.modal-title { font-weight: 700; }
.offcanvas { border: 0 !important; box-shadow: -12px 0 40px rgba(16, 24, 40, .18); background: var(--ctc-surface); }
.offcanvas-header { border-bottom: 1px solid var(--ctc-line); }
.swal2-popup { border-radius: 18px !important; font-family: var(--ctc-font) !important; }
.swal2-styled.swal2-confirm { background: var(--ctc-primary) !important; border-radius: 10px !important; }

/* ---------- Dashboard ---------- */
.ctc-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 26px; margin-bottom: 22px;
  border-radius: 18px; color: #fff; background: linear-gradient(115deg, #0b1f4d 0%, #1c3f95 55%, #2856d8 100%); box-shadow: 0 10px 30px rgba(31, 69, 179, .25); position: relative; overflow: hidden; }
.ctc-hero::after { content: ""; position: absolute; right: -80px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.ctc-hero h2 { color: #fff; margin: 0 0 4px; font-size: 24px; font-weight: 750; }
.ctc-hero p { margin: 0; color: rgba(255, 255, 255, .8); }
.ctc-hero .btn { background: #fff !important; color: #0b1f4d !important; border: 0 !important; position: relative; z-index: 1; }
.ctc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-bottom: 22px; }
.ctc-stat { background: var(--ctc-surface); border: 1px solid var(--ctc-line); border-radius: var(--ctc-radius); box-shadow: var(--ctc-shadow); padding: 20px;
  display: flex; align-items: center; gap: 16px; text-decoration: none !important; color: inherit; transition: transform .15s, box-shadow .15s; }
a.ctc-stat:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(16, 24, 40, .1); }
.ctc-stat .ic { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
.ctc-stat .ic.blue { background: var(--ctc-primary-soft); color: var(--ctc-primary); }
.ctc-stat .ic.green { background: var(--ctc-ok-soft); color: var(--ctc-ok); }
.ctc-stat .ic.amber { background: color-mix(in srgb, #f79009 16%, transparent); color: #b54708; }
.ctc-stat .ic.violet { background: color-mix(in srgb, #7a5af8 16%, transparent); color: #6941c6; }
.ctc-stat .lbl { color: var(--ctc-muted); font-size: 13px; font-weight: 600; }
.ctc-stat .num { font-size: 28px; font-weight: 750; line-height: 1.15; color: var(--ctc-text); letter-spacing: -.02em; }
.ctc-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ctc-quick a { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--ctc-line); border-radius: 12px; text-decoration: none !important;
  color: var(--ctc-text); background: var(--ctc-surface); transition: border-color .15s, background .15s; }
.ctc-quick a:hover { border-color: color-mix(in srgb, var(--ctc-primary) 45%, transparent); background: color-mix(in srgb, var(--ctc-primary) 3%, var(--ctc-surface)); }
.ctc-quick i { font-size: 18px; color: var(--ctc-primary); margin-top: 2px; width: 22px; text-align: center; }
.ctc-quick b { display: block; font-weight: 650; }
.ctc-quick span { color: var(--ctc-muted); font-size: 13px; }

/* ---------- Auth pages (login, forgot password, OTP) ---------- */
.auth-page { background: var(--ctc-bg); min-height: 100vh; }
.auth-page .auth-full-page-content { background: var(--ctc-surface); min-height: 100vh; }
.auth-page .auth-bg { background: linear-gradient(135deg, #0b1f4d 0%, #1c3f95 55%, #2856d8 100%) !important; min-height: 100vh; }
.auth-page .auth-bg .bg-overlay { display: none; }
.auth-page .auth-logo .logo-txt { color: var(--ctc-text) !important; font-weight: 750; }
.auth-page .auth-content h5 { font-size: 24px; font-weight: 750; }
.auth-page .form-control { padding: 11px 14px; }
.auth-page .btn-primary { padding: 12px 16px; font-size: 15px; }
.auth-page .auth-bg .bg-bubbles, .auth-page .auth-bg #reviewcarouselIndicators { display: none !important; }
.auth-page .auth-bg { align-items: center; justify-content: center; }
.ctc-auth-brand { position: relative; z-index: 1; max-width: 520px; padding: 24px; color: #fff; }
.ctc-auth-brand h2 { color: #fff; font-size: 36px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin: 0 0 14px; }
.ctc-auth-brand p { color: rgba(255, 255, 255, .8); font-size: 16px; margin: 0; }

/* ---------- Sidebar count badge ---------- */
#sidebar-menu .ctc-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #f04438; color: #fff;
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ctc-pill-btn { border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; padding: 0 10px !important; }
.ctc-pill-btn.warn { background: #fffaeb !important; color: #b54708 !important; border: 1px solid #fedf89 !important; }

/* ---------- Photo approvals ---------- */
.ctc-appr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.ctc-appr-head h4 { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.ctc-appr-head p { margin: 0; color: var(--ctc-muted); }
.ctc-appr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.ctc-appr { margin: 0; overflow: hidden; transition: opacity .3s, transform .3s; }
.ctc-appr.done-ok { box-shadow: 0 0 0 2px #12b76a !important; }
.ctc-appr.done-no { opacity: .6; }
.ctc-appr-body { padding: 18px; }
.ctc-appr-pics { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; }
.ctc-appr-pics figure { margin: 0; text-align: center; }
.ctc-appr-pics img, .ctc-appr-pics .none { width: 110px; height: 146px; object-fit: cover; border-radius: 10px; border: 1px solid var(--ctc-line); background: var(--ctc-bg); display: block; }
.ctc-appr-pics .none { display: flex; align-items: center; justify-content: center; color: var(--ctc-muted); font-size: 12px; }
.ctc-appr-pics .new img { width: 132px; height: 176px; border: 2px solid var(--ctc-primary); box-shadow: 0 6px 18px rgba(40, 86, 216, .18); }
.ctc-appr-pics figcaption { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ctc-muted); margin-top: 6px; }
.ctc-appr-pics .new figcaption { color: var(--ctc-primary); }
.ctc-appr-pics .arrow { color: var(--ctc-muted); }
.ctc-appr-meta { text-align: center; }
.ctc-appr-meta b { display: block; font-size: 16px; }
.ctc-appr-meta span { display: block; color: var(--ctc-muted); font-size: 13px; }
.ctc-appr-meta small { display: block; color: var(--ctc-muted); font-size: 12px; margin-top: 4px; }
.ctc-appr-actions { display: flex; gap: 8px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--ctc-line); background: var(--ctc-bg); }
.ctc-appr-actions .appr-btn { flex: 1; }
.ctc-appr-actions .st { flex: 1; text-align: center; font-weight: 700; padding: 8px 0; }
.ctc-appr-actions .st.ok { color: var(--ctc-ok); } .ctc-appr-actions .st.no { color: var(--ctc-bad); }
.ctc-appr-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 48px 20px; text-align: center; }
.ctc-appr-empty[hidden] { display: none; }
.ctc-appr-empty i { font-size: 40px; color: #12b76a; margin-bottom: 8px; }
.ctc-appr-empty b { font-size: 18px; }
.ctc-appr-empty span { color: var(--ctc-muted); }
.ctc-tag { display: flex; width: max-content; align-items: center; gap: 4px; margin: 4px 0 0; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-decoration: none !important; white-space: nowrap; vertical-align: middle; }
.ctc-tag.warn { background: #fffaeb; color: #b54708 !important; border: 1px solid #fedf89; }

/* ---------- Company plan: filters, tags, modal ---------- */
.ctc-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ctc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ctc-line);
  background: var(--ctc-surface); color: var(--ctc-muted) !important; font-weight: 600; font-size: 13px; text-decoration: none !important; }
.ctc-chip span { background: var(--ctc-bg); border-radius: 999px; padding: 0 7px; font-size: 12px; }
.ctc-chip:hover { border-color: #cfd5e1; color: var(--ctc-text) !important; }
.ctc-chip.on { background: var(--ctc-primary-soft); border-color: color-mix(in srgb, var(--ctc-primary) 35%, transparent); color: var(--ctc-primary) !important; }
.ctc-chip.on span { background: var(--ctc-primary); color: #fff; }
.ctc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; max-width: 240px; }
.ctc-tags .ctc-tag { margin: 0; }
.ctc-tag.bad { background: var(--ctc-bad-soft); color: var(--ctc-bad) !important; border: 1px solid #fecdca; }
.ctc-tag.muted { background: var(--ctc-bg); color: var(--ctc-muted) !important; border: 1px solid var(--ctc-line); font-weight: 600; }
.ctc-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(16, 24, 40, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ctc-modal[hidden] { display: none; }
.ctc-modal-card { width: 100%; max-width: 440px; background: var(--ctc-surface); border-radius: 18px; padding: 22px; box-shadow: 0 24px 64px rgba(16, 24, 40, .25); }
.ctc-modal-card .hd { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.ctc-modal-card .hd .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--ctc-primary-soft); color: var(--ctc-primary); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ctc-modal-card .hd h5 { margin: 0; }
.ctc-modal-card .hd .nm { color: var(--ctc-muted); font-size: 13px; }
.ctc-modal-card .x { margin-left: auto; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--ctc-muted); }
.ctc-modal-card .st { padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: 13px; margin-bottom: 12px; }
.ctc-modal-card .st.ok { background: var(--ctc-ok-soft); color: var(--ctc-ok); }
.ctc-modal-card .st.warn { background: #fffaeb; color: #b54708; }
.ctc-modal-card .st.bad { background: var(--ctc-bad-soft); color: var(--ctc-bad); }
.ctc-modal-card .hint { font-size: 12px; color: var(--ctc-muted); margin-top: 6px; }
.ctc-modal-card hr { margin: 16px 0; border-color: var(--ctc-line); opacity: 1; }
.ctc-modal-card .clear { white-space: nowrap; }
.ctc-modal-card .sw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ctc-line); }
.ctc-modal-card .sw-row b { display: block; }
.ctc-modal-card .sw-row span { font-size: 12px; color: var(--ctc-muted); }
.ctc-modal-card .form-switch .form-check-input { width: 44px; height: 24px; cursor: pointer; }
.ctc-modal-card .ft { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.ctc-modal-card .ft .msg { flex: 1; font-size: 13px; font-weight: 600; }
.ctc-modal-card .ft .msg.ok { color: var(--ctc-ok); } .ctc-modal-card .ft .msg.err { color: var(--ctc-bad); }