/* ============================================================
   Metano Theme - Custom Overrides (2026-11)
   Load order: after style.rtl1..5.css (auto-included by head.tpl)
   Scope: palette unification, typography (Vazirmatn), component
   polish. No structural/JS changes - accordion markup untouched.
   ============================================================ */

/* ---------- 1) Font: Vazirmatn (Persian UI font) ---------- */
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
}

:root {
    /* Palette: colorhunt.co/palette/224248-325e6a-44a1a4-ff9a00 (+ f6e2e9-fefaf3-b8cfb3-84a282) */
    --mx-primary: #325e6a;
    --mx-primary-dark: #224248;
    --mx-primary-soft: rgba(50, 94, 106, 0.10);
    --mx-accent: #44a1a4;
    --mx-orange: #ff9a00;
    --mx-orange-soft: rgba(255, 154, 0, 0.14);
    --mx-success: #4f6e51;
    --mx-success-soft: rgba(132, 162, 130, 0.22);
    --mx-warning: #ff9a00;
    --mx-danger: #cc3f4e;
    --mx-danger-soft: rgba(246, 226, 233, 0.9);
    --mx-body-bg: #fefaf3;
    --mx-card-border: #e9e2d6;
    --mx-shadow-sm: 0 1px 2px rgba(34, 40, 42, 0.06), 0 1px 3px rgba(34, 40, 42, 0.08);
    --mx-shadow-md: 0 4px 10px -2px rgba(34, 40, 42, 0.08), 0 12px 24px -6px rgba(34, 40, 42, 0.08);
    --mx-radius: 10px;
}

/* ---------- 2b) Legacy blue -> new palette (style.rtl*.css overrides) ---------- */
a { color: #325e6a; }
a:hover { color: #224248; }
b, strong { color: #224248; }
.list-group-item-action { color: #325e6a; }
.fa-inverse { color: #325e6a !important; }
.navbar-nav .fa { color: #44a1a4; }
#Secondary_Navbar-Account { color: #325e6a !important; }
.line-under-text h3 { color: #224248; }
section.index-counter.after_slider { background-color: #224248; }
header.header { border-top-color: #325e6a; }
header.header .topbar,
.email-verification { background-color: #224248 !important; color: #fff; border-bottom-color: #224248; }
.master-breadcrumb { background-color: #325e6a !important; }
.badge-light { background-color: rgba(68, 161, 164, 0.16) !important; color: #224248 !important; }
.list-group-item-primary { color: #224248; background-color: rgba(68, 161, 164, 0.18); }
.list-group-item-primary.list-group-item-action.active { color: #224248; background-color: rgba(68, 161, 164, 0.28); border-color: rgba(68, 161, 164, 0.28); }
.alert-primary .icon-exclamation-circle:before,
.alert-primary .icon-times-circle:before { color: #325e6a; }
.alert-primary { color: #224248 !important; background-color: rgba(68, 161, 164, 0.14) !important; border-color: rgba(68, 161, 164, 0.25) !important; }
div.product-details div.product-icon { background-color: rgba(68, 161, 164, 0.14); color: #325e6a; }
.btn-outline-primary { color: #325e6a; }
.btn-outline-primary:hover { color: #fff; background-color: #325e6a; }
.btn-info { color: #fff !important; background-color: #224248 !important; border-color: #224248 !important; }
.btn-info:hover, .btn-info:focus { background-color: #325e6a !important; border-color: #325e6a !important; color: #fff !important; }
.btn-success { color: #fff !important; background-color: #4f6e51 !important; border-color: #4f6e51 !important; }
.btn-success:hover, .btn-success:focus { background-color: #3f5a41 !important; border-color: #3f5a41 !important; color: #fff !important; }
.btn-warning { color: #224248 !important; background-color: #ff9a00 !important; border-color: #ff9a00 !important; font-weight: 600; }
.btn-warning:hover, .btn-warning:focus { background-color: #f08f00 !important; border-color: #f08f00 !important; color: #224248 !important; }
.btn-danger { color: #fff !important; background-color: #cc3f4e !important; border-color: #cc3f4e !important; }
.btn-danger:hover, .btn-danger:focus { background-color: #b23343 !important; border-color: #b23343 !important; color: #fff !important; }
.text-muted { color: #6b7a76 !important; }

/* ---------- 2) Base typography ---------- */
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
button, input, select, textarea, optgroup,
.btn, .form-control, .dropdown-menu, .dropdown-item,
.navbar-brand, .nav-link, .list-group-item,
table, .table, .badge, .alert, .card, .modal-content,
.breadcrumb, .pagination, label, small, .small,
.limiter, .container-login100, .wrap-login100, .login100-form,
.panel, .panel-heading, .panel-title, .widget-box, .footer-block {
    font-family: 'Vazirmatn', nav, Tahoma, 'Segoe UI', sans-serif !important;
}

body {
    background-color: var(--mx-body-bg) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

::selection {
    background: #44a1a4;
    color: #224248;
}

/* ---------- 3) Color unification (replace legacy steel blue) ---------- */
/* old #336699 / rgb(51,102,153) -> unified indigo */
.toolbar .nav-link,
.nav-link.text-primary,
a.text-primary,
.text-primary {
    color: var(--mx-primary) !important;
}

a:hover .text-primary,
.text-primary:hover {
    color: var(--mx-primary-dark) !important;
}

.bg-primary,
.badge-primary,
.page-item.active .page-link {
    background-color: var(--mx-primary) !important;
    border-color: var(--mx-primary) !important;
}

.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
    background-color: var(--mx-primary-soft) !important;
    border-color: var(--mx-card-border) !important;
    color: var(--mx-primary) !important;
    font-weight: 600;
}

.table thead th,
.table head th {
    background-color: rgba(68, 161, 164, 0.12);
    color: #224248;
}

/* ---------- 4) Buttons ---------- */
.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.18s ease;
    padding: 0.45rem 1.1rem;
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3px rgba(255, 154, 0, 0.25) !important;
}

.btn-primary {
    background-color: var(--mx-primary) !important;
    border-color: var(--mx-primary) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(27, 53, 127, 0.25);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--mx-primary-dark) !important;
    border-color: var(--mx-primary-dark) !important;
}

.btn-success {
    background-color: var(--mx-success) !important;
    border-color: var(--mx-success) !important;
    color: #fff !important;
}

.btn-success:hover {
    filter: brightness(0.94);
}

.btn-default,
.btn-secondary {
    border-color: var(--mx-card-border) !important;
    color: #3d4a4e !important;
}

.btn-default:hover,
.btn-secondary:hover {
    background-color: #f7f2e9 !important;
    border-color: #ddd3c2 !important;
}

/* Header CTA ("ارسال تیکت") - orange accent with dark text (readable) */
.btn-inline.bg-color-blue,
.bg-color-blue.btn-inline {
    background: #ff9a00 !important;
    color: #224248 !important;
    border-radius: 8px !important;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(255, 154, 0, 0.4);
}

.btn-inline.bg-color-blue:hover {
    background: #f08f00 !important;
    box-shadow: 0 4px 12px rgba(255, 154, 0, 0.45);
}

/* status pills built with bg-color-blue: soft teal + dark text (readable) */
.bg-color-blue:not(.btn-inline) {
    background-color: rgba(68, 161, 164, 0.18) !important;
    color: #224248 !important;
    border-radius: 20px !important;
    font-weight: 600;
}

/* Toolbar icon buttons */
.toolbar .nav-link {
    background-color: transparent;
    border-radius: 8px;
    transition: background-color 0.18s ease;
}

.toolbar .nav-link:hover {
    background-color: var(--mx-primary-soft);
}

/* ---------- 5) Header / navbar ---------- */
.header .navbar {
    background: #fff;
}

.main-navbar-wrapper {
    background: #fff;
    box-shadow: 0 1px 0 var(--mx-card-border);
}

.main-navbar-wrapper .nav-link,
#nav .nav-link {
    color: #33454a !important;
    font-weight: 500;
}

.navbar-brand {
    font-weight: 700;
    color: #224248 !important;
}

.dropdown-menu {
    border: 1px solid var(--mx-card-border);
    border-radius: 10px;
    box-shadow: var(--mx-shadow-md);
    padding: 0.4rem;
}

.dropdown-item {
    border-radius: 7px;
    color: #33454a;
}

.dropdown-item:hover {
    background-color: var(--mx-primary-soft);
    color: var(--mx-primary) !important;
}

/* ---------- 6) Cards / sidebar panels ---------- */
.card,
.panel,
.modal-content {
    border: 1px solid var(--mx-card-border);
    border-radius: var(--mx-radius);
    box-shadow: var(--mx-shadow-sm);
}

.card-sidebar,
.panel-sidebar {
    border: 1px solid var(--mx-card-border);
    border-radius: var(--mx-radius) !important;
    overflow: hidden;
    box-shadow: var(--mx-shadow-sm);
}

.card-sidebar > .card-header,
.panel-sidebar > .panel-heading {
    background: linear-gradient(180deg, #fdf9f2 0%, #f7f1e7 100%);
    border-bottom: 1px solid var(--mx-card-border);
}

.card-sidebar .card-title,
.panel-sidebar .panel-title {
    color: #224248 !important;
    font-size: 0.95rem !important;
    font-weight: 700;
}

.card-sidebar .card-title .fa, .card-sidebar .card-title .fas,
.panel-sidebar .panel-title .fa, .panel-sidebar .panel-title .fas { color: #44a1a4; }

.list-group-item {
    border-color: #f0eadf;
    color: #33454a;
}

.list-group-item-action:hover {
    background-color: var(--mx-primary-soft);
}

/* accordion product items (colors only - structure untouched) */
.panel-body table tr td a {
    border-radius: 6px;
    padding: 2px 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.panel-body table tr td a:hover {
    background-color: var(--mx-primary-soft);
    color: var(--mx-primary) !important;
}

.bg-color-asbestos {
    background-color: var(--mx-primary) !important;
    border-radius: 6px;
}

.bg-color-asbestos a {
    color: #fff !important;
}

/* ---------- 7) Forms ---------- */
.form-control {
    border-color: #ddd5c6;
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
    border-color: #44a1a4;
    box-shadow: 0 0 0 3px rgba(68, 161, 164, 0.18);
}

.input-group-text {
    background-color: #f7f1e7;
    border-color: #ddd5c6;
    color: #325e6a;
}

/* ---------- 8) Alerts ---------- */
.alert {
    border-radius: var(--mx-radius);
    border: none;
    border-right: 4px solid transparent;
    box-shadow: var(--mx-shadow-sm);
}

.alert-success {
    background-color: #e2ece0 !important;
    border-right-color: #84a282 !important;
    color: #3a523c !important;
}

.alert-primary,
.alert-info {
    background-color: rgba(68, 161, 164, 0.13) !important;
    border-right-color: #44a1a4 !important;
    color: #224248 !important;
}

.alert-warning {
    background-color: #fff3e0 !important;
    border-right-color: #ff9a00 !important;
    color: #7a5000 !important;
}

.alert-danger {
    background-color: #f6e2e9 !important;
    border-right-color: #cc3f4e !important;
    color: #8c2e3b !important;
}

/* ---------- 9) Dashboard widgets: soft palette chips ---------- */
.widget-box-item:nth-child(4n+1) .bg-icon {
    background: rgba(68, 161, 164, 0.16) !important;
    color: #22626b !important;
}
.widget-box-item:nth-child(4n+2) .bg-icon {
    background: var(--mx-orange-soft) !important;
    color: #a36a00 !important;
}
.widget-box-item:nth-child(4n+3) .bg-icon {
    background: #f6e2e9 !important;
    color: #a03a4a !important;
}
.widget-box-item:nth-child(4n+4) .bg-icon {
    background: rgba(132, 162, 130, 0.24) !important;
    color: #3f5a41 !important;
}

.widget-box-item .bg-icon {
    border-radius: 12px !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.widget-box-item:hover .bg-icon {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(34, 66, 72, 0.2);
}

.widget-box-item-content h5 {
    color: #224248;
}

/* ---------- 10) Tables ---------- */
.table:not(.table-bordered) th {
    border-top: none;
}

.table-hover tbody tr:hover {
    background-color: #fdf8f0;
}

/* ---------- 11) Footer ---------- */
.footer-block {
    background: linear-gradient(180deg, #224248 0%, #193136 100%) !important;
    color: #d5e2e0 !important;
    padding: 2rem 0;
}

.footer-block p {
    color: #d5e2e0 !important;
}

/* ---------- 12) Login page (login100 skins - colors/typography only) ---------- */
.wrap-login100 {
    border-radius: 14px !important;
    box-shadow: 0 10px 40px rgba(15, 30, 70, 0.16) !important;
}

.login100-more {
    border-radius: 14px 0 0 14px;
}

.login-title,
.wrap-login100 .h4 {
    color: var(--mx-primary);
}

.login100-form .btn-primary {
    border-radius: 8px;
    padding: 0.55rem 1.6rem;
}

/* ---------- 13) Misc polish ---------- */
.badge {
    border-radius: 20px;
    font-weight: 600;
}

.client-top-access-item-count {
    background: #ff9a00;
    color: #224248;
    border-radius: 20px;
    font-weight: 700;
}

.breadcrumb {
    background: transparent;
    font-size: 0.9rem;
}

.breadcrumb-item a {
    color: var(--mx-primary);
}

.pagination .page-link {
    border-radius: 7px !important;
    margin: 0 2px;
    color: var(--mx-primary);
    border-color: var(--mx-card-border);
}

/* top progress / misc bars keep brand color */
.progress-bar {
    background-color: var(--mx-primary);
}

/* notification modal list items */
#myModal .list-group-item-action:hover {
    background-color: var(--mx-primary-soft);
}

/* accessibility: visible focus for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #ff9a00;
    outline-offset: 2px;
}