/**
 * V3.3 theme base — modern, clean design standards
 */

:root {
    --theme-radius-sm: 6px;
    --theme-radius-md: 10px;
    --theme-radius-lg: 12px;
    --theme-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
    --theme-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.08);
    --theme-btn-height-md: 38px;
    --theme-btn-height-sm: 32px;
    --theme-font-body: 13px;
    --theme-font-label: 11px;
    --theme-font-heading: 15px;
    --theme-transition: 0.2s ease;
    --logo-max-height-sidebar: 50px;
    --logo-max-height-login: 80px;
    --logo-max-height-invoice: 60px;
}

/* Cards */
.box,
.card,
.widget-box,
.tw-dw-card,
.pos-tab-container .box,
.modal-content {
    border-radius: var(--theme-radius-md) !important;
    box-shadow: var(--theme-shadow-card);
    transition: box-shadow var(--theme-transition);
}

.box:hover,
.card:hover {
    box-shadow: var(--theme-shadow-hover);
}

/* Buttons */
.btn,
.tw-dw-btn,
button[type="submit"]:not(.close) {
    transition: all var(--theme-transition);
    min-height: var(--theme-btn-height-sm);
}

.btn-lg,
.tw-dw-btn-lg {
    min-height: var(--theme-btn-height-md);
}

/* Forms */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    border-radius: var(--theme-radius-sm);
    font-size: var(--theme-font-body);
    transition: border-color var(--theme-transition), box-shadow var(--theme-transition);
}

label,
.control-label {
    font-size: var(--theme-font-label);
}

h1, h2, h3, h4, .box-title {
    font-size: var(--theme-font-heading);
}

/* Tables */
.table > thead > tr > th,
.table > tbody > tr > td {
    font-size: var(--theme-font-body);
}

/* Logo placement consistency */
.app-logo img,
.sidebar-logo img,
.sidebar-custom-logo,
.login-logo img,
.invoice-logo img,
.sidebar-brand img {
    max-height: var(--logo-max-height-sidebar) !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    background: transparent;
}

.login-page .login-logo img,
.login-box .login-logo img {
    max-height: var(--logo-max-height-login) !important;
}

.invoice-logo img,
#invoice_content img.business-logo {
    max-height: var(--logo-max-height-invoice) !important;
}

body.dark-mode .app-logo img,
body.dark-mode .sidebar-logo img,
body.dark-mode .sidebar-custom-logo,
body.dark-mode .login-logo img,
body.dark-mode .invoice-logo img,
.no-dark-invert img {
    filter: none !important;
}

/* Spacing scale helpers */
.theme-gap-xs { gap: 4px; }
.theme-gap-sm { gap: 8px; }
.theme-gap-md { gap: 12px; }
.theme-gap-lg { gap: 16px; }
.theme-gap-xl { gap: 24px; }

/* V3.3 new pages dark mode base */
body.dark-mode .v33-card,
body.dark-mode .otp-verify-card,
body.dark-mode .menu-customizer-panel,
body.dark-mode .storage-settings-panel,
body.dark-mode .color-scheme-picker,
body.dark-mode .business-settings-v2 .settings-card {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Page-level back navigation (above content, not in topbar) */
.page-back-bar {
    position: relative;
    z-index: 20;
    padding: 0.75rem 1.25rem 0;
    pointer-events: auto;
}

.page-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    background-color: #dc2626;
    color: #ffffff;
    border: 1px solid #b91c1c;
    border-radius: var(--theme-radius-sm, 6px);
    padding: 0.4rem 0.75rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    cursor: pointer;
    pointer-events: auto;
}

.page-back-btn:hover,
.page-back-btn:focus,
.page-back-btn:focus-visible,
.page-back-btn:active {
    background-color: #b91c1c;
    border-color: #991b1b;
    color: #ffffff;
    outline: none;
}

.page-back-btn .fa-arrow-left,
.page-back-btn span {
    color: inherit;
    pointer-events: none;
}

[dir='rtl'] .page-back-btn .fa-arrow-left {
    transform: scaleX(-1);
}

body.dark-mode .page-back-btn {
    background-color: #dc2626;
    color: #ffffff;
    border-color: #b91c1c;
}

body.dark-mode .page-back-btn:hover,
body.dark-mode .page-back-btn:focus,
body.dark-mode .page-back-btn:focus-visible,
body.dark-mode .page-back-btn:active {
    background-color: #b91c1c;
    border-color: #991b1b;
    color: #ffffff;
}

.hms-module-page .page-back-bar,
.healthcare-module-page .page-back-bar {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media print {
    .page-back-bar {
        display: none !important;
    }
}