/* ============================================================
   Easy Invoice - Design system harmonization
   POS / Retail / E-commerce / Accounting / Smart Touch
   This layer standardizes visual hierarchy without changing behavior.
   ============================================================ */

:root {
    --ei-ink: #102A3D;
    --ei-ink-2: #17384F;
    --ei-navy: #203A4E;
    --ei-navy-2: #2C4A5E;
    --ei-navy-3: #3D5A6F;
    --ei-teal: #17A2B8;
    --ei-teal-2: #0EA5B7;
    --ei-teal-dark: #087F92;
    --ei-success: #208A3A;
    --ei-success-2: #28A745;
    --ei-warning: #F2A70B;
    --ei-danger: #C43D4A;
    --ei-bg: #EEF4F7;
    --ei-surface: #FFFFFF;
    --ei-surface-soft: #F7FAFC;
    --ei-line: #D4E2EA;
    --ei-line-strong: #BFD4DF;
    --ei-muted: #60798D;
    --ei-shadow-soft: 0 10px 24px rgba(15, 39, 64, .08);
    --ei-shadow-lift: 0 18px 42px rgba(15, 39, 64, .14);
}

body {
    background:
        linear-gradient(180deg, #F5F9FB 0%, var(--ei-bg) 100%) !important;
    color: var(--ei-ink);
}

.nv-bar {
    background:
        linear-gradient(90deg, #132C3C 0%, #203F52 48%, #315B70 100%) !important;
    border-bottom-color: rgba(23, 162, 184, .88) !important;
    box-shadow: 0 8px 26px rgba(15, 39, 64, .24) !important;
}

.nv-link-ico,
.nv-brand-bolt,
.ft-ico {
    color: #5FD6E2 !important;
}

.ei-main:not(.auth-main) :where(.card, .panel, .subpanel, .accounting-panel, .summary-card, .quick-actions, .setup-status, .pl-card, .pl-kpi, .pl-home-panel) {
    border-color: var(--ei-line) !important;
    box-shadow: var(--ei-shadow-soft);
}

.ei-main:not(.auth-main) :where(.card-header, .panel-head, .subpanel-head, .accounting-panel-head) {
    border-bottom-color: var(--ei-line) !important;
}

.ei-main:not(.auth-main) :where(.form-control, .form-select, .input-group-text),
.modal :where(.form-control, .form-select, .input-group-text) {
    border-color: var(--ei-line) !important;
}

.ei-main:not(.auth-main) :where(.form-control:focus, .form-select:focus),
.modal :where(.form-control:focus, .form-select:focus) {
    border-color: var(--ei-teal) !important;
    box-shadow: 0 0 0 .18rem rgba(23, 162, 184, .14) !important;
}

.ei-main:not(.auth-main) :where(.btn),
.modal :where(.btn),
.swal2-popup :where(.btn) {
    border-radius: 8px;
    font-weight: 850;
    letter-spacing: 0;
}

/* Brand actions: primary work should read as EasyInvoice teal, not generic green. */
.ei-main:not(.auth-main) :where(.btn-primary, .btn-info, .btn-success):not(.confirmations-file-btn--classify):not(.btn-semantic-success),
.modal :where(.btn-primary, .btn-info, .btn-success):not(.confirmations-file-btn--classify):not(.btn-semantic-success),
.swal2-popup :where(.btn-primary, .btn-info, .btn-success):not(.btn-semantic-success),
.accounting-wrapper :where(.btn-primary, .btn-success):not(.btn-semantic-success),
.accounting-actions :where(.btn-primary, .btn-success):not(.btn-semantic-success) {
    background: linear-gradient(135deg, var(--ei-teal-dark), var(--ei-teal)) !important;
    border-color: var(--ei-teal-dark) !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 22px rgba(23, 162, 184, .22) !important;
}

.ei-main:not(.auth-main) :where(.btn-primary, .btn-info, .btn-success):not(.confirmations-file-btn--classify):not(.btn-semantic-success):hover,
.modal :where(.btn-primary, .btn-info, .btn-success):not(.confirmations-file-btn--classify):not(.btn-semantic-success):hover,
.swal2-popup :where(.btn-primary, .btn-info, .btn-success):not(.btn-semantic-success):hover,
.accounting-wrapper :where(.btn-primary, .btn-success):not(.btn-semantic-success):hover,
.accounting-actions :where(.btn-primary, .btn-success):not(.btn-semantic-success):hover {
    background: linear-gradient(135deg, #066B7B, var(--ei-teal-dark)) !important;
    border-color: #066B7B !important;
    color: #FFFFFF !important;
}

.ei-main:not(.auth-main) :where(.btn-outline-primary, .btn-outline-info),
.modal :where(.btn-outline-primary, .btn-outline-info),
.swal2-popup :where(.btn-outline-primary, .btn-outline-info) {
    border-color: rgba(23, 162, 184, .48) !important;
    color: #0B7180 !important;
    background: #F7FCFD !important;
}

.ei-main:not(.auth-main) :where(.btn-outline-primary, .btn-outline-info):hover,
.modal :where(.btn-outline-primary, .btn-outline-info):hover,
.swal2-popup :where(.btn-outline-primary, .btn-outline-info):hover {
    background: var(--ei-teal) !important;
    border-color: var(--ei-teal) !important;
    color: #FFFFFF !important;
}

/* Keep Excel actions green because users identify the export format by color. */
.ei-main:not(.auth-main) :where(.btn-export-excel, .btn-success.btn-export-excel),
.modal :where(.btn-export-excel, .btn-success.btn-export-excel),
.swal2-popup :where(.btn-export-excel, .btn-success.btn-export-excel) {
    background: linear-gradient(135deg, #1F8C3A, var(--ei-success-2)) !important;
    border-color: #1F8C3A !important;
    color: #FFFFFF !important;
    box-shadow: 0 9px 18px rgba(40, 167, 69, .18) !important;
}

.ei-main:not(.auth-main) :where(.btn-export-excel, .btn-success.btn-export-excel):hover,
.modal :where(.btn-export-excel, .btn-success.btn-export-excel):hover,
.swal2-popup :where(.btn-export-excel, .btn-success.btn-export-excel):hover {
    background: linear-gradient(135deg, #176435, #1F963C) !important;
    border-color: #176435 !important;
    color: #FFFFFF !important;
}

/* Success remains green for states, badges and positive business signals. */
.ei-main:not(.auth-main) :where(.badge.bg-success, .text-success, .alert-success, .status-badge.open, .period-status.open, .lic-badge-success, .bg-success-soft),
.modal :where(.badge.bg-success, .text-success, .alert-success, .status-badge.open, .period-status.open) {
    --bs-success-rgb: 32, 138, 58;
}

.ei-main:not(.auth-main) :where(.badge.bg-success),
.modal :where(.badge.bg-success) {
    background-color: var(--ei-success) !important;
}

.ei-main:not(.auth-main) :where(.text-success),
.modal :where(.text-success) {
    color: var(--ei-success) !important;
}

.ei-main:not(.auth-main) :where(.btn-outline-success),
.modal :where(.btn-outline-success),
.swal2-popup :where(.btn-outline-success) {
    border-color: rgba(32, 138, 58, .46) !important;
    color: #176435 !important;
    background: #F7FCF8 !important;
}

.ei-main:not(.auth-main) :where(.btn-outline-success):hover,
.modal :where(.btn-outline-success):hover,
.swal2-popup :where(.btn-outline-success):hover {
    background: var(--ei-success) !important;
    border-color: var(--ei-success) !important;
    color: #FFFFFF !important;
}

.accounting-hero,
.ei-main:not(.auth-main) :where([class*="-hero"]) {
    box-shadow: 0 14px 34px rgba(15, 39, 64, .16);
}

.accounting-hero,
.ei-main:not(.auth-main) :where(.accounting-hero, .pl-command) {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(135deg, #172F40 0%, #254B60 58%, #3D6A7D 100%) !important;
    background-size: 48px 48px, 48px 48px, auto !important;
    border-bottom-color: var(--ei-teal) !important;
}

.accounting-stat,
.summary-tile,
.pl-kpi {
    border-radius: 8px !important;
}

.accounting-table thead th,
.ei-main:not(.auth-main) table.dataTable thead th {
    background: #EAF5F9 !important;
    color: #143D55 !important;
}

.account-code,
.entry-number {
    border-color: #BFE8EF !important;
    background: #E9FBFF !important;
    color: #007F94 !important;
}

.ei-date-cr-input {
    background-image:
        linear-gradient(45deg, transparent 50%, #173142 50%),
        linear-gradient(135deg, #173142 50%, transparent 50%);
    background-position:
        calc(100% - 16px) 50%,
        calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.35rem !important;
}

.ei-date-cr-input::placeholder {
    color: #7A8B99;
    opacity: .9;
}

.ui-datepicker {
    z-index: 7000 !important;
    font-family: var(--ei-font, 'IBM Plex Sans', sans-serif);
    border: 1px solid var(--ei-line, #D6E4EA) !important;
    box-shadow: 0 14px 34px rgba(15, 39, 64, .18);
}

.ui-datepicker .ui-datepicker-header {
    background: #173142;
    border-color: #173142;
    color: #FFFFFF;
}

.ui-datepicker .ui-state-highlight {
    border-color: var(--ei-teal, #17A2B8) !important;
    background: #E9FBFF !important;
    color: #0B7180 !important;
}

.ui-datepicker .ui-state-active {
    border-color: var(--ei-teal, #17A2B8) !important;
    background: var(--ei-teal, #17A2B8) !important;
    color: #FFFFFF !important;
}

@media (max-width: 768px) {
    .ei-main:not(.auth-main) :where(.btn),
    .modal :where(.btn) {
        min-height: 42px;
    }
}