/* =========================================================
   OSHERMS brand layer — auth + CRM dashboard
   Matches public frontend (crimson / ink / paper).
   Loaded after theme CSS via layout/header.blade.php
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Source+Sans+3:wght@400;600;700&display=swap");

:root {
  --osh-crimson: #c60004;
  --osh-crimson-deep: #8f0003;
  --osh-crimson-soft: #ff7a7e;
  --osh-ink: #10141a;
  --osh-ink-soft: #1c232d;
  --osh-ink-elevated: #171d26;
  --osh-steel: #6b7685;
  --osh-mist: #e8edf2;
  --osh-paper: #f6f3ee;
  --osh-white: #ffffff;
  --osh-line: rgba(16, 20, 26, 0.1);
  --osh-line-strong: rgba(16, 20, 26, 0.14);
  --osh-info: #c60004;
  --osh-info-hover: #8f0003;
  --osh-radius: 0;
  --osh-shadow: 0 10px 28px rgba(16, 20, 26, 0.06);
}

/* —— Base type —— */
body {
  font-family: "Source Sans 3", "Montserrat", system-ui, sans-serif;
  color: var(--osh-ink);
  background: var(--osh-paper);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--osh-crimson);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--osh-crimson-deep);
}

/* —— Global accent overrides (cyan/blue → crimson) —— */
.text-info,
a.text-info,
a.text-info:hover,
a.text-info:focus {
  color: var(--osh-crimson) !important;
}

.btn-info,
.btn-info.disabled,
.btn-info:disabled,
.btn-outline-info,
.btn-cyan,
.btn-primary {
  background-color: var(--osh-crimson) !important;
  border-color: var(--osh-crimson) !important;
  color: #fff !important;
  box-shadow: none !important;
  border-radius: var(--osh-radius) !important;
  font-weight: 600;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-outline-info:hover,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--osh-crimson-deep) !important;
  border-color: var(--osh-crimson-deep) !important;
  color: #fff !important;
}

.btn-outline-info {
  background-color: transparent !important;
  color: var(--osh-crimson) !important;
}

.btn-outline-info:hover {
  color: #fff !important;
}

.btn-rounded,
.btn-circle {
  border-radius: 999px !important;
}

.badge-info,
.label-info,
.bg-info {
  background-color: var(--osh-crimson) !important;
}

.border-info {
  border-color: var(--osh-crimson) !important;
}

.progress-bar-info,
.progress-bar.bg-info {
  background-color: var(--osh-crimson) !important;
}

.custom-control-input:checked ~ .custom-control-indicator,
.custom-checkbox .custom-control-input:checked ~ .custom-control-indicator {
  background-color: var(--osh-crimson) !important;
  border-color: var(--osh-crimson) !important;
}

.form-control:focus,
.select2-container--default .select2-selection--single:focus,
.select2-container--focus .select2-selection--single {
  border-color: rgba(198, 0, 4, 0.45) !important;
  box-shadow: 0 0 0 0.15rem rgba(198, 0, 4, 0.12) !important;
}

.lstick {
  background: var(--osh-crimson) !important;
}

/* =========================================================
   AUTH / LOGIN — full-bleed training photo + soft veil
   ========================================================= */
html.logged-out,
body.logged-out,
.logged-out body {
  background: var(--osh-ink) !important;
  font-family: "Source Sans 3", "Montserrat", system-ui, sans-serif;
  min-height: 100vh;
}

.logged-out body #main-wrapper {
  position: relative;
  z-index: 2;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.logged-out .login-logo {
  position: relative;
  z-index: 3;
}

.logged-out .login-logo img {
  max-height: 64px;
  width: auto;
  max-width: 260px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25));
}

.logged-out body #main-wrapper .login-box {
  width: min(420px, calc(100% - 2rem)) !important;
  margin: 0 auto !important;
  padding: 2rem 1.75rem 1.75rem !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 0 !important;
  box-shadow: 0 22px 60px rgba(16, 20, 26, 0.28) !important;
  position: relative;
  z-index: 3;
}

.logged-out .login-box .title h4,
.logged-out .login-box .box-title,
.logged-out .login-box h3,
.logged-out .login-box h4 {
  color: var(--osh-ink) !important;
  font-family: "Bricolage Grotesque", "Montserrat", system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

.logged-out .login-box .form-control {
  border-radius: 0 !important;
  border-color: transparent transparent rgba(16, 20, 26, 0.18) transparent !important;
  background: transparent !important;
  color: var(--osh-ink) !important;
  font-size: 0.98rem;
}

.logged-out .login-box .form-control:focus {
  border-color: transparent transparent var(--osh-crimson) transparent !important;
  box-shadow: none !important;
}

.logged-out .login-box .btn-info.btn-lg.btn-block,
.logged-out .login-box #loginSubmitButton,
.logged-out .login-box button[type="submit"] {
  background: var(--osh-crimson) !important;
  border-color: var(--osh-crimson) !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  padding: 0.7rem 1rem !important;
}

.logged-out .login-box .btn-info.btn-lg.btn-block:hover,
.logged-out .login-box #loginSubmitButton:hover {
  background: var(--osh-crimson-deep) !important;
  border-color: var(--osh-crimson-deep) !important;
}

.logged-out .login-box a,
.logged-out .login-box .text-dark {
  color: var(--osh-steel) !important;
}

.logged-out .login-box a:hover,
.logged-out .login-box a.text-info:hover {
  color: var(--osh-crimson) !important;
}

/* Full-bleed real photo (Why Us / training) — stock graphics removed */
.logged-out body .login-background,
.logged-out .login-background {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none;
}

.logged-out .login-background .x-left,
.logged-out .login-background .x-right,
.logged-out .login-background .login-images {
  display: none !important;
}

.logged-out .login-background__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  filter: saturate(0.92) contrast(1.02);
}

.logged-out .login-background__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      160deg,
      rgba(246, 243, 238, 0.88) 0%,
      rgba(246, 243, 238, 0.78) 38%,
      rgba(16, 20, 26, 0.42) 100%
    ),
    linear-gradient(
      105deg,
      rgba(11, 28, 61, 0.28) 0%,
      rgba(198, 0, 4, 0.18) 100%
    );
}

/* =========================================================
   DASHBOARD CHROME — topbar + sidebar
   ========================================================= */
#main-wrapper {
  background: var(--osh-paper);
}

.page-wrapper {
  background: var(--osh-paper) !important;
}

.page-wrapper > .container-fluid {
  padding-top: 1.25rem;
}

/* Topbar */
.topbar {
  box-shadow: 0 8px 24px rgba(16, 20, 26, 0.12);
}

.topbar .navbar-collapse {
  background: var(--osh-ink) !important;
  border-bottom: none !important;
}

.topbar .top-navbar .navbar-header {
  background: var(--osh-ink) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: none !important;
}

.topbar .top-navbar .navbar-nav > .nav-item > .nav-link {
  color: rgba(255, 255, 255, 0.78) !important;
}

.topbar .top-navbar .navbar-nav > .nav-item > .nav-link:hover,
.topbar .top-navbar .navbar-nav > .nav-item.show > .nav-link {
  color: #fff !important;
}

.topbar .profile-pic {
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* High-contrast OSHERMS logo on dark topbar */
.topbar .navbar-brand.osh-dash-brand,
.navbar-header .osh-dash-brand {
  display: inline-flex !important;
  align-items: center;
  gap: 0.55rem;
  max-width: 240px;
  padding: 0.35rem 0.25rem !important;
  line-height: 1 !important;
}

.topbar .osh-dash-brand .logo-large {
  display: inline-block !important;
  height: 40px !important;
  width: auto !important;
  max-width: 190px !important;
  object-fit: contain;
}

.topbar .osh-dash-brand .logo-small {
  display: none !important;
  height: 34px !important;
  width: auto !important;
}

.fix-sidebar.mini-sidebar .osh-dash-brand .logo-large {
  display: none !important;
}

.fix-sidebar.mini-sidebar .osh-dash-brand .logo-small {
  display: inline-block !important;
}

#topnav_username {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 600 !important;
}

.search-box .app-search input {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border-radius: 0 !important;
}

.search-box .app-search input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.search-box .app-search .srh-btn,
.search-box .app-search a {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Left sidebar — deep ink, clean active states */
.left-sidebar,
.left-sidebar .scroll-sidebar,
.sidebar-nav {
  background: var(--osh-ink) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.sidebar-nav ul li a {
  color: rgba(255, 255, 255, 0.72) !important;
  font-weight: 500 !important;
  border-left: 3px solid transparent !important;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.sidebar-nav ul li a i {
  color: rgba(255, 255, 255, 0.55) !important;
}

.sidebar-nav ul li a:hover,
.sidebar-nav ul li a:hover i,
.sidebar-nav > ul > li:hover > a,
.sidebar-nav > ul > li:hover > a i {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.sidebar-nav ul li a.active,
.sidebar-nav ul li a.active i,
.sidebar-nav > ul > li > a.active,
.sidebar-nav > ul > li > a.active i,
.sidebar-nav > ul > li.active > a,
.sidebar-nav > ul > li.active > a i,
#sidebarnav > li.active > a,
#sidebarnav > li.active > a i {
  color: #fff !important;
  background: rgba(198, 0, 4, 0.16) !important;
  border-left-color: var(--osh-crimson) !important;
  font-weight: 600 !important;
}

.sidebar-nav > ul > li > a.active {
  background: rgba(198, 0, 4, 0.16) !important;
  border-left: 3px solid var(--osh-crimson) !important;
}

.sidebar-nav ul li ul {
  background: rgba(0, 0, 0, 0.18);
}

.sidebar-nav ul li ul li a {
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 0.875rem !important;
}

.sidebar-nav ul li ul li a.active,
.sidebar-nav ul li ul li a:hover {
  color: #fff !important;
  background: rgba(198, 0, 4, 0.14) !important;
}

#sidebarnav .nav-small-cap,
.sidebar-nav .nav-small-cap,
.sidebar-nav ul li.nav-small-cap {
  color: rgba(255, 255, 255, 0.35) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.68rem !important;
}

.sidebar-nav .has-arrow::after {
  border-color: rgba(255, 255, 255, 0.45) !important;
}

/* Mini-sidebar flyouts */
@media (min-width: 768px) {
  .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a {
    background: var(--osh-ink-elevated) !important;
    color: #fff !important;
  }

  .mini-sidebar .sidebar-nav #sidebarnav > li > ul {
    background: var(--osh-ink-elevated) !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  }
}

/* =========================================================
   PAGE HEADER / BREADCRUMBS / CONTENT
   ========================================================= */
.page-titles {
  margin-bottom: 1.25rem !important;
}

.page-titles h3,
.page-titles h4,
.page-titles .text-info {
  color: var(--osh-ink) !important;
  font-family: "Bricolage Grotesque", "Montserrat", system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

.page-titles .breadcrumb,
.page-titles .breadcrumb li,
.page-titles .breadcrumb li a,
.page-titles .breadcrumb .breadcrumb-item,
.page-titles .breadcrumb .breadcrumb-item a,
.list-pages-crumbs,
.list-pages-crumbs a {
  color: var(--osh-steel) !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-titles .breadcrumb .breadcrumb-item.active,
.page-titles .breadcrumb li.active,
.breadcrumb-item.active {
  color: var(--osh-ink) !important;
  font-weight: 700 !important;
}

.page-titles .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(107, 118, 133, 0.55) !important;
}

/* Cards & panels */
.card,
.card-body,
.ibox,
.white-box {
  background: #fff !important;
  border: 1px solid var(--osh-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.card {
  box-shadow: var(--osh-shadow) !important;
}

.card .card-title,
.card-header,
.ibox-title {
  color: var(--osh-ink) !important;
  font-weight: 700;
  border-color: var(--osh-line) !important;
}

/* Tables */
.table thead th,
.table th {
  color: var(--osh-ink-soft) !important;
  font-weight: 700 !important;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-color: var(--osh-line) !important;
  background: rgba(232, 237, 242, 0.45) !important;
}

.table td {
  border-color: var(--osh-line) !important;
  color: var(--osh-ink-soft);
  vertical-align: middle;
}

.table-hover tbody tr:hover {
  background: rgba(198, 0, 4, 0.03) !important;
}

/* List page actions / search */
#list-page-actions .btn,
.list-page-actions .btn,
.page-titles .btn {
  border-radius: 0 !important;
}

#list-page-actions .btn-danger,
.btn-add-circle,
.btn-add-circle-icon,
a.btn-danger.btn-sm,
.btn.btn-danger.btn-circle {
  background: var(--osh-crimson) !important;
  border-color: var(--osh-crimson) !important;
}

#list-page-actions input.form-control,
.page-titles input.form-control,
.search-form input.form-control {
  border-radius: 0 !important;
  border-color: var(--osh-line-strong) !important;
  background: #fff !important;
}

/* Tabs */
.nav-tabs {
  border-bottom: 1px solid var(--osh-line-strong) !important;
}

.nav-tabs .nav-link {
  color: var(--osh-steel) !important;
  border-radius: 0 !important;
  font-weight: 600;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--osh-crimson) !important;
  border-color: transparent transparent var(--osh-crimson) !important;
  background: transparent !important;
}

.nav-pills .nav-link.active {
  background-color: var(--osh-crimson) !important;
  color: #fff !important;
  border-radius: 0 !important;
}

/* Pagination */
.pagination > .active > a,
.pagination > .active > span,
.page-item.active .page-link {
  background-color: var(--osh-crimson) !important;
  border-color: var(--osh-crimson) !important;
}

.page-link {
  color: var(--osh-ink-soft);
  border-radius: 0 !important;
}

.page-link:hover {
  color: var(--osh-crimson);
}

/* Empty states */
.page-notification,
.page-notification-text,
#page-notification,
.no-results,
.count-zero {
  color: var(--osh-steel) !important;
}

/* Modals */
.modal-content {
  border-radius: 0 !important;
  border: 1px solid var(--osh-line) !important;
  box-shadow: 0 24px 60px rgba(16, 20, 26, 0.18) !important;
}

.modal-header {
  border-bottom: 1px solid var(--osh-line) !important;
}

.modal-title {
  font-family: "Bricolage Grotesque", "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  color: var(--osh-ink);
}

/* Dropdowns */
.dropdown-menu {
  border-radius: 0 !important;
  border: 1px solid var(--osh-line) !important;
  box-shadow: 0 16px 40px rgba(16, 20, 26, 0.12) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(198, 0, 4, 0.06) !important;
  color: var(--osh-crimson) !important;
}

/* Prestige link blue → crimson */
.comments .comment-text .x-name,
.comment-text .text-muted {
  color: var(--osh-steel) !important;
}

.client-selector,
.modal-selector {
  background-color: var(--osh-mist) !important;
}

/* Switches */
.switch label input[type="checkbox"]:checked + .lever,
input:checked + .lever {
  background-color: rgba(198, 0, 4, 0.35) !important;
}

.switch label input[type="checkbox"]:checked + .lever:after,
input:checked + .lever:after {
  background-color: var(--osh-crimson) !important;
}

/* Select2 */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: var(--osh-crimson) !important;
}

/* Dropzone */
.dropzone.dz-clickable:hover,
.dropzone.dz-started {
  border-color: rgba(198, 0, 4, 0.45) !important;
}

/* Relogin */
#reloginModal .btn-info,
.relogin .btn-info {
  background-color: var(--osh-crimson) !important;
  border-color: var(--osh-crimson) !important;
}

/* Settings sidebar keeps readable active state */
.settings .left-sidebar .sidebar-nav ul li a.active,
.settings .sidebar-nav > ul > li.active > a,
.settings .sidebar-nav ul li a.active,
.settings .sidebar-nav ul li a:hover {
  color: #fff !important;
  border-color: var(--osh-crimson) !important;
}

.settings .navbar-header {
  background-color: var(--osh-ink) !important;
  border-color: var(--osh-ink) !important;
}

/* =========================================================
   INLINE INVOICE DISCOUNTS - Custom Styles
   ========================================================= */
.bill_col_discount {
  min-width: 150px;
}

.bill_col_discount .input-group-append {
  width: 60px;
}

.bill_col_discount .js_item_discount_type {
  font-size: 12px;
  padding: 0.25rem;
}

.bill_col_discount.hidden {
  display: none !important;
}

button.disabled,
a.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}