/* Shared dark/light business theme. Keep validation and keyboard focus visible. */
:root {
    --ink: #182640;
    --muted: #52627a;
    --line: #c3ccdb;
    --bg: #e9edf4;
    --field-edge: #8999b1;
    --section-dark: #202e49;
}
body { background: var(--bg); }
.customer-credit-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid #bec9da; }
.customer-credit-section > h3 { margin-bottom: 15px; }
.form-grid .delivery-choice .checkbox { margin-top: 0; }
.delivery-choice { padding: 12px 14px; background: #eef2f8; border: 1px solid #c3cede; border-radius: 9px; }
.credit-setup-note { display: flex; align-items: center; gap: 10px; padding: 13px; background: #eff3f9; border-radius: 9px; color: #53617a; font-size: 12px; }
.price-pair { display: grid; gap: 3px; font-size: 11px; white-space: nowrap; }
.price-pair strong { margin-left: 7px; font-size: 12px; }
.trade-price { color: #276257; }
.trade-badge { background: #dcefe9; color: #225f50; border: 1px solid #a6cbbd; }
.catalog-table .item-picture { width: 60px; height: 48px; object-fit: contain; background: #eff3f9; border: 1px solid #c3cddd; border-radius: 8px; }
.heading-with-icon { display: flex; align-items: center; gap: 10px; }
.heading-with-icon > .app-icon { flex: 0 0 21px; width: 21px; height: 21px; color: #7764da; }
.panel-heading .heading-with-icon > .app-icon, .dashboard-panel-heading .heading-with-icon > .app-icon { color: #c8bfff; }
.section-pad > .heading-with-icon > .app-icon { color: #c8bfff; }
button, input, select, textarea { font: inherit; }
.main-shell { background: linear-gradient(135deg, #edf0f6, #e6ebf3); }
.topbar { background: linear-gradient(110deg, #fff, #f1f4fa); border-bottom-color: #b7c2d4; box-shadow: 0 3px 12px #18264009; }
.panel { border-color: #b6c2d5; box-shadow: 0 3px 0 #cdd5e2, 0 10px 24px #1826400b; }
.panel-heading, .dashboard-panel-heading {
    background: linear-gradient(115deg, var(--section-dark), #30415e);
    color: #fff;
    border-bottom: 1px solid #12203a;
    padding: 17px 22px;
}
.panel-heading h2, .dashboard-panel-heading h2 { color: #fff; }
.panel-heading p, .dashboard-panel-heading p { color: #d3ddeb; }
.panel-heading .badge { background: #ffffff18; color: #e8edf8; border: 1px solid #ffffff30; }
.section-pad > .settings-section-heading, .section-pad > .icon-heading, .section-pad > .heading-with-icon {
    margin: -24px -24px 22px;
    padding: 17px 24px;
    background: linear-gradient(115deg, var(--section-dark), #30415e);
    color: #fff;
    border-bottom: 1px solid #12203a;
}
.settings-section-heading p { color: #d3ddeb; }
.section-pad > .icon-heading svg { color: #c0b5ff; }
.settings-section-icon { background: #ffffff12; color: #c8bfff; border: 1px solid #ffffff26; }
input:not([type=checkbox]):not([type=hidden]):not([type=submit]), select, textarea, .form-control {
    border: 1px solid var(--field-edge);
    border-radius: 9px;
    background: #fcfdff;
    box-shadow: inset 0 1px 2px #17253f16, 0 1px 0 #fff;
    transition: border-color .15s, box-shadow .15s;
}
input:not([type=checkbox]):not([type=hidden]):hover, select:hover, textarea:hover { border-color: #647796; }
input:not([type=checkbox]):not([type=hidden]):focus, select:focus, textarea:focus {
    border-color: #6554dd;
    box-shadow: 0 0 0 3px #6554dd20;
    background: #fff;
}
input::placeholder, textarea::placeholder { color: #6d7c91; opacity: 1; }
textarea:focus-visible { outline: 3px solid #a795ff; outline-offset: 3px; }
input:disabled, select:disabled, textarea:disabled { background: #e9edf3; color: #52617a; }
input.invalid, select.invalid, textarea.invalid { border-color: #bc2949; outline: 2px solid #bc2949; outline-offset: 1px; }
input[type=checkbox] { outline-offset: 3px; }
input[type=file]::file-selector-button { border: 1px solid #a8b5cb; border-radius: 5px; background: #e8edf6; color: #20304e; padding: 5px 9px; margin-right: 10px; font: inherit; cursor: pointer; }
.btn-secondary, .header-back { border-color: #aebbd0; background: linear-gradient(#fff, #e9eef6); box-shadow: 0 3px 0 #bdc8d9; }
.btn-primary { background: linear-gradient(145deg, #7765ec, #5947cd); border-color: #5947cd; box-shadow: 0 3px 0 #3d2d9e; }
.btn:focus-visible { outline: 3px solid #8b79f3; outline-offset: 4px; }
th { background: #dfe6f0; color: #31425d; border-bottom-color: #afbed3; }
tbody tr:nth-child(even) { background: #f5f7fb; }
tbody tr:hover, .catalog-table tbody tr:hover { background: #eeecfc; }
.settings-tabs { flex-wrap: wrap; overflow: visible; border-bottom-color: #bdc8d9; gap: 8px; }
.settings-tabs a { background: #f4f6fa; border: 1px solid #afbdd1; color: #3c4d69; padding: 9px 12px; box-shadow: 0 2px 0 #ced6e3; }
.settings-tabs a.selected { border-color: #6554dd; background: #6554dd; color: #fff; }
.settings-logo-field { background: #eff3f9; border-color: #c1ccdc; }
.picture-preview { border-color: #9babc2; }
.settings-save-bar { background: linear-gradient(115deg, #202e49, #30415e); border-color: #182640; }
.settings-save-bar > span { color: #d7e1ee; }
.settings-example { border: 1px solid #c7bee8; }
.filter-panel { background: #f7f9fd; }
.dashboard-actions a, .dashboard-actions button { border-color: #b2bfd3; }
.dashboard-metric { border-top: 3px solid #6c5bda; }
.auth-content { background: linear-gradient(145deg, #fff, #edf1f8); }
.auth-content .form-control { background: #fcfdff; }
@media (max-width: 720px) {
    .tax-editor-fields > .btn { flex-basis: 100%; white-space: nowrap; }
    .section-pad > .settings-section-heading, .section-pad > .icon-heading, .section-pad > .heading-with-icon { margin: -20px -20px 20px; padding: 16px 20px; }
    .panel-heading, .dashboard-panel-heading { padding: 16px 18px; }
    .settings-tabs { gap: 6px; }
    .settings-tabs a { font-size: 11px; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
    input, select, textarea { transition: none; }
}