/* Tabler-inspired look for Perfex CRM (override stylesheet).
   Remove the hook in application/helpers/my_functions_helper.php to revert. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --tb-primary: #066fd1;
  --tb-primary-dark: #055bac;
  --tb-bg: #f6f8fb;
  --tb-surface: #ffffff;
  --tb-text: #182433;
  --tb-muted: #667382;
  --tb-border: #e6e7e9;
  --tb-nav: #182433;
  --tb-nav-text: #c3cad4;
  --tb-radius: 4px;
  --tb-shadow: 0 0 4px rgba(24, 36, 51, .04);
  --tb-success: #2fb344;
  --tb-warning: #f76707;
  --tb-danger: #d63939;
  --tb-info: #4299e1;
}

html, body, button, input, select, textarea, .btn, .form-control {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
body { background: var(--tb-bg) !important; color: var(--tb-text); font-size: 14px; line-height: 1.45; }
h1, h2, h3, h4, h5, h6 { color: var(--tb-text); font-weight: 600; }
a { color: var(--tb-primary); }
a:hover, a:focus { color: var(--tb-primary-dark); }
.text-muted { color: var(--tb-muted) !important; }

/* ---- top bar ---- */
#header {
  background: var(--tb-surface) !important;
  border-bottom: 1px solid var(--tb-border);
  box-shadow: none !important;
}
#header nav, #header .navbar { background: transparent !important; }

/* ---- sidebar ---- */
#menu.sidebar, aside#menu {
  background: var(--tb-nav) !important;
  border-right: 0;
}
#menu .nav > li > a, #side-menu > li > a {
  color: var(--tb-nav-text) !important;
  font-weight: 500;
  border-radius: var(--tb-radius);
  margin: 1px 8px;
  padding: 8px 12px;
}
#menu .nav > li > a:hover, #menu .nav > li > a:focus,
#side-menu > li.active > a, #side-menu > li.active > a:hover {
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
}
#menu .nav > li > a i, #menu .nav > li > a svg { color: inherit; opacity: .85; }
#menu .nav-second-level li a { color: var(--tb-nav-text) !important; }
#menu .nav-second-level li.active a, #menu .nav-second-level li a:hover { color: #fff !important; background: transparent !important; }
#menu .sidebar-user-profile a, #menu .sidebar-user-profile { color: var(--tb-nav-text); }

/* ---- cards / panels ---- */
.panel_s, .panel, .widget, .card {
  background: var(--tb-surface) !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: var(--tb-radius) !important;
  box-shadow: var(--tb-shadow) !important;
}
.panel_s .panel-heading, .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--tb-border) !important;
  font-weight: 600;
}
.panel-footer { background: #fafbfc !important; border-top: 1px solid var(--tb-border) !important; }

/* ---- buttons ---- */
.btn {
  border-radius: var(--tb-radius) !important;
  font-weight: 500;
  padding: 6px 14px;
  box-shadow: 0 1px 1px rgba(24, 36, 51, .06);
  transition: background .15s, border-color .15s;
}
.btn-primary, .btn-info {
  background: var(--tb-primary) !important;
  border-color: var(--tb-primary) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-info:hover, .btn-info:focus {
  background: var(--tb-primary-dark) !important;
  border-color: var(--tb-primary-dark) !important;
}
.btn-default {
  background: var(--tb-surface) !important;
  border: 1px solid var(--tb-border) !important;
  color: var(--tb-text) !important;
}
.btn-default:hover { border-color: #c8ccd1 !important; }
.btn-success { background: var(--tb-success) !important; border-color: var(--tb-success) !important; }
.btn-danger  { background: var(--tb-danger)  !important; border-color: var(--tb-danger)  !important; }
.btn-warning { background: var(--tb-warning) !important; border-color: var(--tb-warning) !important; color: #fff !important; }

/* ---- forms ---- */
.form-control, .bootstrap-select > .dropdown-toggle, .select2-selection {
  border: 1px solid #dadfe5 !important;
  border-radius: var(--tb-radius) !important;
  box-shadow: none !important;
  background: var(--tb-surface);
  color: var(--tb-text);
  height: auto;
  min-height: 36px;
}
.form-control:focus {
  border-color: #90bdea !important;
  box-shadow: 0 0 0 .25rem rgba(6, 111, 209, .25) !important;
}
label, .control-label { font-weight: 500; color: var(--tb-text); }

/* ---- tables ---- */
.table > thead > tr > th {
  background: #f6f8fb;
  color: var(--tb-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--tb-border) !important;
}
.table > tbody > tr > td { border-top: 1px solid var(--tb-border) !important; vertical-align: middle; }
.table-hover > tbody > tr:hover { background: rgba(6, 111, 209, .04); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.pagination > .active > a, .pagination > .active > span {
  background: var(--tb-primary) !important;
  border-color: var(--tb-primary) !important;
  color: #fff !important;
}

/* ---- labels / badges ---- */
.label, .badge { border-radius: 3px; font-weight: 600; letter-spacing: .02em; }
.label-success { background: var(--tb-success); }
.label-danger  { background: var(--tb-danger); }
.label-warning { background: var(--tb-warning); }
.label-info    { background: var(--tb-info); }

/* ---- tabs, dropdowns, modals ---- */
.nav-tabs { border-bottom: 1px solid var(--tb-border); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover {
  border: 0 !important;
  border-bottom: 2px solid var(--tb-primary) !important;
  color: var(--tb-primary) !important;
  background: transparent !important;
}
.dropdown-menu { border: 1px solid var(--tb-border); border-radius: var(--tb-radius); box-shadow: 0 8px 16px rgba(24, 36, 51, .12); }
.modal-content { border: 0; border-radius: 6px; box-shadow: 0 16px 48px rgba(24, 36, 51, .2); }
.modal-header { border-bottom: 1px solid var(--tb-border); }
.modal-footer { border-top: 1px solid var(--tb-border); }
.alert { border-radius: var(--tb-radius); border-width: 1px; }

/* ---- login pages (staff + clients) ---- */
body.login_admin, body.authentication, body.customers.login { background: var(--tb-bg) !important; }
.authentication-form-wrapper > div.tw-bg-white, .authentication-form-wrapper form,
.login_admin .authentication-form-wrapper > div:not(.company-logo) {
  border: 1px solid var(--tb-border);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(24, 36, 51, .06);
}

/* ---- client portal ---- */
.customers .navbar, body.customers .navbar-default {
  background: var(--tb-surface) !important;
  border: 0; border-bottom: 1px solid var(--tb-border);
  box-shadow: none;
}
body.customers .navbar-default .navbar-nav > li > a { color: var(--tb-text); font-weight: 500; }
body.customers .navbar-default .navbar-nav > li.active > a { color: var(--tb-primary); }
body.customers footer, .customers_footer { background: transparent; border-top: 1px solid var(--tb-border); color: var(--tb-muted); }

/* ================= Dashboard & statistics ================= */
body.dashboard #wrapper, #wrapper { background: var(--tb-bg); }

/* quick stats row -> Tabler stat cards */
.top_stats_wrapper {
  background: var(--tb-surface);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius);
  box-shadow: var(--tb-shadow);
  padding: 16px 18px 18px;
  height: 100%;
  position: relative;
  transition: box-shadow .15s, border-color .15s;
}
.top_stats_wrapper:hover { border-color: #cfd6df; box-shadow: 0 4px 10px rgba(24, 36, 51, .08); }
.top_stats_wrapper svg { width: 36px !important; height: 36px !important; padding: 8px; margin-right: 12px;
  border-radius: var(--tb-radius); background: rgba(6, 111, 209, .1); color: var(--tb-primary) !important; flex-shrink: 0; }
.quick-stats-leads .top_stats_wrapper svg    { background: rgba(247, 103, 7, .1);  color: var(--tb-warning) !important; }
.quick-stats-projects .top_stats_wrapper svg { background: rgba(47, 179, 68, .1);  color: var(--tb-success) !important; }
.quick-stats-tasks .top_stats_wrapper svg    { background: rgba(214, 57, 57, .1);  color: var(--tb-danger)  !important; }
.top_stats_wrapper .tw-font-medium { color: var(--tb-muted) !important; font-size: 13px; }
.top_stats_wrapper .tw-font-semibold { color: var(--tb-text) !important; font-size: 20px; font-weight: 700; }

/* progress bars */
.progress { background: #eef1f5; border-radius: 999px; box-shadow: none; height: 8px; overflow: hidden; }
.progress.progress-bar-mini { height: 6px; }
.progress-bar { box-shadow: none; border-radius: 999px; background: var(--tb-primary); }
.progress-bar-success { background: var(--tb-success); }
.progress-bar-danger  { background: var(--tb-danger); }
.progress-bar-warning { background: var(--tb-warning); }
.progress-bar-info    { background: var(--tb-info); }

/* widgets */
.widget { padding: 0; margin-bottom: 20px; }
.widget > .panel_s, .widget .panel_s { box-shadow: none !important; border: 0 !important; margin: 0; }
.widget .panel-body { padding: 18px 20px; }
.widget h4, .widget .widget-title, .widget p.tw-font-semibold, .widget .panel-body > p:first-child {
  font-size: 15px; font-weight: 600; color: var(--tb-text);
}
.widget-dragger { opacity: 0; transition: opacity .15s; }
.widget:hover .widget-dragger { opacity: .6; }
.widget .panel-body hr, .widget hr { border-top: 1px solid var(--tb-border); }

/* finance / summary tiles inside widgets */
.widget .tw-text-neutral-800 { color: var(--tb-text) !important; }
.widget .tw-text-neutral-500, .widget .tw-text-neutral-600 { color: var(--tb-muted) !important; }
.widget .tw-bg-neutral-50, .widget .tw-bg-neutral-100 { background: #f6f8fb !important; border-radius: var(--tb-radius); }

/* calendar */
.fc { font-family: inherit; }
.fc-toolbar h2 { font-size: 16px; font-weight: 600; }
.fc-button { background: var(--tb-surface) !important; border: 1px solid var(--tb-border) !important; color: var(--tb-text) !important;
  border-radius: var(--tb-radius) !important; box-shadow: none !important; text-shadow: none !important; background-image: none !important; }
.fc-button.fc-state-active, .fc-button:hover { background: var(--tb-primary) !important; color: #fff !important; border-color: var(--tb-primary) !important; }
.fc-unthemed th, .fc-unthemed td, .fc-unthemed .fc-divider, .fc-unthemed .fc-row, .fc-unthemed .fc-content,
.fc-unthemed .fc-popover, .fc-unthemed .fc-list-view, .fc-unthemed .fc-list-heading td { border-color: var(--tb-border); }
.fc-unthemed td.fc-today { background: rgba(6, 111, 209, .06); }
.fc-event { border-radius: 3px; border: 0; }

/* charts (Chart.js canvases) */
.widget canvas { max-width: 100%; }

/* todos / activity lists */
.widget .list-group-item, .widget .media { border-color: var(--tb-border); }
.widget .todo-checkbox, .widget .todo-description { color: var(--tb-text); }

/* staff user card in dashboard */
.widget .user-data, .user-data { border-radius: var(--tb-radius); }

/* ================= Sidebar menu (Tabler vertical, dark) ================= */
#menu.sidebar {
  background: var(--tb-nav) !important;
  border-right: 0 !important;
  padding-left: 0; padding-right: 0;
  box-shadow: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
#menu.sidebar::-webkit-scrollbar { width: 6px; }
#menu.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 3px; }

/* user card */
#menu .sidebar-user-profile { margin: 72px 12px 8px !important; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
#menu .sidebar-user-profile > a.profile {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: var(--tb-radius) !important;
  box-shadow: none !important;
  color: #fff !important;
  margin-top: 0 !important;
}
#menu .sidebar-user-profile > a.profile:hover { background: rgba(255, 255, 255, .1) !important; }
#menu .sidebar-user-profile .tw-text-neutral-300,
#menu .sidebar-user-profile .tw-text-neutral-500 { color: #9aa6b6 !important; font-size: 12px; }
#menu .sidebar-user-profile img.staff-profile-image-small { width: 32px; height: 32px; border-radius: 50%; }
#menu .sidebar-user-profile .dropdown-menu { background: var(--tb-surface); }

/* items */
#side-menu { margin-top: 8px !important; padding: 0 8px; }
#menu.sidebar > ul.nav > li { border-left: 0 !important; margin-bottom: 1px; }
#menu.sidebar ul.nav > li > a,
#menu.sidebar > ul.nav > li:hover > a:first-child {
  display: flex; align-items: center;
  color: var(--tb-nav-text) !important;
  background: transparent;
  border: 0 !important;
  border-radius: var(--tb-radius) !important;
  box-shadow: none !important;
  padding: 8px 12px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}
#menu.sidebar ul.nav > li > a:hover,
#menu.sidebar ul.nav > li > a:focus,
#menu.sidebar > ul.nav > li:hover > a:first-child {
  background: rgba(255, 255, 255, .06) !important;
  color: #fff !important;
}
#menu.sidebar > ul.nav > li.active > a:first-child {
  background: rgba(255, 255, 255, .1) !important;
  color: #fff !important;
  box-shadow: inset 2px 0 0 var(--tb-primary) !important;
}
#menu.sidebar ul.nav li a i.menu-icon {
  float: none; margin-right: 12px; width: 20px; font-size: 16px;
  color: #8896a8 !important; transition: color .15s;
}
#menu.sidebar ul.nav li.active > a .menu-icon,
#menu.sidebar ul.nav > li > a:hover .menu-icon { color: #fff !important; }
#menu.sidebar .menu-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#menu.sidebar .arrow { float: none; padding: 0; margin-left: auto; opacity: .6; font-size: 12px; }

/* sub menu */
#menu.sidebar ul.nav-second-level { margin: 2px 0 6px 22px; padding-left: 0; border-left: 1px solid rgba(255, 255, 255, .1); }
#menu.sidebar ul.nav li .nav-second-level li a {
  padding: 6px 12px 6px 14px !important;
  color: #9aa6b6 !important;
  font-size: 13.5px;
  font-weight: 400;
  border-radius: var(--tb-radius) !important;
  background: transparent !important;
}
#menu.sidebar ul.nav li .nav-second-level li a:hover,
#menu.sidebar ul.nav li .nav-second-level li.active a { color: #fff !important; background: rgba(255, 255, 255, .05) !important; }
#menu.sidebar ul.nav li .nav-second-level li.active a { font-weight: 500; }
#menu.sidebar ul.nav li .nav-second-level li a .menu-icon { display: none; }

/* badges */
#menu.sidebar .badge { background: var(--tb-primary); color: #fff; border-radius: 10px; font-size: 10px; font-weight: 600; padding: 3px 6px; }
#menu.sidebar .badge.bg-danger  { background: var(--tb-danger)  !important; }
#menu.sidebar .badge.bg-warning { background: var(--tb-warning) !important; }
#menu.sidebar .badge.bg-success { background: var(--tb-success) !important; }

/* pinned projects */
#side-menu.nav > li.pinned_project a { color: var(--tb-nav-text) !important; }
#side-menu.nav > li.pinned_project.active a, #side-menu.nav > li.pinned_project:hover a { color: #fff !important; }

/* setup (settings) panel */
#setup-menu-wrapper { background: var(--tb-surface); border-right: 1px solid var(--tb-border); }
#setup-menu > li:first-child { border-bottom: 1px solid var(--tb-border); color: var(--tb-text); }
#setup-menu > li > a { color: var(--tb-text); font-weight: 500; border-radius: var(--tb-radius); }
#setup-menu > li.active > a, #setup-menu > li > a:hover { background: rgba(6, 111, 209, .08); color: var(--tb-primary); }
#setup-menu li .nav-second-level li a { color: var(--tb-muted); }
#setup-menu li .nav-second-level li.active a, #setup-menu li .nav-second-level li a:hover { color: var(--tb-primary); }

/* sidebar toggle in the top bar */
#header .hide-menu { border-radius: var(--tb-radius); }

/* ================= Top header bar (Tabler navbar) ================= */
#header {
  height: 56px;
  background: var(--tb-surface) !important;
  border-bottom: 1px solid var(--tb-border);
  box-shadow: none !important;
}
#header #logo { height: 56px !important; }
#header #logo a.logo-text { font-size: 18px !important; font-weight: 700; color: var(--tb-text); letter-spacing: -.01em; }
#header #logo img { height: 32px !important; }

/* sidebar toggle */
#header .hide-menu { color: var(--tb-muted) !important; margin-top: 12px !important; }
#header .hide-menu:hover { background: rgba(24, 36, 51, .06) !important; color: var(--tb-text) !important; }

/* search */
#header #top_search { margin-top: 0; }
#header #search_input {
  height: 36px; margin-top: 10px !important;
  background: #f6f8fb !important;
  border: 1px solid transparent !important;
  border-radius: var(--tb-radius) !important;
  color: var(--tb-text) !important;
  font-size: 14px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
#header #search_input:hover { border-color: var(--tb-border) !important; }
#header #search_input:focus {
  background: var(--tb-surface) !important;
  border-color: #90bdea !important;
  box-shadow: 0 0 0 .25rem rgba(6, 111, 209, .25) !important;
}
#header #top_search_button { top: 12px; }
#header #top_search_button button { color: var(--tb-muted) !important; }
#header #search_results, #header .search-results { border-radius: var(--tb-radius); }

/* quick create (+) */
#header li.icon > a > span.tw-rounded-full {
  border-radius: var(--tb-radius) !important;
  background: var(--tb-primary) !important;
  height: 32px !important; width: 32px !important;
  box-shadow: 0 1px 1px rgba(24, 36, 51, .06);
}
#header li.icon > a:hover > span.tw-rounded-full { background: var(--tb-primary-dark) !important; }
#header .dropdown-header { color: var(--tb-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* right-hand icons: notifications, timers, profile */
#header .navbar-nav > li > a, #header .mobile-icon-menu a { color: var(--tb-muted); }
#header .navbar-nav > li > a:hover, #header .navbar-nav > li > a:focus,
#header .navbar-nav > li.open > a { background: rgba(24, 36, 51, .06); color: var(--tb-text); border-radius: var(--tb-radius); }
#header .notifications-wrapper .icon, #header .header-timers i { color: var(--tb-muted) !important; }
#header .notifications-wrapper:hover .icon, #header .header-timers:hover i { color: var(--tb-text) !important; }
#header .icon-notifications .badge, #header .notifications-wrapper .badge, #header .top-timers .bg-success {
  background: var(--tb-danger) !important; color: #fff; border: 2px solid var(--tb-surface);
  border-radius: 999px; font-weight: 600; font-size: 10px;
}
#header .top-timers .bg-success { background: var(--tb-success) !important; }
#header img.staff-profile-image-small { border-radius: 50%; }

/* header dropdowns (notifications, timers, quick create) */
#header .dropdown-menu {
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius);
  box-shadow: 0 8px 24px rgba(24, 36, 51, .12);
  margin-top: 6px;
}
#header .dropdown-menu > li > a { color: var(--tb-text); border-radius: 3px; margin: 0 4px; padding: 6px 10px; }
#header .dropdown-menu > li > a:hover { background: rgba(6, 111, 209, .08); color: var(--tb-primary); }
#header li > a.active { background: rgba(6, 111, 209, .1); color: var(--tb-primary); border-radius: var(--tb-radius); }

/* mobile menu */
#header .mobile-menu-toggle { color: var(--tb-muted); }
#header .mobile-navbar { background: var(--tb-surface); border-top: 1px solid var(--tb-border); }