/* =====================================================================
   Saltanat Home Concept — global theme
   Matches https://reacte.saltanat.co.ke
   Teal #0f5c4c · Gold #ac8a17 · Cream #f7f5f0 · Poppins + Montserrat
   ===================================================================== */

:root {
    --navbar-h: 58px;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-md: 18px;
}

html, body {
    font-family: 'Poppins', sans-serif;
    background: #ffffff;
    color: #3a3a3a;
}

.layout {
    position: relative;
    background: #ffffff;
}
.layout::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url('../img/bg-mark-gold.png?v=8') center 42% / min(680px, 78vw) no-repeat;
    opacity: .12;
    pointer-events: none;
    z-index: 0;
}
.layout > * { position: relative; z-index: 1; }
.navbar { z-index: 1000; }

h1, h2, h3, h4, .od-title, .page-header h2, .mod-menu-title {
    font-family: 'Montserrat', sans-serif;
}

/* ----- White website-style header ----- */
.navbar {
    height: var(--navbar-h);
    background: #ffffff;
    color: #3a3a3a;
    box-shadow: 0 8px 30px rgba(0,0,0,.06);
    border-bottom: 3px solid #ac8a17;
}
.navbar .navbar-app-grid {
    color: #0f5c4c;
    border-right: 1px solid rgba(15,92,76,.12);
}
.navbar .navbar-app-grid:hover { background: rgba(172,138,23,.12); color: #ac8a17; }
.navbar .navbar-app-grid .grid-icon span { background: #0f5c4c; }
.navbar .breadcrumb .crumb,
.navbar .breadcrumb .crumb a { color: #6b6b6b !important; }
.navbar .breadcrumb .crumb-active { color: #0f5c4c; font-weight: 600; }
.navbar .breadcrumb .sep { color: #c5b56a; }
.navbar .top-actions > div,
.navbar .top-actions > a {
    color: #3a3a3a;
    font-weight: 500;
}
.navbar .top-actions > div:hover,
.navbar .top-actions > a:hover {
    background: rgba(172,138,23,.12);
    color: #ac8a17;
}
.navbar .user-menu { border-left: 1px solid rgba(15,92,76,.12); }
.navbar .user-menu .avatar {
    background: #0f5c4c;
    color: #fff;
}
.navbar .user-menu .user-info span { color: #3a3a3a !important; }
.navbar .user-menu .user-info span[style] { color: #6b6b6b !important; }
.navbar .badge-count { background: #ac8a17; color: #1b1b1b; }

.brand-tagline strong { color: #0f5c4c; letter-spacing: .12em; font-weight: 800; }
.brand-tagline span { color: #ac8a17; font-weight: 700; letter-spacing: .16em; }
.navbar .brand-tagline span { color: #ac8a17; }

.navbar-brand .brand-img-full {
    height: 52px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}
.navbar-brand { margin-right: 10px; }

/* ----- Module menu (website nav underline) ----- */
.mod-menu-bar {
    background: #fff;
    border-bottom: 1px solid rgba(15,92,76,.1);
    box-shadow: none;
}
.mod-menu-link:hover { color: #ac8a17; }
.mod-menu-link.active {
    color: #0f5c4c;
    font-weight: 600;
    border-bottom-color: #ac8a17;
}
.mod-menu-pop {
    border-radius: 0 0 14px 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,.08);
}
.mod-menu-pop-item:hover,
.mod-menu-pop-item.active { background: #E8F2EF; color: #0f5c4c; }

.od-module-menu {
    display: flex; flex-wrap: wrap; gap: 4px 18px;
    align-items: center;
    background: #fff;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(15,92,76,.1);
    font-family: Poppins, sans-serif;
}
.od-module-menu a {
    position: relative;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 13.5px;
    padding: 6px 0 8px;
}
.od-module-menu a:hover { color: #ac8a17; }
.od-module-menu a.active { color: #0f5c4c; font-weight: 700; }
.od-module-menu a.active::after,
.od-module-menu a:hover::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: #ac8a17; border-radius: 2px;
}

/* ----- Surfaces ----- */
.main { background: transparent; }
body.odoo-ui .main { background: transparent !important; padding: 0; }
body.odoo-ui .flash-area { background: #ffffff; border-bottom-color: rgba(15,92,76,.08); }
.odoo-page { background: transparent; margin: 0; padding: 0 0 28px; min-height: calc(100vh - var(--navbar-h) - 70px); }

.od-toolbar {
    background: #fff;
    border-bottom: 1px solid rgba(15,92,76,.1);
    padding: 12px 20px;
}
.od-title { font-family: Montserrat, sans-serif; color: #0f5c4c; font-weight: 800; }
.od-title .gear { color: #ac8a17; }

.card, .o_form_sheet, .od-line-form {
    border-radius: 18px !important;
    border-color: rgba(15,92,76,.1) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.05);
}

.stat-card {
    border-radius: 18px;
    border-top-width: 4px;
    border-top-color: #0f5c4c;
}

/* ----- Buttons ----- */
.btn, .od-btn-new, .od-btn-primary, .od-btn-secondary, .od-btn-ghost, .od-btn-teal, .od-new-outline {
    border-radius: 14px !important;
    font-weight: 600;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover, .od-btn-new:hover, .od-btn-primary:hover { transform: translateY(-1px); }

.btn-primary {
    background: #ac8a17; color: #1b1b1b; border-color: #ac8a17; font-weight: 700;
}
.btn-primary:hover { background: #947614; border-color: #947614; color: #1b1b1b; }

.od-btn-new, .od-btn-primary {
    background: #0f5c4c !important; color: #fff !important; border: 0 !important;
}
.od-btn-new:hover, .od-btn-primary:hover { background: #0b2d1f !important; color: #fff !important; }

.od-btn-teal, .od-new-outline { background: #ac8a17 !important; color: #1b1b1b !important; border-color: #ac8a17 !important; }
.od-new-outline:hover, .od-btn-teal:hover { background: #947614 !important; color: #1b1b1b !important; }

.od-btn-secondary, .od-btn-ghost {
    border-radius: 14px !important;
    border-color: rgba(15,92,76,.2) !important;
}
.od-btn-secondary:hover, .od-btn-ghost:hover {
    background: #E8F2EF !important;
    color: #0f5c4c !important;
}

body.odoo-ui .page-header { background: #fff; }
body.odoo-ui .page-header h2 { color: #0f5c4c; font-family: Montserrat, sans-serif; font-weight: 800; }

.od-section-title, .od-crumb a { color: #0f5c4c !important; }

/* ----- Tables ----- */
.od-table thead th, table.data-table th {
    background: #0f5c4c !important;
    color: #fff !important;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    letter-spacing: .04em;
    font-size: 11px;
    text-transform: uppercase;
    border: 0 !important;
}
.od-table tbody tr:hover, .data-table tbody tr:hover { background: #E8F2EF !important; }
.od-kpi .val { color: #0f5c4c !important; font-family: Montserrat, sans-serif; }

/* ----- Forms ----- */
input:focus, select:focus, textarea:focus, .od-input:focus, .od-search:focus-within {
    border-color: #ac8a17 !important;
    box-shadow: 0 0 0 3px rgba(172,138,23,.18) !important;
}

/* ----- Login ----- */
.login-wrapper {
    background:
        linear-gradient(120deg, rgba(11,45,31,.88) 0%, rgba(15,92,76,.72) 45%, rgba(11,45,31,.55) 100%),
        #0b2d1f;
}
.login-wrapper::before {
    background:
        radial-gradient(circle at 18% 20%, rgba(172,138,23,.28), transparent 42%),
        radial-gradient(circle at 88% 80%, rgba(247,245,240,.08), transparent 50%);
}
.login-card {
    border-radius: 18px;
    padding: 40px 36px 32px;
    box-shadow: 0 24px 60px rgba(0,0,0,.28);
    border-top: 4px solid #ac8a17;
}
.login-card h1 { color: #0f5c4c; }
.login-card .btn-primary { border-radius: 14px; padding: 12px 18px !important; font-weight: 700; }

/* Official letterhead (quotation header) */
.sh-letterhead {
    max-width: 1080px;
    margin: 8px auto 8px;
    background: #fff;
    overflow: hidden;
}
.o-report-sheet .sh-letterhead { margin: 0 0 10px; box-shadow: none; }
.sh-lh-bar { display: grid; grid-template-columns: 1fr 1fr; height: 8px; width: 100%; }
.sh-lh-bar .tan { background: #ac8a17; min-width: 0; }
.sh-lh-bar .sage { background: #0f5c4c; min-width: 0; }
.sh-lh-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    padding: 0;
}
.sh-lh-brand { min-width: 0; padding: 10px 16px 8px 18px; }
.sh-lh-logo { pointer-events: none; display: block; line-height: 0; }
.sh-lh-logo .brand-img-full {
    height: auto !important;
    width: auto !important;
    max-height: 96px !important;
    max-width: 240px !important;
    object-fit: contain;
    object-position: left center;
    display: block;
}
.sh-lh-tagline {
    font-family: Montserrat, sans-serif;
    font-size: 13px; font-weight: 800;
    color: #0a4a42; line-height: 1.45;
    margin-top: 8px;
    padding: 0;
    max-width: 100%;
    text-align: justify;
    text-justify: inter-word;
}
.sh-lh-rule { display: none; }
.sh-lh-contacts {
    min-width: 0;
    padding: 10px 18px 8px 16px;
    border-left: 1px solid #111;
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px;
    color: #0a4a42;
    font-size: 13px; font-weight: 700;
    line-height: 1.25;
}
.sh-lh-line { display: flex; align-items: flex-start; gap: 8px; }
.sh-lh-line .ico { display: flex; width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.sh-lh-line .ico img, .sh-lh-line .ico .lh-ico { display: block; width: 14px; height: 14px; }
.sh-lh-line .lh-link { text-decoration: underline; text-underline-offset: 2px; }
.sh-lh-doctype {
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 20px; font-weight: 800;
    color: #0a4a42; letter-spacing: .16em;
    padding: 6px 12px 10px;
    text-decoration: underline;
    text-underline-offset: 4px;
}
@media (max-width: 720px) {
    .sh-lh-row { grid-template-columns: 1fr; }
    .sh-lh-contacts { border-left: 0; border-top: 1px solid #111; }
    .sh-lh-rule { display: none; }
}

.sh-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 8px 28px 72px;
}
.sh-section { margin-bottom: 28px; }
.sh-head {
    display: flex; align-items: baseline; gap: 14px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(15,92,76,.12);
}
.sh-kicker {
    font-family: Montserrat, sans-serif;
    font-weight: 800; font-size: 12px;
    letter-spacing: .18em; text-transform: uppercase; color: #0f5c4c;
}
.sh-sub {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic; color: #ac8a17; font-size: 16px;
}
.sh-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 900px) { .sh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sh-grid { grid-template-columns: 1fr; } }
.sh-tile {
    display: flex; align-items: center; gap: 14px;
    background: #fff;
    border: 1px solid rgba(15,92,76,.08);
    border-top: 3px solid #ac8a17;
    border-radius: 16px;
    padding: 14px 16px;
    text-decoration: none; color: #0f5c4c;
    box-shadow: 0 10px 28px rgba(11,45,31,.05);
    transition: transform .2s ease, box-shadow .2s ease;
}
.sh-tile:hover {
    transform: translateY(-3px); text-decoration: none; color: #0f5c4c;
    box-shadow: 0 16px 36px rgba(172,138,23,.18);
}
.sh-icon {
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, #E8F2EF, #f7f5f0);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.sh-icon svg { width: 30px; height: 30px; }
.sh-name { flex: 1; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 13.5px; }
.sh-arrow { color: #ac8a17; font-size: 18px; opacity: .55; }
.sh-tile:hover .sh-arrow { opacity: 1; }

/* ----- App launcher = same as dashboard ----- */
.app-launcher {
    position: fixed; inset: 0;
    background: #ffffff;
    z-index: 9999;
    display: none;
    overflow-y: auto;
}
.app-launcher::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../img/bg-mark-gold.png?v=8') center 38% / min(680px, 78vw) no-repeat;
    opacity: .12;
    pointer-events: none;
    z-index: 0;
}
.app-launcher.show { display: block; }
body.al-open { overflow: hidden; }
.al-close {
    position: fixed; top: 14px; right: 18px;
    width: 36px; height: 36px;
    border: 0; border-radius: 50%;
    background: rgba(15,92,76,.08);
    color: #0f5c4c; font-size: 22px; cursor: pointer;
    z-index: 10000;
}
.al-close:hover { background: #ac8a17; color: #1b1b1b; }

.app-launcher-overlay {
    background: #ffffff;
}

.layout > .main { background: transparent; }
.dash-launcher, .al-grid-container { position: relative; z-index: 1; }

.dash-launcher, .al-grid-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 40px 80px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 30px 24px;
}
@media (max-width: 900px) {
    .dash-launcher, .al-grid-container { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
    .dash-launcher, .al-grid-container { grid-template-columns: repeat(3, 1fr); padding: 20px 16px 60px; }
}

.dash-app, .al-app {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    text-decoration: none; color: #0f5c4c;
    transition: transform .15s ease;
}
.dash-app:hover, .al-app:hover { transform: translateY(-3px); text-decoration: none; color: #0f5c4c; }

.dash-icon, .al-app-icon {
    width: 84px; height: 84px;
    background: #fff;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(15,92,76,.08);
    position: relative;
}
.dash-app:hover .dash-icon, .al-app:hover .al-app-icon {
    box-shadow: 0 12px 28px rgba(15,92,76,.14);
}
.dash-icon svg, .al-app-icon svg { width: 58px; height: 58px; }
.dash-name, .al-app-name {
    font-family: Montserrat, sans-serif;
    font-size: 13px; font-weight: 600;
    text-align: center; color: #0f5c4c;
}
.dash-badge, .al-badge {
    position: absolute; top: -4px; right: -4px;
    background: #ac8a17; color: #1b1b1b;
    font-size: 11px; font-weight: 700;
    padding: 2px 7px; border-radius: 10px;
    min-width: 20px; text-align: center;
}

/* ----- Help / visitors leftover ----- */
.help-nav, .help-card, .help-detail { border-radius: 18px !important; }
.help-hero { border-radius: 18px !important; }

/* ----- POS ----- */
.pos-cat-btn.active, .pos-cat-btn:hover,
.pos-pay-btn.validate { background: #0f5c4c !important; border-color: #0f5c4c !important; }
.pos-product .price { color: #ac8a17 !important; }