/* ================================================================
   AlMuhasil — Omani Atlas Theme
   Shared visual layer for public, authentication and back-office UI.
   Every rule is scoped so thermal receipts and Smart Orders stay intact.
   ================================================================ */

:root {
    --ou-ivory: #fbf7ef;
    --ou-ivory-2: #f6efe3;
    --ou-ivory-3: #eee2d1;
    --ou-surface: #fffdfa;
    --ou-surface-soft: #faf3e8;
    --ou-ink: #172a31;
    --ou-ink-2: #2e4144;
    --ou-muted: #70675e;
    --ou-green: #087f73;
    --ou-green-strong: #05665e;
    --ou-green-deep: #064d48;
    --ou-green-soft: #e4f1ed;
    --ou-bronze: #b78a45;
    --ou-bronze-strong: #9a642f;
    --ou-bronze-soft: #f3e7d3;
    --ou-line: #e4d8c8;
    --ou-line-strong: #d4c2ab;
    --ou-danger: #b9443f;
    --ou-warning: #b87828;
    --ou-success: #168064;
    --ou-info: #357c85;
    --ou-shadow-sm: 0 4px 16px rgba(63, 43, 25, .07);
    --ou-shadow: 0 14px 38px rgba(63, 43, 25, .10);
    --ou-shadow-lg: 0 26px 70px rgba(46, 31, 19, .14);
    --ou-radius-sm: 10px;
    --ou-radius: 16px;
    --ou-radius-lg: 24px;
}

body.ou-omani-theme {
    min-width: 320px;
    color: var(--ou-ink);
    font-family: 'Tajawal', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html[dir="ltr"] body.ou-omani-theme {
    font-family: 'Inter', 'Tajawal', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.ou-omani-theme h1,
.ou-omani-theme h2,
.ou-omani-theme h3,
.ou-omani-theme h4,
.ou-omani-theme h5,
.ou-omani-theme h6,
.ou-omani-theme button,
.ou-omani-theme input,
.ou-omani-theme select,
.ou-omani-theme textarea,
.ou-omani-theme .btn {
    font-family: inherit !important;
}

.ou-omani-theme *,
.ou-omani-theme *::before,
.ou-omani-theme *::after {
    -webkit-tap-highlight-color: transparent;
}

.ou-omani-theme ::selection {
    color: #fff;
    background: rgba(8, 127, 115, .78);
}

.ou-omani-theme :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid rgba(183, 138, 69, .48) !important;
    outline-offset: 2px;
}

.ou-omani-theme img,
.ou-omani-theme svg,
.ou-omani-theme video,
.ou-omani-theme iframe {
    max-width: 100%;
}

.ou-platform-logo {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.ou-platform-logo--icon {
    aspect-ratio: 1;
}

/* ------------------------------ Public / CMS ------------------------------ */

body.ou-public {
    --am-canvas: var(--ou-ivory);
    --am-canvas-2: var(--ou-ivory-2);
    --am-navy: var(--ou-green-deep);
    --am-navy-2: var(--ou-green-strong);
    --am-navy-3: var(--ou-green);
    --am-blue: var(--ou-green);
    --am-blue-dark: var(--ou-green-strong);
    --am-blue-soft: #56a99c;
    --am-teal: var(--ou-green);
    --am-teal-dark: var(--ou-green-strong);
    --am-orange: var(--ou-bronze);
    --am-ink: var(--ou-ink);
    --am-muted: var(--ou-muted);
    --am-line: var(--ou-line);
    --am-bg-soft: var(--ou-ivory-2);
    --am-text: var(--ou-ink);
    --am-text-soft: var(--ou-ink-2);
    --am-text-dim: var(--ou-muted);
    --am-glass: rgba(255, 253, 250, .76);
    --am-glass-2: rgba(255, 253, 250, .94);
    --am-hairline: rgba(183, 138, 69, .25);
    --am-shadow: var(--ou-shadow);
    --am-glow-blue: 0 10px 30px rgba(8, 127, 115, .18);
    --am-glow-teal: 0 10px 30px rgba(8, 127, 115, .18);
    color: var(--ou-ink-2) !important;
    background:
        radial-gradient(760px 460px at 90% 2%, rgba(183, 138, 69, .14), transparent 68%),
        radial-gradient(660px 440px at 5% 34%, rgba(8, 127, 115, .08), transparent 70%),
        linear-gradient(180deg, var(--ou-ivory) 0%, #fffdfa 48%, var(--ou-ivory-2) 100%) !important;
    background-attachment: scroll !important;
}

body.ou-public::before {
    content: "" !important;
    position: fixed !important;
    inset: auto -46px -34px auto !important;
    width: 280px !important;
    height: 280px !important;
    z-index: 0 !important;
    opacity: .08 !important;
    filter: none !important;
    background: url('/img/omani-theme/rosette.svg') center / contain no-repeat !important;
    animation: none !important;
    pointer-events: none !important;
}

.ou-public h1,
.ou-public h2,
.ou-public h3,
.ou-public h4,
.ou-public h5,
.ou-public h6 {
    color: var(--ou-ink) !important;
}

.ou-public p {
    color: var(--ou-muted);
}

.ou-public .am-section {
    position: relative;
    padding-block: clamp(58px, 7vw, 92px);
}

.ou-public .am-section + .am-section {
    border-top-color: rgba(183, 138, 69, .14);
}

.ou-public .hero-nav,
.ou-auth .hero-nav {
    border: 1px solid rgba(183, 138, 69, .28) !important;
    background: rgba(255, 253, 250, .90) !important;
    box-shadow: var(--ou-shadow-sm) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.ou-public .hero-nav--is-sticky,
.ou-auth .hero-nav--is-sticky {
    background: rgba(255, 253, 250, .97) !important;
    box-shadow: 0 12px 34px rgba(56, 38, 22, .12) !important;
}

.ou-public .hero-nav__link,
.ou-auth .hero-nav__link,
.ou-public .cms-nav-login,
.ou-auth .cms-nav-login {
    color: var(--ou-ink-2) !important;
}

.ou-public .hero-nav__link:hover,
.ou-public .hero-nav__link:focus,
.ou-auth .hero-nav__link:hover,
.ou-auth .hero-nav__link:focus {
    color: var(--ou-green) !important;
}

.ou-public [open-nav-menu],
.ou-public [open-nav-menu] i,
.ou-auth [open-nav-menu],
.ou-auth [open-nav-menu] i {
    color: var(--ou-green-deep) !important;
}

.ou-public .hero-nav__dropdown,
.ou-auth .hero-nav__dropdown {
    border: 1px solid var(--ou-line) !important;
    background: var(--ou-surface) !important;
    box-shadow: var(--ou-shadow) !important;
}

.ou-public .am-hero {
    padding-bottom: clamp(70px, 8vw, 112px);
    color: var(--ou-ink);
    overflow: hidden;
}

.ou-public .am-hero::after,
.ou-public .am-hero--page::after {
    content: "";
    position: absolute;
    inset-inline-start: -58px;
    top: 110px;
    width: 230px;
    height: 230px;
    opacity: .11;
    background: url('/img/omani-theme/rosette.svg') center / contain no-repeat;
    pointer-events: none;
}

.ou-public .am-hero-badge,
.ou-public .am-sec-head .am-kicker {
    color: var(--ou-green-strong);
    border-color: rgba(8, 127, 115, .24);
    background: rgba(8, 127, 115, .08);
}

.ou-public .am-hero-badge .am-dot {
    background: var(--ou-green);
}

.ou-public .am-hero h1,
.ou-public .am-page-head h1 {
    color: var(--ou-ink) !important;
    letter-spacing: -.025em;
}

.ou-public .am-hero .am-accent {
    background: linear-gradient(100deg, var(--ou-green), var(--ou-green-strong), var(--ou-bronze), var(--ou-green));
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.ou-public .am-hero .am-lead,
.ou-public .am-page-head p,
.ou-public .am-sec-head p {
    color: var(--ou-muted) !important;
}

.ou-public .btn-primary,
.ou-public .btn-secondary,
.ou-public .am-send-btn,
.ou-public .am-ind-btn,
.ou-public .pricing-trial-btn,
.ou-auth .btn-primary,
.ou-auth .btn-secondary {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--ou-green), var(--ou-green-strong)) !important;
    box-shadow: 0 10px 24px rgba(8, 127, 115, .20) !important;
}

.ou-public .btn-primary:hover,
.ou-public .btn-secondary:hover,
.ou-public .am-send-btn:hover,
.ou-auth .btn-primary:hover,
.ou-auth .btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(8, 127, 115, .27) !important;
}

.ou-public .am-btn-ghost {
    color: var(--ou-green-strong) !important;
    border-color: rgba(8, 127, 115, .30) !important;
    background: rgba(255, 253, 250, .74) !important;
}

.ou-public .am-btn-ghost:hover {
    color: #fff !important;
    border-color: var(--ou-green) !important;
    background: var(--ou-green) !important;
}

.ou-public .am-hero-stats {
    border-top-color: var(--ou-line);
}

.ou-public .am-hero-stat .am-v,
.ou-public .am-stat .am-num {
    color: var(--ou-green);
}

.ou-public .am-hero-stat .am-l,
.ou-public .am-stat .am-lbl {
    color: var(--ou-muted);
}

.ou-public .am-dashboard-glow,
.ou-public .am-mockup-wrap::before {
    background: rgba(183, 138, 69, .15);
}

.ou-public .am-mockup {
    color: var(--ou-ink);
    border-color: rgba(183, 138, 69, .28);
    background: var(--ou-surface);
    box-shadow: var(--ou-shadow-lg);
}

.ou-public .am-mockup-bar {
    border-bottom-color: rgba(255, 255, 255, .12);
    background: linear-gradient(135deg, var(--ou-green-deep), var(--ou-green-strong));
}

.ou-public .am-dashboard-sidebar {
    border-color: var(--ou-line);
    background: #f1e8da;
}

.ou-public .am-dashboard-brand {
    color: var(--ou-ink);
    border-color: var(--ou-line);
}

.ou-public .am-dashboard-nav span {
    color: var(--ou-muted);
}

.ou-public .am-dashboard-nav span.active {
    color: var(--ou-green-strong);
    background: rgba(8, 127, 115, .11);
}

.ou-public .am-dashboard-main {
    background: linear-gradient(145deg, #fffdfa, #f6efe3);
}

.ou-public .am-dashboard-heading strong,
.ou-public .am-dashboard-kpi .value,
.ou-public .am-dashboard-card-title,
.ou-public .am-activity-row strong {
    color: var(--ou-ink);
}

.ou-public .am-dashboard-heading small,
.ou-public .am-dashboard-kpi .label,
.ou-public .am-activity-row small {
    color: var(--ou-muted);
}

.ou-public .am-dashboard-kpi,
.ou-public .am-dashboard-card {
    border-color: var(--ou-line);
    background: rgba(255, 255, 255, .82);
}

.ou-public .am-chart {
    background: linear-gradient(180deg, rgba(8, 127, 115, .10), transparent);
}

.ou-public .am-chart::before {
    background: repeating-linear-gradient(to bottom, transparent 0 30px, rgba(103, 79, 52, .09) 30px 31px);
}

.ou-public .am-chart-line {
    stroke: var(--ou-green);
}

.ou-public .am-chart-area {
    fill: rgba(8, 127, 115, .10);
}

.ou-public .am-chart circle {
    fill: var(--ou-green);
    stroke: var(--ou-surface);
}

.ou-public .am-activity-row {
    border-color: var(--ou-line);
}

.ou-public .am-float-chip {
    color: var(--ou-ink);
    border-color: var(--ou-line);
    background: rgba(255, 253, 250, .96);
    box-shadow: var(--ou-shadow);
}

.ou-public .am-float-chip i,
.ou-public .am-activity-row > span {
    color: var(--ou-green);
}

.ou-public .am-feat,
.ou-public .am-ind,
.ou-public .am-stat,
.ou-public .am-testi-card,
.ou-public .am-faq,
.ou-public .step,
.ou-public .am-blog-card {
    color: var(--ou-ink);
    border: 1px solid var(--ou-line) !important;
    background: rgba(255, 253, 250, .92) !important;
    box-shadow: var(--ou-shadow-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.ou-public .am-feat:hover,
.ou-public .am-ind:hover,
.ou-public .am-stat:hover,
.ou-public .am-testi-card:hover,
.ou-public .step:hover,
.ou-public .am-blog-card:hover {
    border-color: rgba(8, 127, 115, .30) !important;
    background: #fff !important;
    box-shadow: var(--ou-shadow) !important;
}

.ou-public .am-feat::before,
.ou-public .am-ind::before,
.ou-public .am-testi-card::before {
    background: linear-gradient(135deg, var(--ou-green), var(--ou-bronze), var(--ou-green-strong));
}

.ou-public .am-ico,
.ou-public .am-feat .am-ico,
.ou-public .am-ind .am-ico {
    color: var(--ou-green) !important;
    border-color: rgba(8, 127, 115, .16) !important;
    background: linear-gradient(135deg, rgba(8, 127, 115, .10), rgba(183, 138, 69, .12)) !important;
}

.ou-public .am-feat p,
.ou-public .am-ind p,
.ou-public .am-testi-card .am-content,
.ou-public .am-testi-meta,
.ou-public .am-faq .am-answer,
.ou-public .step p,
.ou-public .am-blog-card .card-text,
.ou-public .am-blog-card .text-muted {
    color: var(--ou-muted) !important;
}

.ou-public .am-testi-stars,
.ou-public .am-quote {
    color: var(--ou-bronze) !important;
}

.ou-public .am-faq[open] {
    border-color: rgba(8, 127, 115, .30) !important;
    background: #fff !important;
    box-shadow: var(--ou-shadow) !important;
}

.ou-public .am-faq summary .am-chev {
    color: var(--ou-green);
    background: var(--ou-green-soft);
}

.ou-public .am-stats-band,
.ou-public .am-testi,
.ou-public .am-features,
.ou-public .steps {
    color: var(--ou-ink);
    background: transparent;
}

.ou-public .am-cta-box,
.ou-public .am-cta-mini {
    color: #fff;
    border-color: rgba(255, 255, 255, .14);
    background:
        url('/img/omani-theme/sadu.svg') center bottom 10px / 360px 90px repeat-x,
        linear-gradient(135deg, var(--ou-green-deep), var(--ou-green));
    box-shadow: var(--ou-shadow-lg);
}

.ou-public .am-cta-box h2,
.ou-public .am-cta-mini h3,
.ou-public .am-cta-box p,
.ou-public .am-cta-mini p {
    color: #fff !important;
}

.ou-public .am-panel,
.ou-public .am-article-body {
    color: var(--ou-ink);
    border: 1px solid var(--ou-line);
    background: var(--ou-surface);
    box-shadow: var(--ou-shadow);
}

.ou-public .am-input {
    color: var(--ou-ink);
    border-color: var(--ou-line);
    background: #fff;
}

.ou-public .am-field-label {
    display: block;
    margin: 0 0 6px;
    color: var(--ou-ink-2);
    font-size: 13px;
    font-weight: 800;
}

.ou-public .am-field-label + .am-input {
    margin-bottom: 14px;
}

.ou-public .am-input:focus {
    border-color: var(--ou-green);
    box-shadow: 0 0 0 3px rgba(8, 127, 115, .10);
}

.ou-public .am-aside-ico {
    color: var(--ou-green);
    background: var(--ou-green-soft);
}

.ou-public .am-aside-link,
.ou-public .am-contact-line a,
.ou-public .am-article-body a {
    color: var(--ou-green);
}

.ou-public .am-article-body :where(table, pre, iframe, video) {
    max-width: 100%;
}

.ou-public .am-article-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ou-public .am-article-body iframe,
.ou-public .am-article-body video {
    width: 100%;
}

.ou-public .am-article-body pre {
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ou-public .am-footer {
    color: rgba(255, 255, 255, .84);
    border-top-color: rgba(255, 255, 255, .10);
    background:
        linear-gradient(rgba(5, 77, 72, .97), rgba(5, 77, 72, .97)),
        url('/img/omani-theme/sadu.svg') center top / 420px auto repeat-x;
}

.ou-public .am-footer h4,
.ou-public .am-footer-brand,
.ou-public .am-footer-brand * {
    color: #fff !important;
}

.ou-public .am-footer p,
.ou-public .am-footer li a,
.ou-public .am-footer-bottom {
    color: rgba(255, 255, 255, .76) !important;
}

.ou-public .am-footer li a:hover {
    color: #f0d09a !important;
}

.ou-public .am-footer-social a {
    color: #fff;
    background: rgba(255, 255, 255, .10);
}

.ou-public .am-footer-social a:hover {
    color: var(--ou-green-deep);
    background: #f0d09a;
}

/* Standalone fallback landing page. */
body.ou-welcome {
    --page-bg: var(--ou-ivory);
    --page-bg-secondary: var(--ou-ivory-2);
    --surface: rgba(255, 253, 250, .92);
    --surface-strong: #fffdfa;
    --surface-hover: #fff;
    --primary: var(--ou-green);
    --primary-dark: var(--ou-green-strong);
    --secondary: var(--ou-bronze);
    --purple: var(--ou-bronze-strong);
    --gold: var(--ou-bronze);
    --text-primary: var(--ou-ink);
    --text-secondary: var(--ou-ink-2);
    --text-muted: var(--ou-muted);
    --border-color: var(--ou-line);
    --border-hover: rgba(8, 127, 115, .30);
}

.ou-welcome .site-header,
.ou-welcome .site-header.scrolled {
    border-color: rgba(183, 138, 69, .24);
    background: rgba(255, 253, 250, .94);
    box-shadow: var(--ou-shadow-sm);
    backdrop-filter: blur(15px);
}

.ou-welcome .brand,
.ou-welcome .main-nav a {
    color: var(--ou-ink-2);
}

.ou-welcome .main-nav a::after {
    background: var(--ou-green);
}

.ou-welcome .lang-switch {
    border-color: var(--ou-line);
    background: var(--ou-ivory-2);
}

.ou-welcome .lang-switch a.active {
    color: #fff;
    background: var(--ou-green);
}

.ou-welcome .btn-primary,
.ou-welcome .btn-secondary {
    color: #fff;
    background: linear-gradient(135deg, var(--ou-green), var(--ou-green-strong));
    box-shadow: 0 10px 24px rgba(8, 127, 115, .20);
}

.ou-welcome .btn-outline {
    color: var(--ou-green-strong);
    border-color: rgba(8, 127, 115, .28);
    background: rgba(255, 255, 255, .60);
}

.ou-welcome .hero::before {
    background:
        url('/img/omani-theme/rosette.svg') left -55px top 110px / 230px no-repeat,
        radial-gradient(650px 430px at 85% 4%, rgba(183, 138, 69, .17), transparent 68%),
        radial-gradient(540px 380px at 8% 55%, rgba(8, 127, 115, .08), transparent 70%);
}

.ou-welcome .hero h1 .accent {
    background: linear-gradient(100deg, var(--ou-green), var(--ou-bronze));
    -webkit-background-clip: text;
    background-clip: text;
}

.ou-welcome .dashboard-shell {
    border-color: var(--ou-line);
    background: var(--ou-surface);
    box-shadow: var(--ou-shadow-lg);
}

.ou-welcome .dashboard-topbar,
.ou-welcome .dashboard-sidebar {
    border-color: var(--ou-line);
    background: var(--ou-ivory-2);
}

.ou-welcome .dashboard-main {
    background: linear-gradient(145deg, #fffdfa, #f6efe3);
}

.ou-welcome .dash-card,
.ou-welcome .dash-kpi,
.ou-welcome .stats-panel,
.ou-welcome .feat,
.ou-welcome .step {
    border-color: var(--ou-line);
    background: rgba(255, 253, 250, .94);
    box-shadow: var(--ou-shadow-sm);
}

.ou-welcome .dash-heading strong,
.ou-welcome .dash-kpi .value,
.ou-welcome .dash-card-title,
.ou-welcome .activity-row strong {
    color: var(--ou-ink);
}

.ou-welcome .features-section,
.ou-welcome .steps-section {
    background: linear-gradient(180deg, rgba(246, 239, 227, .70), rgba(251, 247, 239, .35));
}

.ou-welcome .footer {
    color: #fff;
    background: var(--ou-green-deep);
}

/* ------------------------------ Authentication ------------------------------ */

body.ou-auth {
    --am-navy: var(--ou-green-deep);
    --am-navy-2: var(--ou-green-strong);
    --am-navy-3: var(--ou-green);
    --am-blue: var(--ou-green);
    --am-blue-dark: var(--ou-green-strong);
    --am-teal: var(--ou-green);
    --am-teal-dark: var(--ou-green-strong);
    --am-orange: var(--ou-bronze);
    --am-ink: var(--ou-ink);
    --am-muted: var(--ou-muted);
    --am-line: var(--ou-line);
    min-height: 100vh;
    color: var(--ou-ink);
    background:
        url('/img/omani-theme/corner.svg') left top / 210px 210px no-repeat,
        radial-gradient(700px 440px at 96% 2%, rgba(183, 138, 69, .17), transparent 68%),
        radial-gradient(600px 420px at 4% 94%, rgba(8, 127, 115, .10), transparent 70%),
        linear-gradient(145deg, var(--ou-ivory), #fffdfa 48%, var(--ou-ivory-2)) !important;
    background-attachment: scroll !important;
}

body.ou-auth::before {
    content: "" !important;
    position: fixed !important;
    inset: auto -42px -38px auto !important;
    width: 250px !important;
    height: 250px !important;
    z-index: 0 !important;
    opacity: .07 !important;
    filter: none !important;
    background: url('/img/omani-theme/rosette.svg') center / contain no-repeat !important;
    animation: none !important;
}

.ou-auth .auth-head-wrap,
.ou-auth .am-marketing-header {
    padding-top: 16px !important;
}

.ou-auth .auth-nav {
    color: var(--ou-ink);
    border-color: rgba(183, 138, 69, .28);
    background: rgba(255, 253, 250, .93);
    box-shadow: var(--ou-shadow-sm);
}

.ou-auth .auth-link {
    color: var(--ou-ink-2);
}

.ou-auth .auth-link:hover,
.ou-auth .auth-link:focus {
    color: var(--ou-green);
    background: var(--ou-green-soft);
}

.ou-auth .auth-btn-outline {
    color: #fff;
    background: linear-gradient(135deg, var(--ou-green), var(--ou-green-strong));
    box-shadow: 0 8px 20px rgba(8, 127, 115, .18);
}

.ou-auth .auth-nav .lang-switcher summary {
    color: var(--ou-ink-2) !important;
    border-color: var(--ou-line) !important;
    background: var(--ou-ivory-2) !important;
}

.ou-auth .auth-content,
.ou-auth .auth-page-content {
    position: relative;
    z-index: 2;
}

.ou-auth .auth-content > .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-inline: 0;
}

.ou-auth .auth-content .tw-bg-white,
.ou-auth .auth-page-content .tw-bg-white,
.ou-auth .auth-page-content .bg-white,
.ou-auth .register-shell,
.ou-auth .register-card,
.ou-auth .pricing-hero-card,
.ou-auth .pricing .price_card > div {
    color: var(--ou-ink);
    border-color: var(--ou-line) !important;
    background: rgba(255, 253, 250, .96) !important;
    box-shadow: var(--ou-shadow) !important;
}

.ou-auth .auth-content .tw-bg-white,
.ou-auth .auth-page-content .tw-bg-white {
    position: relative;
    overflow: hidden;
}

.ou-auth .auth-content .tw-bg-white::before,
.ou-auth .auth-page-content .tw-bg-white::before,
.ou-auth .register-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--ou-green), var(--ou-bronze), var(--ou-green));
}

.ou-auth .brand-mark,
.ou-auth .register-logo,
.ou-auth .auth-content img[style*="width: 60px"] {
    border: 1px solid var(--ou-line) !important;
    background: #fff;
    box-shadow: 0 8px 22px rgba(63, 43, 25, .13) !important;
}

.ou-auth .tw-text-\[\#1e1e1e\],
.ou-auth .tw-text-black,
.ou-auth .register-title,
.ou-auth .pricing-title,
.ou-auth label {
    color: var(--ou-ink) !important;
}

.ou-auth .tw-text-gray-500,
.ou-auth .register-subtitle,
.ou-auth .pricing-subtitle {
    color: var(--ou-muted) !important;
}

.ou-auth input:not([type="checkbox"]):not([type="radio"]),
.ou-auth select,
.ou-auth textarea,
.ou-auth .form-control,
.ou-auth .select2-container .select2-selection {
    color: var(--ou-ink) !important;
    border-color: var(--ou-line) !important;
    background: #fff !important;
    box-shadow: none !important;
}

.ou-auth input:not([type="checkbox"]):not([type="radio"]):focus,
.ou-auth select:focus,
.ou-auth textarea:focus,
.ou-auth .form-control:focus,
.ou-auth .select2-container--focus .select2-selection {
    border-color: var(--ou-green) !important;
    box-shadow: 0 0 0 3px rgba(8, 127, 115, .10) !important;
}

.ou-auth .input-group-addon {
    color: var(--ou-green-strong) !important;
    border-color: var(--ou-line) !important;
    background: var(--ou-green-soft) !important;
}

.ou-auth button.tw-bg-gradient-to-r,
.ou-auth .wizard > .actions li:not(.disabled) a {
    color: #fff !important;
    background: linear-gradient(135deg, var(--ou-green), var(--ou-green-strong)) !important;
    box-shadow: 0 9px 22px rgba(8, 127, 115, .20) !important;
}

.ou-auth .tw-bg-clip-text.tw-bg-gradient-to-r,
.ou-auth a.tw-bg-gradient-to-r {
    color: var(--ou-green) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor;
}

.ou-auth .show_hide_icon {
    inset-inline-end: 8px !important;
    right: auto !important;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
}

.ou-auth .show_hide_icon svg {
    stroke: var(--ou-green-strong);
}

.ou-auth .register-shell {
    padding: 14px;
    backdrop-filter: none;
}

.ou-auth .register-badge {
    color: var(--ou-green-strong);
    background: var(--ou-green-soft);
}

.ou-auth .register-page-wrap .wizard > .steps a,
.ou-auth .register-page-wrap .wizard > .steps a:hover {
    color: var(--ou-muted);
    border-color: var(--ou-line);
    background: var(--ou-ivory-2);
}

.ou-auth .register-page-wrap .wizard > .steps .current a,
.ou-auth .register-page-wrap .wizard > .steps .current a:hover {
    color: #fff;
    border-color: var(--ou-green);
    background: linear-gradient(135deg, var(--ou-green), var(--ou-green-strong));
    box-shadow: 0 9px 20px rgba(8, 127, 115, .18);
}

.ou-auth .register-page-wrap .wizard > .content,
.ou-auth .register-page-wrap fieldset {
    height: auto !important;
    min-height: 0 !important;
    color: var(--ou-ink);
    border-color: var(--ou-line);
    background: #fffdfa !important;
}

.ou-auth .register-page-wrap legend {
    color: var(--ou-green-deep);
}

.ou-auth .select2-container {
    width: 100% !important;
    max-width: 100%;
}

.ou-auth .g-recaptcha,
.ou-auth .g-recaptcha > div {
    max-width: 100%;
    overflow: hidden;
}

.ou-auth .pricing-save-badge {
    color: var(--ou-green-strong);
    border-color: rgba(8, 127, 115, .26);
    background: var(--ou-green-soft);
}

.ou-auth .pricing-includes-title,
.ou-auth .pricing-trial h3 {
    color: var(--ou-ink) !important;
}

.ou-auth .pricing-includes-sub,
.ou-auth .pricing-trial p {
    color: var(--ou-muted) !important;
}

.ou-auth .pricing-include-card {
    color: var(--ou-ink);
    border-color: var(--ou-line);
    background: rgba(255, 253, 250, .92);
    box-shadow: var(--ou-shadow-sm);
    backdrop-filter: none;
}

.ou-auth .pricing-include-card h4,
.ou-auth .pricing-include-card p {
    color: var(--ou-ink) !important;
}

.ou-auth .pricing-include-card p {
    color: var(--ou-muted) !important;
}

.ou-auth .pricing-include-card .pi-ico {
    color: var(--ou-green);
    background: linear-gradient(135deg, var(--ou-green-soft), var(--ou-bronze-soft));
}

.ou-auth .pricing-trial {
    border-color: var(--ou-line);
    background:
        url('/img/omani-theme/sadu.svg') center bottom 10px / 360px 90px repeat-x,
        linear-gradient(135deg, #fffdfa, var(--ou-ivory-2));
    box-shadow: var(--ou-shadow);
}

/* ------------------------------ Back office ------------------------------ */

body.ou-admin,
body.ou-restaurant,
body.ou-repair-plain {
    background: var(--ou-ivory-2) !important;
}

.ou-admin .thetop,
.ou-admin .ou-app-main,
.ou-admin #scrollable-container,
.ou-restaurant .content-wrapper,
.ou-repair-plain .container-fluid {
    color: var(--ou-ink);
    background:
        radial-gradient(500px 300px at 100% 0%, rgba(183, 138, 69, .10), transparent 68%),
        linear-gradient(180deg, var(--ou-ivory) 0%, var(--ou-ivory-2) 100%) !important;
}

.ou-admin .thetop {
    width: 100%;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.ou-admin .ou-app-main,
.ou-admin .ou-app-sidebar {
    height: 100%;
    min-height: 0;
}

.ou-admin .ou-app-main {
    width: 0;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 0%;
    overflow: hidden;
}

.ou-admin .ou-app-header {
    min-height: 60px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
    background:
        linear-gradient(90deg, rgba(5, 77, 72, .98), rgba(8, 127, 115, .96)),
        url('/img/omani-theme/sadu.svg') center / 360px auto repeat !important;
    box-shadow: 0 8px 24px rgba(5, 77, 72, .16);
}

.ou-admin .ou-app-header > div {
    padding-top: max(12px, env(safe-area-inset-top));
}

.ou-admin .ou-app-header :where(button, summary, a[class*="tw-bg-"]) {
    border-color: rgba(255, 255, 255, .16) !important;
    background: rgba(255, 255, 255, .09) !important;
}

.ou-admin .ou-app-header :where(button, summary, a[class*="tw-bg-"]):hover {
    background: rgba(255, 255, 255, .17) !important;
}

.ou-admin .ou-app-header :where(.tw-bg-white, ul[class*="tw-bg-white"], .dropdown-menu) {
    color: var(--ou-ink) !important;
    border-color: var(--ou-line) !important;
    background: #fff !important;
}

.ou-admin .ou-app-sidebar {
    position: relative;
    width: 17.5rem !important;
    min-width: 17.5rem;
    flex-direction: column;
    overflow: hidden;
    border-inline-end: 1px solid var(--ou-line);
    background: var(--ou-surface) !important;
    box-shadow: 5px 0 22px rgba(67, 44, 23, .06);
}

html[dir="rtl"] .ou-admin .ou-app-sidebar {
    box-shadow: -5px 0 22px rgba(67, 44, 23, .06);
}

.ou-admin .ou-sidebar-brand {
    position: relative;
    overflow: hidden;
    min-height: 60px;
    justify-content: flex-start !important;
    gap: 10px;
    padding-inline: 12px 38px;
    border-color: rgba(255, 255, 255, .12) !important;
    background: linear-gradient(135deg, var(--ou-green-deep), var(--ou-green)) !important;
}

.ou-admin .ou-sidebar-platform-logo {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 11px;
    background: var(--ou-ivory);
    box-shadow: 0 7px 18px rgba(3, 47, 43, .24);
}

.ou-admin .ou-sidebar-brand::after {
    content: "";
    position: absolute;
    inset-inline-end: -25px;
    top: -25px;
    width: 100px;
    height: 100px;
    opacity: .15;
    background: url('/img/omani-theme/rosette.svg') center / contain no-repeat;
}

.ou-admin .side-bar-heading {
    max-width: calc(100% - 50px);
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
    position: relative;
    z-index: 1;
    font-weight: 800 !important;
    text-align: start !important;
}

.ou-admin .ou-sidebar-business-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ou-admin .ou-sidebar-online {
    flex: 0 0 auto;
    background: #5bd792 !important;
    box-shadow: 0 0 0 4px rgba(91, 215, 146, .14);
}

.ou-admin .ou-sidebar-close {
    position: absolute;
    inset-block-start: 9px;
    inset-inline-end: 10px;
    z-index: 3;
    width: 42px;
    height: 42px;
    display: none;
    place-items: center;
    padding: 0;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .10);
}

.ou-admin #side-bar {
    min-height: 0;
    padding: 12px 10px max(24px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border-color: var(--ou-line) !important;
    background: linear-gradient(180deg, #fffdfa, #fbf7ef) !important;
    scrollbar-color: rgba(8, 127, 115, .32) transparent;
}

.ou-admin #side-bar > * + * {
    margin-block-start: 4px !important;
}

.ou-admin #side-bar .ou-sidebar-link,
.ou-admin #side-bar .ou-sidebar-child-link {
    color: #5d625f !important;
}

.ou-admin #side-bar .ou-sidebar-link {
    width: 100%;
    min-height: 44px;
    padding: 8px 11px;
    border: 1px solid transparent;
    border-inline-start-width: 3px;
}

.ou-admin #side-bar .ou-sidebar-link:hover,
.ou-admin #side-bar .ou-sidebar-link:focus-visible,
.ou-admin #side-bar .ou-sidebar-child-link:hover,
.ou-admin #side-bar .ou-sidebar-child-link:focus-visible {
    color: var(--ou-green-strong) !important;
    background: var(--ou-green-soft) !important;
}

.ou-admin #side-bar .ou-sidebar-link.is-active,
.ou-admin #side-bar .ou-sidebar-toggle.is-active-parent,
.ou-admin #side-bar .ou-sidebar-child-link.is-active {
    color: var(--ou-green-strong) !important;
    border-inline-start-color: var(--ou-bronze) !important;
    background: linear-gradient(90deg, rgba(8, 127, 115, .13), rgba(183, 138, 69, .08)) !important;
    font-weight: 800 !important;
}

.ou-admin #side-bar :where(i, svg) {
    color: var(--ou-bronze);
}

.ou-admin #side-bar .ou-sidebar-link > :where(i, svg):first-child,
.ou-admin #side-bar .ou-sidebar-child-link > :where(i, svg):first-child {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.ou-admin #side-bar :where(.ou-sidebar-link.is-active, .ou-sidebar-toggle.is-active-parent, .ou-sidebar-child-link.is-active) > :where(i, svg):first-child {
    color: var(--ou-green-strong) !important;
}

.ou-admin #side-bar .ou-sidebar-chevron {
    margin: 0 !important;
    margin-inline-start: auto !important;
    color: var(--ou-bronze) !important;
    transition: transform .2s ease;
}

.ou-admin #side-bar .ou-sidebar-toggle[aria-expanded="false"] .ou-sidebar-chevron {
    transform: rotate(-90deg);
}

html[dir="rtl"] .ou-admin #side-bar .ou-sidebar-toggle[aria-expanded="false"] .ou-sidebar-chevron {
    transform: rotate(90deg);
}

.ou-admin #side-bar .ou-sidebar-toggle[aria-expanded="true"] .ou-sidebar-chevron {
    transform: rotate(0deg);
}

.ou-admin #side-bar .ou-sidebar-children {
    margin-block: 4px 7px;
    padding-block: 3px;
    padding-inline-start: 2.5rem;
    padding-inline-end: 0;
}

.ou-admin #side-bar .ou-sidebar-rail {
    position: absolute;
    inset-block: 5px;
    inset-inline-start: 1.1rem;
    width: 1px;
    background: linear-gradient(180deg, var(--ou-bronze), var(--ou-line-strong));
}

.ou-admin #side-bar .ou-sidebar-children-list {
    display: grid;
    gap: 2px;
}

.ou-admin #side-bar .ou-sidebar-child-link {
    min-height: 38px;
    padding: 7px 9px;
    overflow: visible !important;
    border: 1px solid transparent;
    border-radius: 9px;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
}

.ou-admin #side-bar .ou-sidebar-section-label {
    padding: 12px 11px 5px;
    color: var(--ou-bronze-strong);
}

@media (min-width: 1024px) {
    body.ou-admin.ou-sidebar-collapsed .ou-app-sidebar {
        display: none !important;
    }
}

.ou-admin #scrollable-container {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    height: auto !important;
    min-height: 0;
    scrollbar-color: rgba(8, 127, 115, .30) transparent;
}

/* Dashboard home: keep dynamic business colors from overriding the Omani shell. */
.ou-admin .ou-dashboard {
    min-height: 100%;
    color: var(--ou-ink);
    background: var(--ou-ivory-2);
}

.ou-admin .ou-dashboard-hero,
.ou-admin .ou-dashboard-hero-fill {
    background:
        linear-gradient(100deg, rgba(6, 77, 72, .97), rgba(8, 127, 115, .93)),
        url('/img/omani-theme/sadu.svg') center / 360px 90px repeat !important;
    background-color: var(--ou-green-deep) !important;
}

.ou-admin .ou-dashboard-hero h1 {
    color: #fff !important;
    font-size: clamp(30px, 2.5vw, 38px) !important;
    line-height: 1.25;
    font-weight: 800 !important;
    text-shadow: 0 2px 14px rgba(4, 50, 47, .18);
}

.ou-admin .ou-dashboard .tw-rounded-xl.tw-ring-1 {
    --tw-ring-color: var(--ou-line) !important;
    border: 1px solid var(--ou-line) !important;
    background: var(--ou-surface) !important;
    box-shadow: var(--ou-shadow-sm) !important;
}

.ou-admin .ou-dashboard .tw-rounded-xl.tw-ring-1:hover {
    box-shadow: var(--ou-shadow) !important;
}

.ou-admin .ou-dashboard :where(.tw-bg-sky-100, .bg-sky-100, .tw-bg-green-100) {
    color: var(--ou-green-strong) !important;
    background: var(--ou-green-soft) !important;
}

.ou-admin .ou-dashboard :where(.tw-text-sky-500, .tw-text-green-500) {
    color: var(--ou-green) !important;
}

.ou-admin .ou-dashboard .tw-bg-yellow-100 {
    background: var(--ou-bronze-soft) !important;
}

.ou-admin .ou-dashboard .tw-text-yellow-500 {
    color: var(--ou-bronze-strong) !important;
}

.ou-admin .ou-dashboard .tw-bg-red-100 {
    background: rgba(185, 68, 63, .10) !important;
}

.ou-admin .ou-dashboard .tw-text-red-500 {
    color: var(--ou-danger) !important;
}

.ou-admin .ou-dashboard :where(.tw-text-gray-900, h3) {
    color: var(--ou-ink) !important;
}

.ou-admin .ou-dashboard :where(.tw-text-gray-400, .tw-text-gray-500) {
    color: var(--ou-muted) !important;
}

.ou-admin .ou-dashboard .text-info {
    color: var(--ou-info) !important;
}

.ou-admin .ou-dashboard .tw-border-2 {
    border-color: var(--ou-line) !important;
}

.ou-admin .ou-dashboard-content .tw-border-dashed.tw-bg-gray-50 {
    overflow: hidden;
    border-style: solid !important;
    border-color: var(--ou-line) !important;
    background: linear-gradient(180deg, #fffdfa, var(--ou-surface-soft)) !important;
}

.ou-admin .ou-dashboard-content .highcharts-background {
    fill: transparent !important;
}

.ou-admin .ou-dashboard-content .highcharts-grid-line {
    stroke: var(--ou-line) !important;
}

.ou-admin .ou-dashboard #dashboard_date_filter {
    color: var(--ou-green-strong) !important;
    border: 1px solid rgba(255, 255, 255, .30) !important;
    background: rgba(255, 253, 250, .96) !important;
    box-shadow: 0 6px 18px rgba(4, 50, 47, .12);
}

@media (min-width: 1280px) {
    .ou-admin .ou-dashboard-hero-fill--surface {
        background: var(--ou-ivory-2) !important;
    }
}

.ou-admin section.content,
.ou-restaurant section.content {
    padding: 20px;
}

.ou-admin .content-header,
.ou-restaurant .content-header {
    padding: 20px 20px 8px;
}

.ou-admin .content-header h1,
.ou-restaurant .content-header h1 {
    color: var(--ou-ink);
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 800;
}

.ou-admin .content-header h1 small,
.ou-restaurant .content-header h1 small {
    color: var(--ou-muted);
}

.ou-admin #scrollable-container :where(.box, .panel, .well, .nav-tabs-custom, .info-box, .small-box),
.ou-restaurant :where(.box, .panel, .well, .nav-tabs-custom, .info-box, .small-box),
.ou-repair-plain :where(.box, .panel, .well, .nav-tabs-custom) {
    border: 1px solid var(--ou-line);
    border-radius: var(--ou-radius) !important;
    background: var(--ou-surface);
    box-shadow: var(--ou-shadow-sm);
}

.ou-admin #scrollable-container .tw-bg-white,
.ou-admin #scrollable-container [class*="tw-dw-card"],
.ou-restaurant .tw-bg-white {
    border-color: var(--ou-line) !important;
    background-color: var(--ou-surface) !important;
}

.ou-admin #scrollable-container :where(.tw-rounded-xl, .tw-rounded-2xl),
.ou-restaurant :where(.tw-rounded-xl, .tw-rounded-2xl) {
    border-radius: var(--ou-radius) !important;
}

.ou-admin .box.box-primary,
.ou-admin .box.box-info,
.ou-restaurant .box.box-primary {
    border-top-color: var(--ou-green) !important;
}

.ou-admin .box.box-warning {
    border-top-color: var(--ou-bronze) !important;
}

.ou-admin .box-header,
.ou-admin .panel-heading,
.ou-restaurant .box-header,
.ou-repair-plain .box-header {
    min-height: 48px;
    color: var(--ou-ink);
    border-bottom-color: var(--ou-line);
    background: linear-gradient(180deg, #fffdfa, #fbf6ee);
    border-radius: var(--ou-radius) var(--ou-radius) 0 0;
}

.ou-admin .box-header .box-title,
.ou-admin .panel-title,
.ou-restaurant .box-header .box-title {
    color: var(--ou-ink);
    font-weight: 800;
}

.ou-admin .box-body,
.ou-admin .panel-body,
.ou-restaurant .box-body,
.ou-repair-plain .box-body {
    color: var(--ou-ink-2);
}

.ou-admin .nav-tabs,
.ou-admin .nav-tabs-custom > .nav-tabs,
.ou-restaurant .nav-tabs {
    border-bottom-color: var(--ou-line);
}

.ou-admin .nav-tabs > li > a,
.ou-restaurant .nav-tabs > li > a {
    min-height: 42px;
    color: var(--ou-muted);
    border-radius: 10px 10px 0 0;
    font-weight: 700;
}

.ou-admin .nav-tabs > li.active > a,
.ou-admin .nav-tabs > li.active > a:focus,
.ou-admin .nav-tabs > li.active > a:hover,
.ou-restaurant .nav-tabs > li.active > a {
    color: var(--ou-green-strong);
    border-color: var(--ou-line) var(--ou-line) var(--ou-surface);
    background: var(--ou-surface);
}

.ou-admin .nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--ou-green);
}

.ou-admin :where(.form-control, input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="search"], select, textarea),
.ou-restaurant :where(.form-control, input[type="text"], input[type="number"], select, textarea),
.ou-repair-plain :where(.form-control, input, select, textarea) {
    color: var(--ou-ink);
    border-color: #d8caba;
    border-radius: 9px;
    background: #fff;
    box-shadow: none;
}

.ou-admin :where(.form-control, input, select, textarea):focus,
.ou-restaurant :where(.form-control, input, select, textarea):focus,
.ou-repair-plain :where(.form-control, input, select, textarea):focus {
    border-color: var(--ou-green);
    box-shadow: 0 0 0 3px rgba(8, 127, 115, .10);
}

.ou-admin label,
.ou-restaurant label,
.ou-repair-plain label {
    color: var(--ou-ink-2);
    font-weight: 700;
}

.ou-admin .input-group-addon,
.ou-restaurant .input-group-addon,
.ou-repair-plain .input-group-addon {
    color: var(--ou-green-strong);
    border-color: #d8caba;
    background: var(--ou-green-soft);
}

.ou-admin .select2-container .select2-selection,
.ou-restaurant .select2-container .select2-selection {
    min-height: 34px;
    color: var(--ou-ink);
    border-color: #d8caba !important;
    border-radius: 9px !important;
    background: #fff !important;
}

.ou-admin .select2-container--focus .select2-selection,
.ou-restaurant .select2-container--focus .select2-selection {
    border-color: var(--ou-green) !important;
    box-shadow: 0 0 0 3px rgba(8, 127, 115, .10);
}

.ou-admin .select2-dropdown,
.ou-admin .daterangepicker,
.ou-admin .datepicker,
.ou-admin .bootstrap-datetimepicker-widget,
.ou-restaurant .select2-dropdown {
    color: var(--ou-ink);
    border-color: var(--ou-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--ou-shadow);
}

.ou-admin .select2-results__option--highlighted,
.ou-admin .datepicker table tr td.active,
.ou-admin .daterangepicker td.active {
    color: #fff !important;
    background: var(--ou-green) !important;
}

.ou-admin :where(.btn-primary, .tw-dw-btn-primary),
.ou-restaurant :where(.btn-primary, .tw-dw-btn-primary),
.ou-repair-plain .btn-primary {
    color: #fff !important;
    border-color: var(--ou-green-strong) !important;
    background: linear-gradient(135deg, var(--ou-green), var(--ou-green-strong)) !important;
    box-shadow: 0 5px 14px rgba(8, 127, 115, .16);
}

.ou-admin #scrollable-container [class*="tw-from-indigo-"][class*="tw-to-blue-"],
.ou-restaurant [class*="tw-from-indigo-"][class*="tw-to-blue-"] {
    color: #fff !important;
    background-image: linear-gradient(135deg, var(--ou-green), var(--ou-green-strong)) !important;
}

.ou-admin :where(.btn-default, .tw-dw-btn-outline),
.ou-restaurant .btn-default {
    color: var(--ou-ink-2);
    border-color: var(--ou-line-strong);
    background: #fffdfa;
}

.ou-admin :where(.btn-default, .tw-dw-btn-outline):hover,
.ou-restaurant .btn-default:hover {
    color: var(--ou-green-strong);
    border-color: rgba(8, 127, 115, .35);
    background: var(--ou-green-soft);
}

.ou-admin .btn-info {
    border-color: #2e747d;
    background: var(--ou-info);
}

.ou-admin .btn-warning {
    border-color: var(--ou-bronze-strong);
    background: var(--ou-warning);
}

.ou-admin .btn-success {
    border-color: #116b54;
    background: var(--ou-success);
}

.ou-admin .btn-danger {
    border-color: #963731;
    background: var(--ou-danger);
}

.ou-admin .table,
.ou-restaurant .table,
.ou-repair-plain .table {
    color: var(--ou-ink-2);
    background: #fff;
}

.ou-admin .table > thead > tr > th,
.ou-restaurant .table > thead > tr > th,
.ou-repair-plain .table > thead > tr > th {
    color: var(--ou-ink);
    border-bottom-color: var(--ou-line-strong);
    background: #f6efe4;
    font-weight: 800;
    white-space: nowrap;
}

.ou-admin .table > tbody > tr > td,
.ou-admin .table > tbody > tr > th,
.ou-restaurant .table > tbody > tr > td,
.ou-repair-plain .table > tbody > tr > td {
    border-top-color: #eee5d9;
}

.ou-admin .table-striped > tbody > tr:nth-of-type(odd),
.ou-restaurant .table-striped > tbody > tr:nth-of-type(odd) {
    background: rgba(246, 239, 227, .46);
}

.ou-admin .table-hover > tbody > tr:hover,
.ou-restaurant .table-hover > tbody > tr:hover {
    background: rgba(8, 127, 115, .055);
}

.ou-admin .table-responsive,
.ou-admin .dataTables_scrollBody,
.ou-admin .dataTables_wrapper,
.ou-restaurant .table-responsive,
.ou-repair-plain .table-responsive {
    max-width: 100%;
    scrollbar-color: rgba(8, 127, 115, .32) var(--ou-ivory-2);
}

.ou-admin .dataTables_wrapper .dataTables_filter input,
.ou-admin .dataTables_wrapper .dataTables_length select {
    border-color: var(--ou-line-strong);
    border-radius: 8px;
}

.ou-admin .pagination > li > a,
.ou-admin .pagination > li > span,
.ou-restaurant .pagination > li > a,
.ou-restaurant .pagination > li > span {
    color: var(--ou-green-strong);
    border-color: var(--ou-line);
    background: #fff;
}

.ou-admin .pagination > .active > a,
.ou-admin .pagination > .active > span,
.ou-restaurant .pagination > .active > a {
    color: #fff;
    border-color: var(--ou-green);
    background: var(--ou-green);
}

.ou-admin .modal-content,
.ou-restaurant .modal-content,
.ou-repair-plain .modal-content {
    overflow: hidden;
    color: var(--ou-ink);
    border: 1px solid var(--ou-line);
    border-radius: var(--ou-radius);
    background: var(--ou-surface);
    box-shadow: var(--ou-shadow-lg);
}

.ou-admin .modal-header,
.ou-restaurant .modal-header,
.ou-repair-plain .modal-header {
    color: var(--ou-ink);
    border-bottom-color: var(--ou-line);
    background: linear-gradient(180deg, #fffdfa, #f7f0e5);
}

.ou-admin .modal-footer,
.ou-restaurant .modal-footer,
.ou-repair-plain .modal-footer {
    border-top-color: var(--ou-line);
    background: #fbf7ef;
}

.ou-admin .dropdown-menu,
.ou-restaurant .dropdown-menu {
    color: var(--ou-ink);
    border-color: var(--ou-line);
    border-radius: 12px;
    box-shadow: var(--ou-shadow);
}

.ou-admin .dropdown-menu > li > a:hover,
.ou-restaurant .dropdown-menu > li > a:hover {
    color: var(--ou-green-strong);
    background: var(--ou-green-soft);
}

.ou-admin .breadcrumb {
    color: var(--ou-muted);
    background: transparent;
}

.ou-admin .breadcrumb > .active,
.ou-admin .breadcrumb a {
    color: var(--ou-green-strong);
}

.ou-admin .alert-info {
    color: #245d63;
    border-color: #b9d7d5;
    background: #e9f4f2;
}

.ou-admin .alert-warning {
    color: #77501e;
    border-color: #e4c590;
    background: #faf0dc;
}

.ou-admin .scrolltop .scroll {
    color: #fff;
    background: var(--ou-green);
    box-shadow: var(--ou-shadow-sm);
}

/* POS stays dense, but receives the palette and safe-area fixes. */
.ou-admin.ou-pos .ou-app-main,
.ou-admin.ou-pos #scrollable-container {
    background: var(--ou-ivory-2) !important;
}

.ou-admin.ou-pos .pos-form-actions {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--ou-line);
    background: rgba(255, 253, 250, .96);
    backdrop-filter: blur(10px);
}

.ou-admin.ou-pos #pos_table {
    max-width: 100%;
}

/* ------------------------------ Guest / invoices / install ------------------------------ */

body.ou-guest,
body.ou-home,
body.ou-install {
    min-height: 100vh;
    color: var(--ou-ink);
    background:
        url('/img/omani-theme/corner.svg') left top / 180px no-repeat,
        radial-gradient(600px 360px at 100% 0%, rgba(183, 138, 69, .13), transparent 68%),
        linear-gradient(145deg, var(--ou-ivory), var(--ou-ivory-2)) !important;
}

.ou-home .navbar-default,
.ou-install .navbar-default {
    color: var(--ou-ink);
    border-color: var(--ou-line);
    background: rgba(255, 253, 250, .94);
    box-shadow: var(--ou-shadow-sm);
}

.ou-home .navbar-default .navbar-nav > li > a,
.ou-home .navbar-default .navbar-brand {
    color: var(--ou-ink-2);
}

.ou-home .navbar-default .navbar-nav > li > a:hover {
    color: var(--ou-green-strong);
    background: var(--ou-green-soft);
}

.ou-guest #invoice_content,
.ou-guest .invoice,
.ou-guest .payment_form,
.ou-install .login-box,
.ou-install .box {
    max-width: 100%;
    color: var(--ou-ink);
    border-color: var(--ou-line);
    background: var(--ou-surface);
    box-shadow: var(--ou-shadow);
}

.ou-guest .table-responsive,
.ou-guest #invoice_content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ou-guest .ou-invoice-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.ou-guest .ou-invoice-pay {
    margin-inline-end: 12px;
}

.ou-guest .btn-primary,
.ou-home .btn-primary,
.ou-install .btn-primary {
    color: #fff;
    border-color: var(--ou-green-strong);
    background: linear-gradient(135deg, var(--ou-green), var(--ou-green-strong));
}

/* ------------------------------ Responsive behavior ------------------------------ */

@media (max-width: 1199px) {
    .ou-admin section.content,
    .ou-restaurant section.content {
        padding: 16px;
    }

    .ou-admin .content-header,
    .ou-restaurant .content-header {
        padding-inline: 16px;
    }
}

@media (max-width: 1023px) {
    .ou-admin .ou-app-sidebar {
        display: none !important;
    }

    .ou-admin .ou-app-sidebar.small-view-side-active {
        position: fixed !important;
        inset-block: 0 !important;
        inset-inline-start: 0 !important;
        z-index: 1050 !important;
        width: min(88vw, 310px) !important;
        min-width: 0 !important;
        height: 100dvh !important;
        display: flex !important;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(37, 26, 16, .28);
    }

    .ou-admin .ou-sidebar-close {
        display: grid;
    }

    body.ou-admin.ou-sidebar-drawer-open {
        overflow: hidden !important;
    }

    .ou-admin .overlay {
        inset: 0 !important;
        z-index: 1040 !important;
        width: auto !important;
        height: auto !important;
        background: rgba(23, 42, 49, .52) !important;
        backdrop-filter: blur(2px);
    }
}

@media (max-width: 991px) {
    .ou-public .hero-nav,
    .ou-public .hero-nav--is-sticky,
    .ou-auth .hero-nav,
    .ou-auth .hero-nav--is-sticky {
        background: rgba(255, 253, 250, .97) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .ou-public #hero-menu,
    .ou-auth #hero-menu {
        background: rgba(23, 42, 49, .38) !important;
    }

    .ou-public #hero-menu .hero__menu-content,
    .ou-auth #hero-menu .hero__menu-content {
        color: var(--ou-ink) !important;
        border-color: var(--ou-line) !important;
        background: var(--ou-surface) !important;
        box-shadow: 0 0 70px rgba(40, 28, 18, .24) !important;
    }

    .ou-public #hero-menu .ft-menu__close-btn,
    .ou-auth #hero-menu .ft-menu__close-btn {
        color: var(--ou-green-strong) !important;
        border-color: var(--ou-line) !important;
        background: var(--ou-green-soft) !important;
    }

    .ou-public #hero-menu .cms-nav-actions,
    .ou-auth #hero-menu .cms-nav-actions {
        width: 100% !important;
        margin-top: auto !important;
        padding: 16px 0 0 !important;
        border-top: 1px solid var(--ou-line) !important;
    }

    .ou-public #hero-menu .cms-nav-actions-wrap,
    .ou-auth #hero-menu .cms-nav-actions-wrap {
        width: 100% !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        gap: 9px !important;
    }

    .ou-public #hero-menu .lang-select,
    .ou-auth #hero-menu .lang-select {
        position: relative !important;
        width: 100% !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        color: var(--ou-green-strong) !important;
        border: 1px solid var(--ou-line) !important;
        border-radius: 11px !important;
        background: var(--ou-ivory-2) !important;
    }

    .ou-public #hero-menu .lang-select__el,
    .ou-auth #hero-menu .lang-select__el {
        width: 100% !important;
        min-height: 42px !important;
        padding-inline: 38px !important;
        color: var(--ou-ink-2) !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
    }

    .ou-public #hero-menu .lang-select > i,
    .ou-auth #hero-menu .lang-select > i {
        position: absolute !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    .ou-public #hero-menu .lang-select > i:first-child,
    .ou-auth #hero-menu .lang-select > i:first-child {
        inset-inline-start: 13px !important;
    }

    .ou-public #hero-menu .lang-select__chev,
    .ou-auth #hero-menu .lang-select__chev {
        inset-inline-end: 13px !important;
    }

    .ou-public #hero-menu .cms-nav-login,
    .ou-auth #hero-menu .cms-nav-login {
        width: 100% !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 14px !important;
        border: 1px solid rgba(8, 127, 115, .28) !important;
        border-radius: 11px !important;
        background: var(--ou-green-soft) !important;
    }

    .ou-public #hero-menu .cms-nav-actions .btn,
    .ou-auth #hero-menu .cms-nav-actions .btn {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
    }

    .ou-public .am-hero-grid {
        gap: 38px;
        padding-top: 38px;
    }

    .ou-admin .ou-app-header > div > div {
        align-items: center !important;
    }

    .ou-admin .ou-app-header :where(button, summary, a[class*="tw-bg-"]) {
        min-width: 42px;
        min-height: 42px;
    }

    .ou-admin.ou-pos .pos-form-actions {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }

    .ou-auth .auth-page-content,
    .ou-auth .auth-shell {
        padding-inline: 14px;
    }
}

@media (max-width: 767px) {
    .ou-admin .ou-dashboard-hero > div:first-child,
    .ou-admin .ou-dashboard-hero .tw-relative > .tw-px-5,
    .ou-admin .ou-dashboard-content {
        padding-inline: 12px !important;
    }

    .ou-admin .ou-dashboard-hero h1 {
        margin-bottom: 16px !important;
        font-size: clamp(24px, 8vw, 32px) !important;
        line-height: 1.3;
    }

    .ou-admin .ou-dashboard #dashboard_date_filter {
        width: 100% !important;
        min-height: 44px;
    }

    .ou-admin .ou-dashboard .tw-rounded-xl.tw-ring-1 {
        border-radius: 14px !important;
    }

    .ou-public .am-section {
        padding-block: 54px;
    }

    .ou-public .am-hero h1 {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    .ou-public .am-hero::after {
        width: 150px;
        height: 150px;
        opacity: .07;
    }

    .ou-welcome .header-inner {
        gap: 8px;
    }

    .ou-welcome .header-actions .btn-primary {
        display: none;
    }

    .ou-welcome .main-nav {
        visibility: hidden;
        pointer-events: none;
        color: var(--ou-ink);
        border-color: var(--ou-line);
        background:
            url('/img/omani-theme/rosette.svg') center bottom 18px / 150px no-repeat,
            var(--ou-surface);
        box-shadow: var(--ou-shadow-lg);
    }

    .ou-welcome .main-nav.open {
        visibility: visible;
        pointer-events: auto;
    }

    .ou-welcome .main-nav a {
        color: var(--ou-ink-2);
        border-color: var(--ou-line);
    }

    .ou-welcome .menu-toggle {
        border-color: var(--ou-line);
        background: var(--ou-green-soft);
    }

    .ou-welcome .menu-toggle span {
        background: var(--ou-green-deep);
    }

    .ou-admin section.content,
    .ou-restaurant section.content,
    .ou-repair-plain .container-fluid {
        padding: 12px;
    }

    .ou-admin .content-header,
    .ou-restaurant .content-header {
        padding: 14px 12px 6px;
    }

    .ou-admin .content-header h1,
    .ou-restaurant .content-header h1 {
        font-size: 22px;
    }

    .ou-admin #scrollable-container :where(.box, .panel, .well, .nav-tabs-custom, .info-box),
    .ou-restaurant :where(.box, .panel, .well, .nav-tabs-custom, .info-box) {
        border-radius: 13px !important;
    }

    .ou-admin .box-header,
    .ou-restaurant .box-header {
        min-height: 46px;
        padding: 11px 12px;
        border-radius: 13px 13px 0 0;
    }

    .ou-admin .box-body,
    .ou-admin .panel-body,
    .ou-restaurant .box-body {
        padding: 12px;
    }

    .ou-admin :where(.form-control, input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="search"], select),
    .ou-restaurant :where(.form-control, input[type="text"], input[type="number"], select),
    .ou-repair-plain :where(.form-control, input, select) {
        min-height: 44px;
        font-size: 16px;
    }

    .ou-admin .select2-container .select2-selection,
    .ou-restaurant .select2-container .select2-selection {
        min-height: 44px;
    }

    .ou-admin .select2-selection__rendered,
    .ou-restaurant .select2-selection__rendered {
        line-height: 42px !important;
    }

    .ou-admin .select2-selection__arrow,
    .ou-restaurant .select2-selection__arrow {
        height: 42px !important;
    }

    .ou-admin :where(.btn, .tw-dw-btn),
    .ou-restaurant :where(.btn, .tw-dw-btn),
    .ou-repair-plain .btn {
        min-height: 42px;
    }

    .ou-admin .table-responsive,
    .ou-admin .dataTables_scrollBody,
    .ou-admin .dataTables_wrapper,
    .ou-restaurant .table-responsive,
    .ou-repair-plain .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 0;
    }

    .ou-admin .dataTables_wrapper > .row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 0;
        margin-inline: 0;
    }

    .ou-admin .dataTables_wrapper > .row > [class*="col-sm-"] {
        width: 100%;
        padding-inline: 0;
    }

    .ou-admin .dataTables_length,
    .ou-admin .dataTables_filter,
    .ou-admin .dt-buttons {
        width: 100%;
        float: none !important;
        text-align: start !important;
    }

    .ou-admin .dataTables_filter label,
    .ou-admin .dataTables_filter input {
        width: 100%;
    }

    .ou-admin .dt-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .ou-admin .pagination {
        max-width: 100%;
        display: flex;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .ou-admin .nav-tabs,
    .ou-restaurant .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .ou-admin .nav-tabs > li,
    .ou-restaurant .nav-tabs > li {
        float: none;
        flex: 0 0 auto;
    }

    .ou-admin .modal-dialog,
    .ou-restaurant .modal-dialog,
    .ou-repair-plain .modal-dialog {
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px !important;
    }

    .ou-admin .modal-body,
    .ou-restaurant .modal-body,
    .ou-repair-plain .modal-body {
        max-height: calc(100dvh - 150px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ou-admin .btn-group,
    .ou-admin .input-group-btn,
    .ou-restaurant .btn-group {
        max-width: 100%;
    }

    .ou-auth .auth-content {
        margin-top: 10px;
    }

    .ou-auth .auth-content > .row > [class*="col-"] {
        width: 100%;
        padding-inline: 0;
    }

    .ou-auth .auth-content .tw-bg-white,
    .ou-auth .auth-page-content .tw-bg-white {
        border-radius: 16px !important;
    }

    .ou-auth .register-page-wrap .wizard > .steps {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }

    .ou-auth .register-page-wrap .wizard > .steps > ul {
        width: max-content;
        min-width: 100%;
        display: flex;
    }

    .ou-auth .register-page-wrap .wizard > .steps > ul > li {
        width: min(72vw, 260px) !important;
        flex: 0 0 min(72vw, 260px);
    }

    .ou-auth .register-page-wrap .wizard > .content > .body {
        position: relative !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 10px 2px !important;
    }

    .ou-auth .register-page-wrap .wizard > .actions ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .ou-auth .register-page-wrap .wizard > .actions li {
        margin: 0 !important;
        flex: 1 1 120px;
    }

    .ou-auth .register-page-wrap .wizard > .actions a {
        width: 100%;
    }

    .ou-guest .payment_form [class*="col-"],
    .ou-guest .ou-payment-gateway {
        width: 100%;
        float: none;
    }

    .ou-guest .ou-payment-gateway + .ou-payment-gateway {
        margin-top: 12px;
    }

    .ou-guest .ou-invoice-actions {
        justify-content: stretch;
    }

    .ou-guest .ou-invoice-actions > * {
        flex: 1 1 130px;
        margin-inline: 0;
    }
}

@media (max-width: 575px) {
    .ou-public .hero-nav,
    .ou-auth .hero-nav {
        margin-inline: 8px;
        padding: 8px 10px;
        border-radius: 14px;
    }

    .ou-public .am-hero-ctas > *,
    .ou-auth .pricing-trial-btn {
        width: 100%;
    }

    .ou-admin .ou-app-header > div {
        padding-inline: 10px;
    }

    .ou-admin .ou-app-header > div > div {
        gap: 8px !important;
    }

    .ou-admin .ou-app-header details > ul,
    .ou-admin .ou-app-header .dropdown-menu {
        position: fixed !important;
        inset-inline: 8px !important;
        top: 62px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
    }

    .ou-auth .auth-shell,
    .ou-auth .auth-page-content {
        padding-inline: 10px;
    }

    .ou-auth .register-shell,
    .ou-auth .register-card {
        padding: 10px;
        border-radius: 14px;
    }

    .ou-auth .register-title {
        font-size: 23px;
    }
}

@media (max-width: 360px) {
    .ou-public .hero-nav__logo,
    .ou-auth .hero-nav__logo {
        max-width: 105px !important;
    }

    .ou-auth .auth-page-content,
    .ou-auth .auth-shell,
    .ou-admin section.content {
        padding-inline: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ou-omani-theme *,
    .ou-omani-theme *::before,
    .ou-omani-theme *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Printing must stay plain, compact and printer-safe. */
@media print {
    body.ou-omani-theme,
    .ou-admin .thetop,
    .ou-admin .ou-app-main,
    .ou-admin #scrollable-container,
    .ou-restaurant .content-wrapper,
    .ou-guest {
        color: #000 !important;
        background: #fff !important;
    }

    body.ou-omani-theme::before,
    .ou-omani-theme .am-hero::after,
    .ou-omani-theme .ou-sidebar-brand::after {
        content: none !important;
        display: none !important;
    }

    .ou-omani-theme :where(.box, .panel, .well, .invoice, #invoice_content, .print_section, #receipt_section) {
        border-color: #ccc !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .ou-omani-theme :where(#receipt_section, .print_section, #preview_box, [class*="label-border"], [class*="sticker-border"]) * {
        color: inherit;
        box-shadow: none !important;
    }

    .ou-omani-theme .table > thead > tr > th {
        color: #000 !important;
        background: #fff !important;
    }
}