/* 01 Variables */
:root {
  --cs-primary: #3922c9;
  --cs-primary-hover: #2f1bae;
  --cs-primary-light: #f0edff;
  --cs-accent: #7257ff;
  --cs-navy: #111a40;
  --cs-heading: #101631;
  --cs-text: #505a78;
  --cs-muted: #828aa3;
  --cs-bg: #f8f9fd;
  --cs-surface: #ffffff;
  --cs-border: #e7e9f2;
  --cs-success: #17a673;
  --cs-warning: #f4a623;
  --cs-danger: #e85454;
  --cs-radius-sm: 8px;
  --cs-radius-md: 12px;
  --cs-radius-lg: 16px;
  --cs-shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.04);
  --cs-shadow-md: 0 8px 30px rgba(16, 24, 40, 0.08);
  --cs-sidebar-width: 252px;
  --cs-header-height: 68px;
  --cs-transition: 180ms ease;
}

/* 02 Reset / base */
html { background: var(--cs-bg); }

body {
  color: var(--cs-text);
  background: var(--cs-bg);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

a,
button,
input,
select,
textarea,
.panel_s,
.dropdown-menu,
.modal-content {
  transition: color var(--cs-transition), background-color var(--cs-transition), border-color var(--cs-transition), box-shadow var(--cs-transition), transform var(--cs-transition);
}

a { color: var(--cs-primary); }
a:hover, a:focus { color: var(--cs-primary-hover); }

:focus-visible {
  outline: 3px solid rgba(57, 34, 201, 0.24) !important;
  outline-offset: 2px;
}

/* 03 Typography */
h1, h2, h3, h4, h5, h6,
.panel-title,
.modal-title {
  color: var(--cs-heading);
  font-family: inherit;
  letter-spacing: 0;
}

h1, .h1 { font-size: 32px; font-weight: 700; }
h2, .h2 { font-size: 26px; font-weight: 700; }
h3, .h3 { font-size: 20px; font-weight: 600; }
h4, .h4 { font-size: 17px; font-weight: 600; }
body, p, td, th, label, input, select, textarea, button { font-size: 14px; }

/* 04 Admin layout */
body.admin #wrapper {
  min-height: 100vh;
  margin-inline-start: var(--cs-sidebar-width);
  background: var(--cs-bg);
}

body.admin .content { padding: 28px; }

body.admin #menu.sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 100;
  width: var(--cs-sidebar-width) !important;
  overflow: hidden;
  padding: 0 12px 20px;
  border: 0;
  border-inline-end: 1px solid var(--cs-border);
  background: var(--cs-surface);
  box-shadow: 5px 0 24px rgba(16, 22, 49, 0.025);
}

body.admin #menu.sidebar #side-menu {
  height: calc(100vh - 160px);
  margin-top: 14px !important;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d8d5e7 transparent;
}

.costera-sidebar-brand {
  display: flex;
  height: 74px;
  align-items: center;
  padding: 14px 8px 12px;
  border-bottom: 1px solid var(--cs-border);
}

.costera-sidebar-brand img {
  display: block;
  width: 176px;
  max-height: 48px;
  object-fit: contain;
}

body.admin #menu .sidebar-user-profile {
  margin: 14px 0 0 !important;
}

body.admin #menu .sidebar-user-profile > a.profile {
  padding: 10px !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-md) !important;
  background: #fbfbfe !important;
  box-shadow: none !important;
}

body.admin #menu .sidebar-user-profile > a.profile:hover {
  border-color: #d6cff7 !important;
  background: var(--cs-primary-light) !important;
}

body.admin #menu .staff-profile-image-small { width: 34px; height: 34px; }

body.admin.hide-sidebar:not(.show-sidebar) #menu { margin-inline-start: calc(var(--cs-sidebar-width) * -1); }
body.admin.hide-sidebar:not(.show-sidebar) #wrapper { margin-inline-start: 0; }

/* 05 Header */
body.admin #header {
  min-height: var(--cs-header-height);
  height: var(--cs-header-height);
  margin-inline-start: var(--cs-sidebar-width);
  border-bottom: 1px solid var(--cs-border);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--cs-shadow-sm);
}

body.admin #header nav,
body.admin #header nav > .tw-flex { min-height: var(--cs-header-height); }

body.admin #header .hide-menu {
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin-top: 14px !important;
  border-radius: 10px !important;
  color: var(--cs-text) !important;
}

body.admin #header .hide-menu:hover { color: var(--cs-primary) !important; background: var(--cs-primary-light) !important; }

#top_search #search_input {
  height: 42px !important;
  margin-top: 13px !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: 10px !important;
  background: #f7f8fc !important;
}

#top_search #search_input:focus {
  border-color: var(--cs-primary) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(57, 34, 201, 0.10) !important;
}

body.admin #header .navbar-nav > li > a {
  min-width: 40px;
  height: var(--cs-header-height);
  padding-top: 24px;
  padding-bottom: 20px;
  color: var(--cs-text);
}

body.admin #header .navbar-nav > li.icon > a:hover,
body.admin #header .navbar-nav > li.icon > a:focus { color: var(--cs-primary); }

body.admin #header .navbar-nav > li.icon > a > span:first-child {
  border-radius: 10px !important;
  background: var(--cs-primary) !important;
}

/* 06 Sidebar navigation */
body.admin .sidebar ul.nav li a {
  min-height: 42px;
  margin: 3px 0;
  padding: 10px 12px;
  border: 0 !important;
  border-radius: 9px;
  color: #4d5671;
  font-size: 14px;
  font-weight: 550;
  box-shadow: none !important;
}

body.admin .sidebar ul.nav li a i.menu-icon {
  width: 20px;
  margin-inline-end: 12px;
  color: #8189a1;
  font-size: 17px;
}

body.admin .sidebar > ul.nav > li.active > a:first-child,
body.admin .sidebar > ul.nav > li > a:hover,
body.admin .sidebar > ul.nav > li > a:focus {
  color: var(--cs-primary) !important;
  background: var(--cs-primary-light) !important;
}

body.admin .sidebar > ul.nav > li.active > a:first-child .menu-icon,
body.admin .sidebar > ul.nav > li > a:hover .menu-icon,
body.admin .sidebar > ul.nav > li > a:focus .menu-icon { color: var(--cs-primary) !important; }

body.admin .sidebar ul.nav li .nav-second-level {
  margin: 2px 0 7px 14px;
  padding-inline-start: 10px;
  border-inline-start: 1px solid #e1ddf5;
}

body.admin .sidebar ul.nav li .nav-second-level li a {
  min-height: 36px;
  padding: 8px 10px !important;
  color: var(--cs-text);
  font-size: 13px;
  font-weight: 500;
}

body.admin .sidebar ul.nav li .nav-second-level li.active a,
body.admin .sidebar ul.nav li .nav-second-level li a:hover {
  color: var(--cs-primary) !important;
  background: #f8f6ff !important;
}

/* 07 Buttons */
.btn {
  min-height: 40px;
  padding: 9px 15px;
  border-radius: var(--cs-radius-sm);
  font-weight: 650;
  letter-spacing: 0;
  box-shadow: none;
}

.btn-sm { min-height: 34px; padding: 6px 11px; }
.btn-lg { min-height: 48px; padding: 12px 20px; }

.btn-primary,
.btn-info {
  border-color: var(--cs-primary) !important;
  color: #fff !important;
  background: var(--cs-primary) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info:hover, .btn-info:focus, .btn-info:active {
  border-color: var(--cs-primary-hover) !important;
  background: var(--cs-primary-hover) !important;
  box-shadow: 0 6px 16px rgba(57, 34, 201, 0.18) !important;
}

.btn-default {
  border-color: #dfe2ec;
  color: var(--cs-heading);
  background: #fff;
}

.btn-default:hover, .btn-default:focus {
  border-color: #cbc5ed;
  color: var(--cs-primary);
  background: #faf9ff;
}

.btn-danger { border-color: var(--cs-danger); background: var(--cs-danger); }

/* 08 Forms */
.form-group { margin-bottom: 18px; }

.control-label,
.form-group > label {
  margin-bottom: 7px;
  color: var(--cs-heading);
  font-size: 13px;
  font-weight: 650;
}

.form-control,
.bootstrap-select > .dropdown-toggle,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple,
ul.tagit {
  min-height: 44px;
  border: 1px solid var(--cs-border) !important;
  border-radius: 9px !important;
  color: var(--cs-heading);
  background: #fff !important;
  box-shadow: none !important;
}

textarea.form-control { min-height: 110px; resize: vertical; }

.form-control:focus,
.bootstrap-select.open > .dropdown-toggle,
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection,
ul.tagit:focus-within {
  border-color: var(--cs-primary) !important;
  box-shadow: 0 0 0 3px rgba(57, 34, 201, 0.10) !important;
}

.checkbox label,
.radio label { color: var(--cs-text); }

input[type="checkbox"], input[type="radio"] { accent-color: var(--cs-primary); }

.has-error .form-control,
.has-error .bootstrap-select > .dropdown-toggle { border-color: var(--cs-danger) !important; }

.has-error .help-block,
.text-danger { color: var(--cs-danger); }

.cs-password-field { position: relative; }
.cs-password-field .form-control { padding-inline-end: 44px; }

.cs-password-toggle {
  position: absolute;
  inset-inline-end: 6px;
  bottom: 4px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--cs-muted);
  background: transparent;
}

.cs-password-toggle:hover { color: var(--cs-primary); background: var(--cs-primary-light); }

/* 09 Cards / panels */
.panel_s,
.widget,
.kan-ban-col,
.well,
.kanban-content-wrapper {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  background: var(--cs-surface);
  box-shadow: var(--cs-shadow-sm);
}

.panel_s > .panel-body,
.panel-body { padding: 22px; }

.panel-heading {
  min-height: 54px;
  padding: 16px 20px;
  border-color: var(--cs-border) !important;
  color: var(--cs-heading);
  background: #fff !important;
  font-weight: 650;
}

.top_stats_wrapper {
  min-height: 104px;
  padding: 20px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  background: #fff;
  box-shadow: var(--cs-shadow-sm);
}

.top_stats_wrapper svg { color: var(--cs-primary) !important; }

.widget { position: relative; margin-bottom: 22px; overflow: visible; }
.widget .panel_s { border: 0; box-shadow: none; }
.widget-dragger { color: #c8c4dc; }

/* 10 Tables */
.table-responsive,
.dataTables_wrapper {
  border-radius: var(--cs-radius-md);
}

.table {
  margin-bottom: 0;
  color: var(--cs-text);
  background: #fff;
}

.table > thead > tr > th {
  padding: 13px 14px;
  border-bottom: 1px solid var(--cs-border) !important;
  color: #66708c;
  background: #fafbfe;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.table > tbody > tr > td {
  padding: 14px;
  border-top: 1px solid #eef0f5;
  vertical-align: middle;
  font-size: 13px;
}

.table > tbody > tr:hover > td { background: #faf9ff; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  min-height: 40px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: #fff;
}

.pagination > li > a,
.pagination > li > span {
  min-width: 36px;
  margin-inline: 2px;
  padding: 8px 10px;
  border: 1px solid var(--cs-border);
  border-radius: 8px !important;
  color: var(--cs-text);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span { border-color: var(--cs-primary); background: var(--cs-primary); }

/* 11 Badges */
.label,
.badge {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.label-success, .badge-success, .bg-success { color: #0b7450 !important; background: #e7f8f1 !important; }
.label-warning, .badge-warning, .bg-warning { color: #9a5e00 !important; background: #fff3d7 !important; }
.label-danger, .badge-danger, .bg-danger { color: #ad3030 !important; background: #ffebeb !important; }
.label-info, .badge-info, .bg-info { color: var(--cs-primary) !important; background: var(--cs-primary-light) !important; }
.label-default, .badge-default { color: #626b80 !important; background: #eef0f5 !important; }

/* 12 Dropdowns */
.dropdown-menu {
  padding: 7px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  background: #fff;
  box-shadow: var(--cs-shadow-md);
}

.dropdown-menu > li > a {
  padding: 9px 11px;
  border-radius: 7px;
  color: var(--cs-text);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { color: var(--cs-primary); background: var(--cs-primary-light); }

/* 13 Modals */
.modal-content {
  overflow: hidden;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  background: #fff;
  box-shadow: 0 24px 70px rgba(16, 22, 49, 0.17);
}

.modal-header,
.modal-footer { padding: 18px 22px; border-color: var(--cs-border); }
.modal-body { padding: 22px; }
.modal-header .close { width: 34px; height: 34px; margin-top: -7px; border-radius: 8px; }
.modal-header .close:hover { color: var(--cs-primary); background: var(--cs-primary-light); opacity: 1; }

/* 14 Dashboard */
body.dashboard #wrapper,
body.dashboard .content { background: var(--cs-bg); }

body.dashboard .screen-options-btn {
  right: 28px;
  padding: 7px 12px;
  border: 1px solid var(--cs-border);
  border-top: 0;
  border-radius: 0 0 9px 9px;
  color: var(--cs-text);
  background: #fff;
}

body.dashboard .progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #eeedf5;
  box-shadow: none;
}

body.dashboard .progress-bar { border-radius: 999px; background: var(--cs-primary); }

/* 15 Authentication */
body.authentication,
body.login_admin {
  min-height: 100vh;
  color: var(--cs-text);
  background-color: var(--cs-bg) !important;
  background-image:
    linear-gradient(rgba(57, 34, 201, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 34, 201, 0.025) 1px, transparent 1px) !important;
  background-size: 34px 34px !important;
}

body.authentication .authentication-form-wrapper,
body.authentication .authentication-form-wrappe {
  max-width: 500px !important;
  padding-top: 64px !important;
}

body.authentication .company-logo img {
  width: 210px;
  max-height: 72px;
  object-fit: contain;
}

body.authentication .tw-bg-white {
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-lg) !important;
  box-shadow: var(--cs-shadow-md) !important;
}

/* 16 Client area */
body.customers { background: var(--cs-bg); }

body.customers .navbar.navbar-default.header {
  min-height: 72px;
  border: 0;
  border-bottom: 1px solid var(--cs-border);
  background: #fff;
  box-shadow: var(--cs-shadow-sm);
}

body.customers .navbar.navbar-default.header .container,
body.customers .navbar.navbar-default.header .navbar-header { min-height: 72px; }

body.customers .navbar-brand.logo img,
body.customers .navbar-brand.logo-text {
  max-width: 190px;
  max-height: 48px;
}

body.customers .navbar-brand.logo-text {
  width: 190px;
  height: 48px;
  overflow: hidden;
  color: transparent !important;
  white-space: nowrap;
  background: url("/home/logo-purple.png") left center / 184px auto no-repeat;
}

body.customers .navbar-nav > li > a {
  height: 72px;
  padding-top: 26px;
  color: var(--cs-text);
  font-weight: 600;
}

body.customers .navbar-nav > li.active > a,
body.customers .navbar-nav > li > a:hover,
body.customers .navbar-nav > li > a:focus { color: var(--cs-primary); background: var(--cs-primary-light); }

body.customers .customers-nav-item-profile > a { padding-top: 20px; }
body.customers .container { max-width: 1240px; }

body.customers .panel_s {
  overflow: hidden;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  box-shadow: var(--cs-shadow-sm);
}

body.customers .footer {
  margin-top: 40px;
  padding: 24px 0;
  border-top: 1px solid var(--cs-border);
  color: #7c849b;
  background: #fff;
}

body.customers .nav-tabs { border-color: var(--cs-border); }
body.customers .nav-tabs > li > a { border-radius: 8px 8px 0 0; color: var(--cs-text); }
body.customers .nav-tabs > li.active > a { border-color: var(--cs-border); border-bottom-color: #fff; color: var(--cs-primary); }

body.customers .costera-login-shell,
body.customers .costera-register-shell { font-family: inherit; }

.costera-auth-shell {
  min-height: calc(100vh - 114px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 18px;
  background-color: var(--cs-bg);
  background-image:
    linear-gradient(rgba(57, 34, 201, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 34, 201, 0.025) 1px, transparent 1px);
  background-size: 34px 34px;
}

.costera-auth-card {
  width: min(500px, 100%);
  padding: 38px 40px 32px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  background: #fff;
  box-shadow: var(--cs-shadow-md);
}

.costera-auth-logo { display: block; width: 190px; margin: 0 auto 26px; }
.costera-auth-logo img { display: block; width: 100%; height: auto; }

.costera-auth-icon {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  border-radius: 11px;
  color: var(--cs-primary);
  background: var(--cs-primary-light);
}

.costera-auth-card h1 { margin: 0 0 8px; text-align: center; font-size: 27px; }
.costera-auth-card > p { margin: 0 auto 27px; text-align: center; color: var(--cs-muted); line-height: 1.6; }
.costera-auth-card .btn { min-height: 48px; margin-top: 5px; }

.costera-auth-back {
  display: block;
  margin-top: 22px;
  text-align: center;
  color: var(--cs-text);
  font-weight: 600;
}

.costera-auth-back i { margin-inline-end: 6px; }

/* 17 Responsive */
@media (max-width: 1199px) {
  :root { --cs-sidebar-width: 240px; }
  body.admin .content { padding: 24px; }
}

@media (max-width: 768px) {
  h1, .h1 { font-size: 27px; }
  h2, .h2 { font-size: 23px; }

  body.admin #header {
    height: 62px;
    min-height: 62px;
    margin-inline-start: 0;
  }

  body.admin #wrapper { margin-inline-start: 0; }

  body.admin #menu.sidebar {
    width: 252px !important;
    margin-inline-start: -252px;
    box-shadow: 10px 0 35px rgba(16, 22, 49, 0.16);
  }

  body.admin.show-sidebar #menu.sidebar { margin-inline-start: 0; }
  body.admin.show-sidebar #wrapper { margin-inline-start: 0; }
  body.admin.show-sidebar #wrapper::after { background: rgba(17, 26, 64, 0.28); }

  body.admin .content { min-width: 0; padding: 18px 14px; }
  .panel_s > .panel-body, .panel-body { padding: 17px; }

  .table-responsive {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--cs-border);
    -webkit-overflow-scrolling: touch;
  }

  .modal-dialog { margin: 12px; }
  .modal-body, .modal-header, .modal-footer { padding: 17px; }

  body.customers .navbar.navbar-default.header .navbar-nav > li > a {
    height: auto;
    padding: 13px 18px;
  }

  body.authentication .authentication-form-wrapper,
  body.authentication .authentication-form-wrappe { padding: 30px 14px !important; }

  .costera-auth-shell { align-items: flex-start; padding: 28px 14px; }
  .costera-auth-card { padding: 28px 20px 24px; }
}

/* 18 Utilities / RTL */
[dir="rtl"] body.admin #wrapper { margin-inline-start: var(--cs-sidebar-width); margin-left: 0; }
[dir="rtl"] body.admin #header { margin-inline-start: var(--cs-sidebar-width); margin-left: 0; }
[dir="rtl"] body.admin .sidebar ul.nav li a i.menu-icon { float: right; margin-right: 0; }

.text-primary { color: var(--cs-primary) !important; }
.bg-primary { background: var(--cs-primary) !important; }
.border-primary { border-color: var(--cs-primary) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}