/* Metropolis Font */
@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-Regular.eot');
  src: url('../fonts/Metropolis-Regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Metropolis-Regular.woff2') format('woff2'),
       url('../fonts/Metropolis-Regular.woff') format('woff'),
       url('../fonts/Metropolis-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Dark theme variables (matching clients.css) */
:root {
  --dark-bg-primary: #0f172a;
  --dark-bg-secondary: #1e293b;
  --dark-bg-tertiary: #334155;
  --dark-text-primary: #f8fafc;
  --dark-text-secondary: #cbd5e1;
  --dark-border: #475569;
  --primary-color: #58a6ff;
}

/* Apply Metropolis font to client area */
body,
body * {
  font-family: "Metropolis", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Navbar - matching admin theme */
body .navbar-default {
    z-index: 1;
    width: 230px;
    position: fixed;
    background-color: var(--dark-bg-secondary) !important;
    border-right: 1px solid var(--dark-border) !important;
    height: 100vh;
}

/* Header styling to match admin */
body .header,
body .navbar.navbar-default.header {
    background: var(--dark-bg-secondary) !important;
    border-bottom: 1px solid var(--dark-border) !important;
}

body .navbar-brand {
    color: var(--dark-text-primary) !important;
}

body .navbar-nav > li > a {
    color: var(--dark-text-primary) !important;
}

body .navbar-nav > li > a:hover,
body .navbar-nav > li.active > a {
    background: var(--dark-bg-tertiary) !important;
    color: var(--primary-color) !important;
}

/* Primary buttons */
.btn-primary, 
.available_time_info.hwp {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

body .cb-form-wrapper h4,
body #appointments-form h4 {
    color: var(--dark-text-primary) !important;
}

body #wrapper .btn-primary,
body .btn-pfxcbsubmit {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

body .cb-form-wrapper {
    top: calc(100% - 93.5%) !important;
    background: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
}

/* Button hover states */
body .btn-pfxcbsubmit:focus,
body .btn-pfxcbsubmit:active,
body .btn-pfxcbsubmit:hover,
body #wrapper .btn-primary.active.focus,
body #wrapper .btn-primary.active:focus,
body #wrapper .btn-primary.active:hover,
body #wrapper .btn-primary:active.focus,
body #wrapper .btn-primary:active:focus,
body #wrapper .btn-primary:active:hover,
body #wrapper .open > .dropdown-toggle.btn-primary.focus,
body #wrapper .open > .dropdown-toggle.btn-primary:focus,
body #wrapper .open > .dropdown-toggle.btn-primary:hover {
    background: rgba(88, 166, 255, 0.9) !important;
    border-color: rgba(88, 166, 255, 0.9) !important;
}

/* Dropdown menus */
body #perfex-callbacks-form .dropdown-menu > li > a:focus, 
body #perfex-callbacks-form .dropdown-menu > li > a:hover {
    background: var(--dark-bg-tertiary) !important;
    color: var(--primary-color) !important;
}

body #perfex-callbacks-form .message_wrapper div.inner.open ul li a > span {
    color: var(--dark-text-primary) !important;
}

/* Appointment forms */
body.appointments-external-form .form-group input {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.appointments-external-form .form-group input:focus {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--primary-color) !important;
    color: var(--dark-text-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.25) !important;
}

body.appointments-external-form,
body.appointments-external-form #wrapper {
    background: var(--dark-bg-primary) !important;
}

body .cb-form-wrapper {
    background: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body .main_wrapper {
    background: var(--dark-bg-secondary) !important;
    margin-top: 47px;
    color: var(--dark-text-primary) !important;
}

body .navbar.navbar-default.header .container ul.nav.navbar-nav.navbar-right {
    margin-right: 92px;
}

/* Additional client portal styling */
body #wrapper {
    background: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Form controls */
.form-control {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

.form-control:focus {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.25) !important;
}

/* Labels */
label {
    color: var(--dark-text-primary) !important;
}

/* Select dropdowns */
select.form-control {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

/* Textarea */
textarea.form-control {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

/* Modal styling */
.modal-content {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

.modal-header {
    background: var(--dark-bg-tertiary) !important;
    border-bottom: 1px solid var(--dark-border) !important;
}

.modal-footer {
    background: var(--dark-bg-tertiary) !important;
    border-top: 1px solid var(--dark-border) !important;
}

/* Close button */
.close {
    color: var(--dark-text-primary) !important;
    opacity: 0.8;
}

.close:hover {
    color: var(--dark-text-primary) !important;
    opacity: 1;
}

/* Additional client portal styling to match admin theme */

/* Content wrapper */
body .content-wrapper,
body .main-content {
    background: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Client specific panels and cards */
body .client-dashboard .panel,
body .client-dashboard .card {
    background: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
}

/* Client navigation menu */
body .client-nav,
body .client-menu {
    background: var(--dark-bg-secondary) !important;
}

body .client-nav a,
body .client-menu a {
    color: var(--dark-text-primary) !important;
}

body .client-nav a:hover,
body .client-menu a:hover {
    background: var(--dark-bg-tertiary) !important;
    color: var(--primary-color) !important;
}

/* Client tables and data */
body .client-data-table {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

/* Client forms */
body .client-form .form-group label {
    color: var(--dark-text-primary) !important;
}

/* Client invoices and documents */
body .invoice-preview,
body .document-preview {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

/* Item long description: same inline #424242 as admin; align with Note/Terms readability */
body .table.items td.description span[style*="#424242"],
body .table.items td.description span[style*="color:#424242"],
body .table.items td.description span[style*="color: #424242"],
body .table[class*="items-preview"] td.description span[style*="#424242"] {
    color: #cbd5e1 !important;
}

/* Company name from format_organization_info(): inline color:black */
body.customers b.company-name-formatted,
body.customers .company-name-formatted,
body.clients b.company-name-formatted,
body.clients .company-name-formatted {
    color: #e2e8f0 !important;
}

/* Client portal footer */
body .client-footer,
body .portal-footer {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-secondary) !important;
    border-top: 1px solid var(--dark-border) !important;
}

/* Override any remaining white backgrounds in client portal */
body.clients div:not(.btn):not(.badge),
body.clients section,
body.clients article {
    background-color: inherit !important;
}

/* Client portal text colors */
body.clients h1, body.clients h2, body.clients h3, 
body.clients h4, body.clients h5, body.clients h6 {
    color: var(--dark-text-primary) !important;
}

body.clients p, body.clients span:not(.badge), 
body.clients li, body.clients td, body.clients th {
    color: var(--dark-text-primary) !important;
}