/* Native Beecare brand theme - loads AFTER dashlite/theme.css and overrides
   the stock DashLite indigo (#6576ff) with the nativebeecare.co.ke palette.
   Logo amber #cb8c2f | Brown #30180d | Rust #b83907 | Orange #ee8619 | Danger #db2d2e
   Token names (--emuki-*) are kept from upstream EmukiBeesHubPOS on purpose. */

:root {
    --emuki-gold: #cb8c2f;
    --emuki-gold-dark: #b67c25;
    --emuki-teal: #30180d;
    --emuki-teal-light: #b83907;
    --emuki-orange: #ee8619;
}

/* ---- Primary buttons & badges ---- */
.btn-primary,
.badge-primary {
    background-color: var(--emuki-gold);
    border-color: var(--emuki-gold);
    color: var(--emuki-teal);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--emuki-gold-dark);
    border-color: var(--emuki-gold-dark);
    color: var(--emuki-teal);
}
.btn-outline-primary {
    border-color: var(--emuki-teal);
    color: var(--emuki-teal);
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--emuki-teal);
    border-color: var(--emuki-teal);
    color: #fff;
}
.btn-info { background-color: var(--emuki-teal-light); border-color: var(--emuki-teal-light); }
.btn-info:hover, .btn-info:focus { background-color: var(--emuki-teal); border-color: var(--emuki-teal); }
.btn-warning { background-color: var(--emuki-orange); border-color: var(--emuki-orange); }

/* ---- Text / background utilities ---- */
.text-primary { color: var(--emuki-teal) !important; }
.bg-primary { background-color: var(--emuki-gold) !important; }
.bg-info { background-color: var(--emuki-teal-light) !important; }
.badge-info { background-color: var(--emuki-teal-light); border-color: var(--emuki-teal-light); }
.badge-warning { background-color: var(--emuki-orange); border-color: var(--emuki-orange); }

/* ---- Links ---- */
a { color: var(--emuki-teal-light); }
a:hover { color: var(--emuki-teal); }

/* ---- Sidebar: dark teal with gold accents ---- */
.nk-sidebar,
.nk-sidebar-brand,
.nk-sidebar .nk-sidebar-inner {
    background: var(--emuki-teal);
}
.nk-sidebar .nk-menu-link { color: rgba(255, 255, 255, 0.85); }
.nk-sidebar .nk-menu-icon { color: rgba(255, 255, 255, 0.7); }
.nk-sidebar .nk-menu-link:hover,
.nk-sidebar .nk-menu-item.active > .nk-menu-link,
.nk-sidebar .nk-menu-item.current-menu > .nk-menu-link {
    color: var(--emuki-gold);
    background: rgba(255, 255, 255, 0.06);
}
.nk-sidebar .nk-menu-link:hover .nk-menu-icon,
.nk-sidebar .nk-menu-item.active > .nk-menu-link .nk-menu-icon {
    color: var(--emuki-gold);
}
.nk-sidebar .nk-menu-heading .overline-title { color: rgba(255, 255, 255, 0.45); }

/* ---- Logo: let the lockup span the brand area on all screens ---- */
.nk-sidebar-head {
    height: auto;
    min-height: 65px;
    padding: 18px 16px;
}
.nk-sidebar-brand .logo-link,
.nk-header-brand .logo-link {
    display: block;
    width: 100%;
}
.nk-sidebar-brand .logo-img,
.nk-header-brand .logo-img {
    max-height: none;
    width: 100%;
    max-width: 240px;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 575px) {
    .nk-sidebar-brand .logo-img,
    .nk-header-brand .logo-img {
        max-width: 180px;
    }
}

/* ---- Top header accent ---- */
.nk-header { border-bottom: 3px solid var(--emuki-gold); }

/* ---- Active nav / tabs / pagination ---- */
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:focus,
.nav-tabs .nav-link.active:hover {
    color: var(--emuki-teal);
    border-bottom-color: var(--emuki-gold);
}
.page-item.active .page-link {
    background-color: var(--emuki-teal);
    border-color: var(--emuki-teal);
    color: #fff;
}

/* ---- Forms ---- */
.form-control:focus {
    border-color: var(--emuki-gold);
    box-shadow: 0 0 0 3px rgba(203, 140, 47, 0.25);
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--emuki-teal);
    border-color: var(--emuki-teal);
}

/* ---- POS screen ---- */
.pos-grid {
    max-height: calc(100vh - 260px);
    min-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}
.pos-product .card-inner { padding: 0.85rem; }
.pos-product-name {
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pos-price {
    font-weight: 700;
    color: var(--emuki-teal);
}
.pos-out { opacity: 0.55; }
.pos-add-row { margin-top: 0.5rem; }
.pos-cart-sticky { position: sticky; top: 84px; }
.pos-cart-lines { max-height: calc(100vh - 460px); overflow-y: auto; }
.pos-cart-total {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--emuki-teal);
}
@media (max-width: 991px) {
    .pos-cart-sticky { position: static; }
    .pos-grid { max-height: none; }
    .pos-cart-lines { max-height: none; }
}

/* ---- On-screen report tables ---- */
.emuki-report-table thead th {
    background-color: var(--emuki-teal);
    color: #fff;
    border-color: var(--emuki-teal);
    position: sticky;
    top: 0;
}
.emuki-report-table tbody tr:last-child td {
    background-color: rgba(203, 140, 47, 0.15);
    font-weight: 600;
    border-top: 2px solid var(--emuki-gold);
}
.emuki-report-table td, .emuki-report-table th {
    vertical-align: middle;
}

/* ---- Misc DashLite accents ---- */
.nk-block-title { color: var(--emuki-teal); }
.card-tools .link, .link-primary { color: var(--emuki-teal-light); }
.spinner-border.text-primary { color: var(--emuki-gold) !important; }


/* ============================================================
   Modern / Responsive / Performance layer (v1.1)
   Additive only — sits on top of DashLite, never overrides core
   structure. Goals: fast first paint, comfortable on mobile,
   accessible focus, calm motion.
   ============================================================ */

/* Instant text paint: fall back to the system font stack until the
   web font is ready, so content is never blocked on font download. */
body,
.nk-body {
    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
}

/* Never let media force a horizontal scrollbar. */
img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

/* Smooth, cheap transitions on interactive chrome. */
.btn,
.card,
.nk-menu-link,
.badge {
    transition: background-color .15s ease, border-color .15s ease,
        box-shadow .15s ease, transform .15s ease;
}
.card {
    border-radius: .6rem;
}
.card:hover {
    box-shadow: 0 .5rem 1.25rem rgba(48, 24, 13, .08);
}

/* Accessible keyboard focus that matches the brand. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.nk-menu-link:focus-visible {
    outline: 3px solid var(--emuki-gold);
    outline-offset: 2px;
}

/* Wide content (tables, code) scrolls inside its own box; the page
   body must never scroll sideways. */
.table-responsive,
.nk-tb-list {
    -webkit-overflow-scrolling: touch;
}

/* ---- Touch & small-screen ergonomics ---- */
@media (max-width: 768px) {
    /* Comfortable 44px tap targets on phones. */
    .btn,
    .nk-menu-link,
    .form-control,
    .form-select {
        min-height: 44px;
    }
    .btn-lg {
        min-height: 52px;
        font-size: 1.05rem;
    }

    /* Any raw table becomes horizontally scrollable instead of
       overflowing the viewport. */
    .card-inner > table,
    .nk-block > table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Tighter page padding reclaims space on small screens. */
    .nk-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Sticky POS cart on tall screens keeps checkout in view. */
@media (min-width: 992px) {
    .pos-cart-sticky {
        position: sticky;
        top: 1rem;
    }
}

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Feature pages (Ask your POS, AI/Branding settings, Reorder, Anomalies).
   Scoped under .emuki-feature so the rest of the app is untouched. A clean,
   modern, calm surface in the spirit of ChatGPT / Claude: soft cards,
   comfortable spacing, baseline-aligned form rows, quiet table headers.
   ========================================================================== */
.emuki-feature .card {
    border: 1px solid #e7eaf0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .05);
}

.emuki-feature .card-inner {
    padding: 1.5rem 1.75rem;
}

.emuki-feature .page-title {
    font-weight: 700;
    letter-spacing: -.01em;
}

.emuki-feature .form-label {
    font-weight: 600;
    color: #364a63;
    margin-bottom: .4rem;
}

.emuki-feature .form-note {
    color: #8091a7;
    font-size: .78rem;
}

.emuki-feature .form-control {
    border-radius: 9px;
    border-color: #dbdfea;
    padding: .55rem .9rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.emuki-feature .form-control:focus {
    border-color: #5ce0aa;
    box-shadow: 0 0 0 3px rgba(92, 224, 170, .18);
}

/* Baseline-align every label + input + button in a row (fixes ragged forms). */
.emuki-feature .form-row {
    align-items: flex-end;
}

.emuki-feature .btn {
    border-radius: 9px;
    font-weight: 500;
}

.emuki-feature .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.emuki-feature .input-group-append .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Form action bar: one consistent home for buttons — separated from the
   fields by a rule, right-aligned, primary action last (rightmost). */
.emuki-feature .form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: .625rem;
    border-top: 1px solid #eef0f4;
    padding-top: 1.25rem;
    margin-top: 1.5rem;
}

.emuki-feature .form-actions .btn {
    min-width: 120px;
    justify-content: center;
    padding: .5rem 1.25rem;
}

@media (max-width: 575px) {
    .emuki-feature .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .emuki-feature .form-actions .btn {
        width: 100%;
    }
}

/* Highlighted on/off row (e.g. "Enable the assistant"). */
.emuki-feature .setting-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #f7f8fa;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    padding: .9rem 1.15rem;
    margin-top: .5rem;
}

.emuki-feature .setting-toggle .form-label {
    margin-bottom: .1rem;
    cursor: pointer;
}

/* Logo preview chip on the branding page. */
.emuki-feature .brand-logo-frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 80px;
    background: #fff;
    padding: 6px;
    border: 1px solid #dbdfea;
    border-radius: 10px;
}

.emuki-feature .brand-logo-frame img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Quiet, modern tables. */
.emuki-feature .table {
    font-size: .875rem;
}

.emuki-feature .table thead th {
    background: #f5f6fa;
    border-top: none;
    border-bottom: 1px solid #e7eaf0;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .03em;
    color: #8091a7;
    font-weight: 600;
}

.emuki-feature .table td,
.emuki-feature .table th {
    vertical-align: middle;
}

/* The "Ask your POS" answer reads like a chat reply. */
.emuki-feature .ask-answer {
    font-size: 1.02rem;
    line-height: 1.6;
    color: #1c2b46;
}

/* ============================================================
   "Ask your POS" chat interface (main_dashboard_ask).
   A Claude/ChatGPT-style conversation: scrolling thread of
   bubbles, assistant avatar, suggestion chips, pill composer.
   Scoped under .emuki-ask so nothing else is touched.
   ============================================================ */
/* The page never scrolls — only the message thread does. The shell fills the
   viewport exactly: 65px fixed header + 16px padding top and bottom. */
.emuki-ask-page .nk-content {
    padding-top: 16px;
    padding-bottom: 16px;
}

.emuki-ask .ask-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 97px);
    min-height: 480px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0;
}

/* Keep long bubbles readable on very wide screens without shrinking the shell */
.emuki-ask .ask-msg .ask-bubble {
    max-width: 100%;
}

/* ---- Header ---- */
.emuki-ask .ask-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #e7eaf0;
    background: #fff;
}

.emuki-ask .ask-header-id {
    display: flex;
    align-items: center;
    gap: 12px;
}

.emuki-ask .ask-status {
    font-size: .72rem;
    color: #8091a7;
    letter-spacing: .02em;
}

/* ---- Assistant avatar ---- */
.emuki-ask .ask-avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--emuki-gold), var(--emuki-orange));
    color: var(--emuki-teal);
    font-size: 17px;
}

/* ---- Thread ---- */
.emuki-ask .ask-thread {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 24px 20px;
    background: #f7f8fa;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.emuki-ask .ask-msg {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 85%;
}

.emuki-ask .ask-msg-user {
    align-self: flex-end;
    justify-content: flex-end;
}

.emuki-ask .ask-msg-ai {
    align-self: flex-start;
}

.emuki-ask .ask-bubble {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: .94rem;
    line-height: 1.55;
    word-break: break-word;
}

.emuki-ask .ask-msg-user .ask-bubble {
    background: var(--emuki-teal);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.emuki-ask .ask-msg-ai .ask-bubble {
    background: #fff;
    color: #1c2b46;
    border: 1px solid #e7eaf0;
    border-bottom-left-radius: 4px;
    min-width: 0;
}

.emuki-ask .ask-summary {
    margin-bottom: 8px;
}

.emuki-ask .ask-summary:last-child {
    margin-bottom: 0;
}

.emuki-ask .ask-error {
    color: #b95000;
}

.emuki-ask .ask-table {
    margin-top: 4px;
    border: 1px solid #eef0f4;
    border-radius: 10px;
}

.emuki-ask .ask-table .table {
    margin-bottom: 0;
}

/* ---- Empty-state hero ---- */
.emuki-ask .ask-hero {
    margin: auto;
    text-align: center;
    max-width: 520px;
    padding: 24px 12px;
}

.emuki-ask .ask-hero-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--emuki-gold), var(--emuki-orange));
    color: var(--emuki-teal);
    font-size: 26px;
}

.emuki-ask .ask-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.emuki-ask .ask-chip {
    border: 1px solid #dbe0ea;
    background: #fff;
    color: #3c4d62;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: .82rem;
    cursor: pointer;
    transition: all .15s ease;
}

.emuki-ask .ask-chip:hover {
    border-color: var(--emuki-gold);
    background: #fef6ef;
    color: var(--emuki-teal);
}

/* ---- Composer ---- */
.emuki-ask .ask-composer {
    padding: 14px 20px 10px;
    border-top: 1px solid #e7eaf0;
    background: #fff;
}

.emuki-ask .ask-inputbar {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #dbe0ea;
    border-radius: 999px;
    padding: 6px 6px 6px 18px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.emuki-ask .ask-inputbar:focus-within {
    border-color: var(--emuki-gold);
    box-shadow: 0 0 0 3px rgba(203, 140, 47, .18);
}

.emuki-ask .ask-input {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    font-size: .95rem;
    color: #1c2b46;
    min-width: 0;
}

.emuki-ask .ask-send {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--emuki-gold);
    color: var(--emuki-teal);
    font-size: 17px;
    cursor: pointer;
    transition: background .15s ease;
}

.emuki-ask .ask-send:hover:not(:disabled) {
    background: var(--emuki-gold-dark);
}

.emuki-ask .ask-send:disabled {
    opacity: .5;
    cursor: default;
}

.emuki-ask .ask-disclaimer {
    text-align: center;
    font-size: .7rem;
    color: #a5b0c2;
    margin-top: 8px;
}

/* ---- Typing indicator ---- */
.emuki-ask .ask-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 16px 18px;
}

.emuki-ask .ask-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b6bfcd;
    animation: ask-bounce 1.2s infinite ease-in-out;
}

.emuki-ask .ask-typing span:nth-child(2) {
    animation-delay: .15s;
}

.emuki-ask .ask-typing span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes ask-bounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: .5;
    }

    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

@media (max-width: 575px) {
    .emuki-ask .ask-shell {
        border-radius: 0;
    }

    .emuki-ask .ask-msg {
        max-width: 95%;
    }
}