/* ═══════════════════════════════════════════════════════════════════════════
   ALMUDIR ERP — PREMIUM UI LAYER v3.0
   Enterprise-grade polish on top of theme-master.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HEADER BAR ─────────────────────────────────────────────────────────── */
.tm-header-bar {
    background: linear-gradient(135deg, var(--tm-header-from) 0%, var(--tm-header-to) 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.12) !important;
}

.tm-header-btn,
.tm-header-bar .tm-header-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #fff !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    transition: background .2s, transform .15s, box-shadow .2s !important;
    cursor: pointer;
    text-decoration: none !important;
    gap: 6px;
    backdrop-filter: blur(4px);
}
.tm-header-btn:hover,
.tm-header-bar .tm-header-btn:hover {
    background: rgba(255,255,255,.22) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.tm-header-bar #dark-mode-toggle {
    position: static !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: none !important;
    color: #fde68a !important;
}
.tm-header-bar #dark-mode-toggle:hover {
    transform: scale(1.05) !important;
    background: rgba(255,255,255,.22) !important;
}
[data-theme="dark"] .tm-header-bar #dark-mode-toggle {
    background: rgba(255,255,255,.15) !important;
    color: #fbbf24 !important;
}

/* ── SIDEBAR BRAND ──────────────────────────────────────────────────────── */
.tm-sidebar-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 18px 16px !important;
    min-height: 72px !important;
    background: linear-gradient(135deg, var(--tm-header-from) 0%, var(--tm-header-to) 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    text-decoration: none !important;
    transition: opacity .2s;
}
.tm-sidebar-brand:hover { opacity: .95; text-decoration: none !important; }
.tm-sidebar-brand__logo {
    width: 44px; height: 44px;
    border-radius: 12px;
    object-fit: contain;
    background: rgba(255,255,255,.15);
    padding: 4px;
    border: 1px solid rgba(255,255,255,.2);
}
.tm-sidebar-brand__logo-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px;
}
.tm-sidebar-brand__name {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: center !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    letter-spacing: -.2px;
}
.tm-sidebar-brand__status {
    display: inline-block;
    width: 8px; height: 8px;
    background: #4ade80;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(74,222,128,.6);
    margin-right: 4px;
}

/* ── CONTENT AREA ───────────────────────────────────────────────────────── */
.content-wrapper > .content {
    padding: 20px 22px 28px !important;
}

.content-header {
    margin-bottom: 16px !important;
}
.content-header > h1,
.content-header > h1 small {
    color: var(--tm-text-heading) !important;
    font-weight: 700 !important;
}

/* ── CARDS / BOXES (Bootstrap 3 legacy) ─────────────────────────────────── */
.box,
.box-primary,
.box-solid {
    border-radius: var(--tm-card-radius, 12px) !important;
    border: 1px solid var(--tm-card-border) !important;
    box-shadow: var(--tm-shadow-sm) !important;
    overflow: hidden;
    transition: box-shadow .25s ease;
}
.box:hover {
    box-shadow: var(--tm-shadow-md) !important;
}
.box-header {
    background: linear-gradient(to bottom, #fafbfc, #f4f6f9) !important;
    border-bottom: 1px solid var(--tm-card-border) !important;
    padding: 14px 18px !important;
}
.box-header .box-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--tm-text-heading) !important;
}
.box-body { padding: 18px !important; }

/* ── TABLES ─────────────────────────────────────────────────────────────── */
.table > thead > tr > th,
.table thead th {
    background: #f8fafc !important;
    color: var(--tm-text-muted) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    border-bottom: 2px solid var(--tm-card-border) !important;
    padding: 11px 14px !important;
    white-space: nowrap;
}
.table > tbody > tr {
    transition: background .15s;
}
.table > tbody > tr:hover {
    background-color: var(--tm-brand-subtle) !important;
}
.table > tbody > tr > td {
    padding: 11px 14px !important;
    vertical-align: middle !important;
    border-color: #f1f5f9 !important;
    font-size: 13.5px !important;
}

/* DataTables wrapper */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: 8px !important;
    border: 1px solid var(--tm-card-border) !important;
    padding: 6px 12px !important;
    transition: border-color .2s, box-shadow .2s;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--tm-brand) !important;
    box-shadow: 0 0 0 3px var(--tm-brand-glow) !important;
    outline: none;
}

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.btn-primary,
.btn-success {
    border-radius: 9px !important;
    font-weight: 600 !important;
    transition: transform .15s, box-shadow .2s !important;
}
.btn-primary {
    background: var(--tm-brand) !important;
    border-color: var(--tm-brand) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--tm-brand-hover) !important;
    border-color: var(--tm-brand-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--tm-brand-glow) !important;
}
.btn-app {
    border-radius: 12px !important;
    transition: transform .15s, box-shadow .2s !important;
}
.btn-app:hover {
    transform: translateY(-2px);
    box-shadow: var(--tm-shadow-md) !important;
}

/* ── FORMS ──────────────────────────────────────────────────────────────── */
.form-control {
    border-radius: 9px !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 8px 12px !important;
    transition: border-color .2s, box-shadow .2s !important;
    box-shadow: none !important;
}
.form-control:focus {
    border-color: var(--tm-brand) !important;
    box-shadow: 0 0 0 3px var(--tm-brand-glow) !important;
}
.select2-container--default .select2-selection--single {
    border-radius: 9px !important;
    border: 1.5px solid #e2e8f0 !important;
    height: 38px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
    padding-right: 12px !important;
}

/* ── MODALS ─────────────────────────────────────────────────────────────── */
.modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: var(--tm-shadow-xl) !important;
    overflow: hidden;
}
.modal-header {
    background: linear-gradient(to bottom, #fafbfc, #f4f6f9) !important;
    border-bottom: 1px solid var(--tm-card-border) !important;
    padding: 16px 20px !important;
}
.modal-title { font-weight: 700 !important; color: var(--tm-text-heading) !important; }
.modal-footer {
    border-top: 1px solid var(--tm-card-border) !important;
    padding: 14px 20px !important;
}

/* ── POS SCREEN ─────────────────────────────────────────────────────────── */
.pos-panel-card {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(15,23,42,.08) !important;
    border: 1px solid #e8eef5 !important;
}
#product_list_body .product_list {
    border-radius: 12px !important;
    transition: transform .15s, box-shadow .2s !important;
}
#product_list_body .product_list:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.1) !important;
}
.pos-form-actions .btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
}

/* ── DASHBOARD KPI ENHANCEMENTS ─────────────────────────────────────────── */
.db-hero {
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--tm-header-from) 0%, var(--tm-brand-light) 100%) !important;
    box-shadow: 0 8px 32px var(--tm-brand-glow) !important;
}
.db-kpi-card {
    transition: transform .2s, box-shadow .2s !important;
}
.db-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--tm-shadow-lg) !important;
}

/* ── PAGE TRANSITIONS ─────────────────────────────────────────────────────── */
.content-wrapper > .content {
    animation: pageFadeIn .35s ease-out;
}
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── ALERTS & BADGES ────────────────────────────────────────────────────── */
.alert {
    border-radius: 10px !important;
    border: none !important;
}
.label, .badge {
    border-radius: 6px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
}

/* ── SCROLLBAR (content area) ─────────────────────────────────────────────── */
.content-wrapper::-webkit-scrollbar { width: 6px; }
.content-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.15);
    border-radius: 3px;
}

/* ── PRINT ────────────────────────────────────────────────────────────────── */
@media print {
    .tm-header-bar, .side-bar, #dark-mode-toggle { display: none !important; }
}