:root {
    --af-bg: #f4f6f9;
    --af-surface: #ffffff;
    --af-surface-muted: #f8faf9;
    --af-border: #dfe3e8;
    --af-border-soft: #e7ebef;
    --af-text: #1f2933;
    --af-heading: #102a43;
    --af-muted: #52616f;
    --af-primary: #237a57;
    --af-primary-dark: #195c40;
    --af-primary-soft: #e9f7ef;
    --af-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}

body { background: var(--af-bg); color: var(--af-text); }
.skip-link { background: var(--af-primary); border-radius: 0 0 6px 0; color: #fff; left: 0; padding: 10px 14px; position: fixed; top: -60px; z-index: 2000; }
.skip-link:focus { color: #fff; top: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid rgba(47, 158, 113, .45); outline-offset: 2px; }
.content-wrapper { background: var(--af-bg); }
.main-header { border-bottom: 1px solid var(--af-border); }
.main-sidebar { background: #17252f; }
.brand-link { border-bottom-color: rgba(255, 255, 255, .1) !important; }
.brand-mark { align-items: center; background: #2f9e71; border-radius: 6px; color: #fff; display: inline-flex; font-size: .86rem; font-weight: 800; height: 30px; justify-content: center; margin-right: 8px; width: 30px; }
.brand-text { font-weight: 700 !important; letter-spacing: 0; }
.brand-link .brand-text { color: #f4f7f9; }
.nav-sidebar .nav-link { border-radius: 4px; margin-bottom: 2px; }
.nav-sidebar .nav-link.active { background: #237a57 !important; box-shadow: none !important; }
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active { background: rgba(47, 158, 113, .2) !important; color: #fff !important; }
.nav-sidebar .nav-header { color: #8296a3; font-size: .7rem; font-weight: 700; letter-spacing: 0; padding-top: 18px; text-transform: uppercase; }
.sidebar-user { border-bottom: 1px solid rgba(255, 255, 255, .1); color: #d8e2e8; margin: 0 12px 10px; padding: 14px 2px; }
.sidebar-user-name { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-role { color: #9db0bb; font-size: .74rem; }
.content-header { padding: 18px .5rem 8px; }
.content { padding: 0 .5rem 24px; }
.content > .container-fluid { max-width: 1600px; }
.page-header { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 18px; }
.page-header h1 { color: var(--af-heading); font-weight: 700; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.card { background: var(--af-surface); border: 1px solid var(--af-border); border-radius: 6px; box-shadow: var(--af-shadow); }
.card-header { background: var(--af-surface); border-bottom-color: var(--af-border-soft); gap: 10px; }
.dashboard-card-header::after { display: none; }
.dashboard-card-action { align-items: center; background: #237a57; border: 1px solid #2f9e71; border-radius: 4px; color: #fff !important; display: inline-flex; font-size: .82rem; font-weight: 700; margin-left: auto; padding: 5px 10px; white-space: nowrap; }
.dashboard-card-action:hover, .dashboard-card-action:focus { background: #195c40; border-color: #237a57; color: #fff !important; text-decoration: none; }
.metric-card { border: 1px solid var(--af-border); border-left: 3px solid var(--metric-accent, var(--af-border)); border-radius: 6px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.metric-card:hover, a.metric-card:focus { border-color: #86b7a3; box-shadow: 0 8px 18px rgba(16, 24, 40, .1); transform: translateY(-1px); }
.metric-value { font-size: 1.8rem; font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.metric-card .card-body { min-height: 116px; }
.metric-card-with-icon .card-body { align-items: center; display: flex; gap: 14px; justify-content: space-between; }
.metric-card-with-icon .metric-icon { margin-left: auto; }
.metric-content { min-width: 0; }
.metric-icon { align-items: center; background: var(--metric-soft, var(--af-surface-muted)); border-radius: 6px; color: var(--metric-accent, var(--af-muted)); display: inline-flex; flex: 0 0 42px; font-size: 1.1rem; height: 42px; justify-content: center; width: 42px; }
.metric-blue { --metric-accent: #3273b9; --metric-soft: #eaf2fb; }
.metric-green { --metric-accent: #27845d; --metric-soft: #e7f5ee; }
.metric-amber { --metric-accent: #b87916; --metric-soft: #fff4df; }
.metric-coral { --metric-accent: #c85d4a; --metric-soft: #fcece8; }
.metric-cyan { --metric-accent: #25849a; --metric-soft: #e6f5f8; }
.metric-rose { --metric-accent: #ad4d68; --metric-soft: #faeaf0; }
.metric-red { --metric-accent: #bd3f45; --metric-soft: #fbe9ea; }
.metric-violet { --metric-accent: #7162a8; --metric-soft: #f0edf9; }
.table { color: var(--af-text); }
.table th { border-top: 0; color: var(--af-muted); font-size: .78rem; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; }
.table td { vertical-align: middle; }
.table-hover tbody tr:hover { background: var(--af-surface-muted); color: var(--af-text); }
.table-empty { color: #6c757d; padding: 28px 16px !important; text-align: center; }
.form-shell { margin-left: auto; margin-right: auto; max-width: 1180px; }
.form-shell-narrow { max-width: 980px; }
.form-card .card-body { padding: 24px; }
.form-section + .form-section { border-top: 1px solid var(--af-border-soft); margin-top: 20px; padding-top: 20px; }
.form-section-title { color: var(--af-muted); font-size: .78rem; font-weight: 700; letter-spacing: 0; margin-bottom: 14px; text-transform: uppercase; }
.phone-row + .phone-row { border-top: 1px solid var(--af-border-soft); padding-top: 16px; }
.product-row + .product-row, .company-service-row + .company-service-row { border-top: 1px solid var(--af-border-soft); padding-top: 16px; }
.registration-list-header { color: var(--af-muted); font-size: .78rem; font-weight: 700; margin-bottom: 7px; text-transform: uppercase; }
.registration-list-header-empty { display: none; }
.registration-tabs { border-bottom-color: var(--af-border); margin-top: 20px; }
.registration-tabs .nav-link { border-radius: 5px 5px 0 0; color: var(--af-muted); }
.registration-tabs .nav-link:hover, .registration-tabs .nav-link:focus { border-color: var(--af-border-soft) var(--af-border-soft) var(--af-border); color: var(--af-primary-dark); }
.registration-tabs .nav-link.active { background: var(--af-surface-muted); border-color: var(--af-border) var(--af-border) var(--af-surface-muted); color: var(--af-heading); }
.registration-tabs-content { background: var(--af-surface-muted); border: 1px solid var(--af-border); border-top: 0; border-radius: 0 0 5px 5px; }
.registration-tabs-content > .form-section { border-top: 0; margin-top: 0; min-height: 76px; padding: 18px; }
.address-row { border: 1px solid var(--af-border-soft); border-radius: 6px; padding: 16px 16px 0; }
.address-row + .address-row { margin-top: 14px; }
.address-row-header { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 12px; }
.address-row-title { color: var(--af-heading); font-size: .9rem; font-weight: 700; }
.phone-action-label { color: var(--af-muted); font-size: .875rem; font-weight: 700; margin-bottom: 8px; }
.phone-remove-group { padding-top: 0; }
.form-group label, .custom-control-label { color: var(--af-muted); font-size: .86rem; font-weight: 600; }
.required-marker { color: #c0392b; margin-left: 3px; }
.form-control { background: var(--af-surface); border-color: #cbd5df; border-radius: 6px; color: var(--af-text); min-height: 42px; }
.form-control:focus { border-color: #2f855a; box-shadow: 0 0 0 .2rem rgba(47, 133, 90, .14); }
.input-group-text { background: var(--af-surface-muted); border-color: #cbd5df; color: var(--af-muted); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--af-primary); border-color: var(--af-primary); }
.form-footer { align-items: center; background: var(--af-surface-muted); border-top: 1px solid var(--af-border-soft); display: flex; gap: 8px; justify-content: flex-end; margin: 20px -24px -24px; padding: 16px 24px; }
.form-actions { border-top: 1px solid var(--af-border-soft); display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 14px; }
.btn { border-radius: 6px; }
.btn-primary { background-color: var(--af-primary); border-color: var(--af-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--af-primary-dark); border-color: var(--af-primary-dark); }
.alert { border-radius: 6px; }
.info-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.info-item { background: var(--af-surface-muted); border: 1px solid var(--af-border-soft); border-radius: 6px; min-height: 64px; padding: 10px 12px; }
.info-item-wide { grid-column: 1 / -1; }
.info-label { color: var(--af-muted); font-size: .75rem; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; }
.info-value { color: var(--af-heading); font-weight: 600; overflow-wrap: anywhere; }
.compact-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.compact-actions form { margin: 0; }
.btn-icon { align-items: center; display: inline-flex; height: 34px; justify-content: center; padding: 0; width: 34px; }
.status-stack { align-items: flex-start; display: flex; flex-direction: column; gap: 3px; }
.status-stack .small { color: #6c757d; }
.section-nav { border-bottom: 1px solid var(--af-border); display: flex; gap: 22px; overflow-x: auto; }
.section-nav a { border-bottom: 2px solid transparent; color: var(--af-muted); font-size: .88rem; font-weight: 600; padding: 9px 0; white-space: nowrap; }
.section-nav a:hover, .section-nav a:focus { border-bottom-color: var(--af-primary); color: var(--af-primary-dark); text-decoration: none; }
.payment-form { background: var(--af-surface); border: 1px solid var(--af-border); border-radius: 6px; box-shadow: 0 8px 18px rgba(16, 24, 40, .12); max-width: 320px; min-width: 280px; padding: 14px; }
.service-overview { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
.service-block { border-left: 3px solid var(--af-border); min-width: 0; padding-left: 12px; }
.service-block-title { color: var(--af-muted); font-size: .75rem; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; }
.service-block-line { margin-bottom: 4px; overflow-wrap: anywhere; }
.service-notes { border-top: 1px solid var(--af-border-soft); grid-column: 1 / -1; padding-top: 14px; }
.details-panel { background: var(--af-surface-muted); border: 1px solid var(--af-border-soft); border-radius: 6px; padding: 12px; }
.details-panel[open] { background: var(--af-surface); }
.details-panel > summary { color: var(--af-primary-dark); margin: -2px 0 10px; }
details summary { cursor: pointer; font-weight: 600; }
.login-shell { align-items: center; display: flex; min-height: 100vh; padding: 32px 16px; position: relative; }
.login-card { margin: auto; max-width: 420px; width: 100%; }
.login-card .card-body { padding: 32px; }
.login-brand { align-items: center; color: var(--af-heading); display: flex; font-size: 1.65rem; font-weight: 700; }
.login-subtitle { color: #6c757d; font-size: .92rem; }
.login-theme-toggle { position: absolute; right: 20px; top: 20px; }
.theme-toggle { align-items: center; display: inline-flex; height: 38px; justify-content: center; width: 38px; }
.password-control { position: relative; }
.password-control .form-control { padding-right: 44px; }
.password-toggle { align-items: center; background: transparent; border: 0; border-left: 1px solid #cbd5df; color: var(--af-muted); display: inline-flex; height: 36px; justify-content: center; position: absolute; right: 1px; top: 1px; width: 40px; z-index: 4; }
.password-toggle:hover { color: var(--af-primary-dark); }
.password-toggle:focus-visible { box-shadow: inset 0 0 0 2px var(--af-primary); outline: 0; }
.searchable-select { position: relative; width: 100%; }
.searchable-select-native { height: 1px !important; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; width: 1px !important; }
.searchable-select-input { background-image: linear-gradient(45deg, transparent 50%, var(--af-muted) 50%), linear-gradient(135deg, var(--af-muted) 50%, transparent 50%); background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; padding-right: 34px; }
.searchable-select-menu { background: var(--af-surface); border: 1px solid var(--af-border); border-radius: 6px; box-shadow: 0 8px 18px rgba(16, 24, 40, .16); display: none; left: 0; max-height: 260px; overflow-y: auto; position: absolute; right: 0; top: calc(100% + 4px); z-index: 1060; }
.searchable-select-menu.show { display: block; }
.searchable-select-option { background: transparent; border: 0; color: var(--af-text); display: block; padding: 9px 12px; text-align: left; width: 100%; }
.searchable-select-option:hover, .searchable-select-option:focus { background: var(--af-primary-soft); color: var(--af-primary-dark); outline: 0; }
.searchable-select-empty { color: var(--af-muted); padding: 10px 12px; }

.dark-mode {
    --af-bg: #151b20;
    --af-surface: #20272d;
    --af-surface-muted: #252e35;
    --af-border: #39444d;
    --af-border-soft: #303a42;
    --af-text: #e2e8ec;
    --af-heading: #f4f7f9;
    --af-muted: #b3c0c8;
    --af-primary: #38a979;
    --af-primary-dark: #62c99d;
    --af-primary-soft: #213e34;
    --af-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    background-color: var(--af-bg) !important;
    color: var(--af-text);
}
.dark-mode .main-header { background: #20272d !important; }
.dark-mode .content-wrapper { background: var(--af-bg) !important; }
.dark-mode .main-header .nav-link { color: #d5dde2 !important; }
.dark-mode .card, .dark-mode .card-header, .dark-mode .card-footer { background: var(--af-surface); color: var(--af-text); }
.dark-mode .bg-white { background-color: var(--af-surface) !important; color: var(--af-text) !important; }
.dark-mode .metric-value { color: var(--af-heading); }
.dark-mode .metric-icon { background: #29333a; color: var(--metric-accent); }
body.dark-mode .form-control, body.dark-mode .custom-select { background: #182026 !important; border-color: #48545e; color: #f0f3f5; }
.dark-mode .input-group-text { background: #29333a; border-color: #48545e; color: #c5d0d6; }
.dark-mode .password-toggle { border-left-color: #48545e; color: #c5d0d6; }
.dark-mode .password-toggle:hover { color: #fff; }
.dark-mode .searchable-select-menu { background: #20272d; border-color: #48545e; }
.dark-mode .searchable-select-option { color: #f0f3f5; }
.dark-mode .searchable-select-option:hover, .dark-mode .searchable-select-option:focus { background: #293b34; color: #fff; }
.dark-mode .form-control::placeholder { color: #82919b; }
.dark-mode .dropdown-menu { background: var(--af-surface); border-color: var(--af-border); }
.dark-mode .dropdown-item { color: var(--af-text); }
.dark-mode .dropdown-item:hover { background: var(--af-surface-muted); }
.dark-mode .text-dark { color: var(--af-heading) !important; }
.dark-mode .text-muted { color: #a6b4bd !important; }
.dark-mode .btn-outline-secondary { border-color: #7f8d96; color: #d2dbe0; }
.dark-mode .btn-outline-secondary:hover { background: #39444d; color: #fff; }
.dark-mode .btn-primary { background-color: var(--af-primary); border-color: var(--af-primary); color: #fff; }
.dark-mode .btn-primary:hover, .dark-mode .btn-primary:focus { background-color: #2b8e65; border-color: #2b8e65; }
.dark-mode .table-bordered td, .dark-mode .table-bordered th, .dark-mode .table td, .dark-mode .table th { border-color: var(--af-border); }
.dark-mode .table .thead-light th {
    background-color: #29333a;
    border-color: #3b4851;
    color: #dce4e9;
}
.dark-mode .table-hover tbody tr:hover { background-color: #273139; color: var(--af-text); }
.dark-mode .table-warning, .dark-mode .table-warning > td, .dark-mode .table-warning > th {
    background-color: #493f27;
    color: #f1e4bd;
}
.dark-mode .modal-content { background: var(--af-surface); color: var(--af-text); }

@media (max-width: 768px) {
    body.sidebar-mini .wrapper { display: flex; flex-direction: column; min-height: 100vh; }
    body.sidebar-mini .wrapper > .main-header, body.sidebar-mini .wrapper > .main-footer { flex: 0 0 auto; }
    body.sidebar-mini .wrapper > .content-wrapper { flex: 1 0 auto; min-height: 0 !important; }
    .content-header { padding-top: 14px; }
    .content > .container-fluid { padding-left: 0; padding-right: 0; }
    .page-header { align-items: flex-start; flex-direction: column; }
    .dashboard-page .page-header { margin-bottom: 12px; }
    .row.form-shell > [class*="col-"] { margin-bottom: 10px !important; }
    .metric-card { margin-bottom: 0; }
    .metric-card .card-body { min-height: 84px; padding: 12px 14px; }
    .metric-value { font-size: 1.5rem; }
    .metric-icon { flex-basis: 36px; font-size: 1rem; height: 36px; width: 36px; }
    .metric-content .mb-2, .metric-card .text-muted.mb-2 { margin-bottom: 4px !important; }
    .form-card .card-body { padding: 18px; }
    .form-footer { align-items: stretch; flex-direction: column-reverse; margin: 18px -18px -18px; padding: 14px 18px; }
    .form-footer .btn { width: 100%; }
    .compact-actions { justify-content: flex-start; }
    .service-overview { grid-template-columns: 1fr; }
    .registration-list-header { display: none; }
    .registration-list-field::before { color: var(--af-muted); content: attr(data-mobile-label); display: block; font-size: .78rem; font-weight: 700; margin-bottom: 5px; text-transform: uppercase; }
}

@supports (min-height: 100dvh) {
    @media (max-width: 768px) {
        body.sidebar-mini .wrapper { min-height: 100dvh; }
    }
}

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