/* TuniBill application theme, aligned with the login experience. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --tb-blue: #2b6cb0;
  --tb-blue-dark: #2c5282;
  --tb-blue-bright: #2387ce;
  --tb-teal: #469c9f;
  --tb-ink: #1a202c;
  --tb-text: #2d3748;
  --tb-muted: #718096;
  --tb-border: #e2e8f0;
  --tb-surface: #ffffff;
  --tb-surface-subtle: #f7fafc;
  --tb-page: #eaf1f5;
  --tb-danger: #c53030;
  --tb-success: #16835a;
  --tb-radius: 8px;
  --tb-shadow: 0 8px 24px rgba(45, 55, 72, 0.10);
}

html,
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: var(--tb-page) !important;
  color: var(--tb-text) !important;
}

body {
  min-height: 100vh;
  background-image: linear-gradient(135deg, #edf5f8 0%, #e3ebf1 100%) !important;
  background-attachment: fixed !important;
}

/* Header and navigation */
.main-header {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid var(--tb-border) !important;
  box-shadow: 0 2px 12px rgba(45, 55, 72, 0.08) !important;
}

.main-header .seipkon-logo {
  background: #ffffff !important;
  border-right: 1px solid var(--tb-border) !important;
}

.main-header .navbar.navbar-default {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.header-top-right-section > ul > li > a {
  color: var(--tb-muted) !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
}

.header-top-right-section > ul > li > a:hover,
.header-top-right-section > .nav .open > a,
.header-top-right-section > .nav .open > a:hover,
.header-top-right-section > .nav > li > a:hover {
  color: var(--tb-blue) !important;
  background: #edf5f8 !important;
}

.header-top-right-section > ul > li > a > span {
  background: var(--tb-blue) !important;
}

#sidebarCollapse {
  color: var(--tb-muted) !important;
  background: var(--tb-surface-subtle) !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

#sidebarCollapse:hover {
  color: var(--tb-blue) !important;
  border-color: #9dc8e5 !important;
  background: #ffffff !important;
}

#sidebar {
  background: rgba(255, 255, 255, 0.97) !important;
  border-right: 1px solid var(--tb-border) !important;
  box-shadow: 2px 0 12px rgba(45, 55, 72, 0.05) !important;
}

.sidebar-profile {
  border-bottom: 1px solid var(--tb-border) !important;
}

.sidebar-profile .profile-info > h3 { color: var(--tb-ink) !important; }
.sidebar-profile .profile-info > p { color: var(--tb-muted) !important; }
.profile-avatar img { border: 2px solid #c9e0ed !important; }

.menu-section > h3 {
  color: #5c7891 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}

.list-unstyled li a {
  color: #4a5568 !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 6px 6px 0 !important;
  margin: 2px 8px 2px 0 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.list-unstyled li a:hover,
.list-unstyled li.active > a {
  color: var(--tb-blue) !important;
  background: #eaf4f8 !important;
  border-left-color: var(--tb-blue-bright) !important;
}

.list-unstyled li a > i { color: #8b9bae !important; }
.list-unstyled li a:hover > i,
.list-unstyled li.active > a > i { color: var(--tb-blue-bright) !important; }
.list-unstyled ul > li > a { color: #718096 !important; }

/* Main content and surfaces */
#content { background: transparent !important; }

/* Page transitions use the same soft fade-and-rise motion as the login card. */
.page-content {
  animation: tb-page-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: center top;
}

body.tb-page-leaving .page-content {
  animation: tb-page-leave 0.18s ease-in both;
  pointer-events: none;
}

@keyframes tb-page-enter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes tb-page-leave {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-content,
  body.tb-page-leaving .page-content {
    animation: none !important;
  }
}

.breadcromb-area,
.page-box,
.widget_card_page,
.panel,
.mail-read-box,
.mail-sidebar,
.total-group-employee {
  background: var(--tb-surface) !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: var(--tb-radius) !important;
  box-shadow: var(--tb-shadow) !important;
  color: var(--tb-text) !important;
}

.breadcromb-area { box-shadow: 0 3px 12px rgba(45, 55, 72, 0.07) !important; }
.seipkon-breadcromb-left > h3,
.full-width-breadcrumb-heading > h3,
h1, h2, h3, h4, h5, h6 { color: var(--tb-ink) !important; }

.seipkon-breadcromb-right li,
.seipkon-breadcromb-right li a,
ol.breadcrumb li { color: var(--tb-muted) !important; }
ol.breadcrumb { background: transparent !important; border: 0 !important; }
ol.breadcrumb a,
.full-width-breadcrumb-heading > h3 > i { color: var(--tb-blue) !important; }

.page-box:hover,
.widget_card_page:hover {
  box-shadow: 0 10px 26px rgba(45, 55, 72, 0.13) !important;
}

.widget_card { border: 1px solid var(--tb-border) !important; border-radius: var(--tb-radius) !important; }
.widget_card_page h4,
.panel-body { color: var(--tb-text) !important; }
.panel-default > .panel-heading {
  background: var(--tb-surface-subtle) !important;
  color: var(--tb-ink) !important;
  border-color: var(--tb-border) !important;
}

/* Tables and data controls */
.table > thead > tr > th,
table tfoot > tr > td,
table tfoot > tr > th,
table thead > tr > td,
table thead > tr > th {
  background: #edf5f8 !important;
  color: #34536b !important;
  border-color: #d8e6ed !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

.table > tbody > tr > td,
.table > tbody > tr > th { color: var(--tb-text) !important; border-color: #edf2f7 !important; }
.table > tbody > tr:hover,
.table-hover tbody tr:hover { background: #f3f8fa !important; }
.table-striped tbody tr:nth-of-type(odd),
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 { background-color: #f8fbfc !important; }
table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even > .sorting_1 { background-color: #ffffff !important; }

.dataTables_filter > label,
.dataTables_length > label,
.dataTables_info { color: var(--tb-muted) !important; }

.dataTables_filter input,
.dataTables_length select {
  background: #ffffff !important;
  border: 1px solid var(--tb-border) !important;
  color: var(--tb-text) !important;
  border-radius: 6px !important;
}

.dataTables_paginate > ul.pagination > li.paginate_button.active > a,
.paginate_button.current {
  background: var(--tb-blue) !important;
  border-color: var(--tb-blue) !important;
  color: #ffffff !important;
}

.dataTables_paginate a,
.dataTables_paginate > ul.pagination > li.paginate_button > a {
  background: #ffffff !important;
  border-color: var(--tb-border) !important;
  color: var(--tb-text) !important;
  border-radius: 6px !important;
}

/* Buttons and controls */
.btn {
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-primary, .label-primary, .seipkon-btn-primary {
  background: var(--tb-blue) !important;
  border-color: var(--tb-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(43, 108, 176, 0.22) !important;
}

.btn-primary:hover, .btn-primary:focus, .seipkon-btn-primary:hover {
  background: var(--tb-blue-dark) !important;
  border-color: var(--tb-blue-dark) !important;
  box-shadow: 0 4px 12px rgba(43, 108, 176, 0.28) !important;
}

.btn-success, .label-success, .seipkon-btn-success { background: var(--tb-success) !important; border-color: var(--tb-success) !important; }
.btn-danger, .label-danger, .seipkon-btn-danger { background: var(--tb-danger) !important; border-color: var(--tb-danger) !important; }
.btn-info, .label-info, .seipkon-btn-info { background: var(--tb-blue-bright) !important; border-color: var(--tb-blue-bright) !important; }
.btn-warning, .label-warning, .seipkon-btn-warning { background: #c98718 !important; border-color: #c98718 !important; }
.btn-default, .label-default, .seipkon-btn-default {
  background: #ffffff !important;
  border: 1px solid var(--tb-border) !important;
  color: var(--tb-text) !important;
}
.btn-default:hover { background: var(--tb-surface-subtle) !important; color: var(--tb-blue) !important; }

.form-group .form-control,
input.form-control,
textarea.form-control,
select.form-control {
  background: var(--tb-surface-subtle) !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 6px !important;
  color: var(--tb-text) !important;
  box-shadow: none !important;
}

.form-group .form-control:focus,
input.form-control:focus,
textarea.form-control:focus {
  background: #ffffff !important;
  border-color: var(--tb-blue) !important;
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15) !important;
  color: var(--tb-text) !important;
}

.form-control::placeholder { color: #a0aec0 !important; }
.form-control:disabled,
.form-control[readonly] { background: #edf2f7 !important; }
.control-label,
label.control-label,
.add-product-form-group form p label,
.create-page-left label,
p.control-label { color: #4a5568 !important; }

/* Select menus */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.bootstrap-select > button,
.chosen-container-single .chosen-single {
  background: var(--tb-surface-subtle) !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 6px !important;
  color: var(--tb-text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--tb-text) !important; }
.select2-dropdown,
.chosen-container .chosen-drop,
.dropdown-menu {
  background: #ffffff !important;
  border: 1px solid var(--tb-border) !important;
  box-shadow: var(--tb-shadow) !important;
}
.select2-results__option,
.dropdown-menu > li > a,
.chosen-results li { color: var(--tb-text) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.chosen-results li.highlighted,
.dropdown-menu > li > a:hover { background: #eaf4f8 !important; color: var(--tb-blue) !important; }

/* Dialogs and menu popovers */
.modal-content,
.profile-box,
.message-box,
.notification-box,
.swal2-popup {
  background: #ffffff !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: var(--tb-radius) !important;
  box-shadow: 0 16px 42px rgba(45, 55, 72, 0.18) !important;
  color: var(--tb-text) !important;
}

.modal-header { background: #f7fafc !important; border-bottom: 1px solid var(--tb-border) !important; }
.modal-title,
.swal2-title,
.swal2-html-container { color: var(--tb-ink) !important; }
.modal-footer,
.message-header,
.notification-header { border-color: var(--tb-border) !important; }
.modal-backdrop.tb-document-backdrop {
  background-color: #2d3748 !important;
}
.modal-backdrop.tb-document-backdrop.in {
  opacity: 0.52 !important;
}
/* Keep nested Bootstrap modals clickable: backdrop must stay below the dialog
   so footer buttons (Valider/Annuler) receive pointer events. */
.modal {
  z-index: 1060 !important;
}
.modal-backdrop {
  z-index: 1050 !important;
}
.modal-dialog,
.modal-content,
.modal-footer,
.modal-footer .btn {
  pointer-events: auto !important;
}
.close { color: var(--tb-muted) !important; }
.close:hover { color: var(--tb-blue) !important; }
.profile-box > ul > li,
.notification-body li,
.message-body li { border-color: #edf2f7 !important; }
.profile-box > ul > li > a,
.message-body > ul > li > a,
.notification-body > ul > li > a { color: var(--tb-text) !important; }
.profile-box > ul > li > a:hover,
.message-body ul li a:hover,
.notification-body ul li a:hover { background: #f3f8fa !important; color: var(--tb-blue) !important; }
.profile-box > ul > li > a > i { color: var(--tb-blue) !important; }
.message-footer,
.notification-footer { background: #f7fafc !important; border-color: var(--tb-border) !important; }
.message-footer > a,
.notification-footer > a { color: var(--tb-blue) !important; }

.title-devis { color: var(--tb-ink) !important; border-bottom-color: var(--tb-border) !important; }
.progress { background: #e2e8f0 !important; border-radius: 6px !important; }
.progress-title,
.progress-size,
.invoice-address p,
.invoice-subtotal p,
.mail-sidebar ul li a,
.total-group-employee ul li a { color: var(--tb-muted) !important; }
.invoice-head > h2 { color: #a0aec0 !important; }
.invoice-address h3,
.total-group-employee > h3 { color: var(--tb-ink) !important; border-color: var(--tb-border) !important; }
.invoice-subtotal p span { color: var(--tb-blue) !important; }

.seipkon-footer-area {
  background: transparent !important;
  border-top: 1px solid var(--tb-border) !important;
  color: var(--tb-muted) !important;
}

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #edf2f7; }
::-webkit-scrollbar-thumb { background: #9dc8e5; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #6eaed4; }