/* SAIM Operations — the small amount of styling Tabler does not already provide. */

:root {
    --saim-brand: #206bc4;
    --saim-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --saim-muted: var(--tblr-secondary-color);
}

/* ------------------------------------------------------------- light theme ---
   Light is the default (config ui.default_theme) and Tabler already ships a full
   light palette, so the only job here is contrast. Tabler's secondary text is
   gray-500 at 75% opacity — roughly 2.6:1 on white, below WCAG AA. Full-strength
   gray-500 is 4.8:1 and clears AA, so the muted tone is redefined rather than the
   components being restyled.

   These are colour declarations only; nothing is direction-specific, so the RTL
   stylesheet behaves identically. */
[data-bs-theme="light"] {
    --tblr-secondary-color: #6b7280;
    --tblr-secondary-color-rgb: 107, 114, 128;
    --saim-muted: #6b7280;
}

[data-bs-theme="dark"] {
    --saim-muted: rgba(229, 231, 235, .78);
}

/* The sidebar and the mobile header are surfaces, not inverted panels: white with
   dark text, separated from the page by a border rather than by contrast. */
[data-bs-theme="light"] .navbar-vertical,
[data-bs-theme="light"] .page > .navbar {
    background-color: var(--tblr-bg-surface, #fff);
}

[data-bs-theme="light"] .card {
    background-color: var(--tblr-bg-surface, #fff);
}

/* Brand mark in the sidebar */
.saim-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    letter-spacing: -.01em;
}
.saim-brand__mark {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    background: linear-gradient(135deg, var(--saim-brand), #4299e1);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    flex: 0 0 auto;
}
.saim-brand__name { line-height: 1.1; }
.saim-brand__sub {
    display: block;
    font-size: .625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--saim-muted);
}

/* Progress bars: plain HTML/CSS, no charting library. */
.saim-meter {
    height: .5rem;
    border-radius: 1rem;
    background: var(--tblr-border-color);
    overflow: hidden;
}
.saim-meter__fill {
    height: 100%;
    border-radius: inherit;
    transition: width .4s ease;
}
.saim-meter--lg { height: .75rem; }

.saim-stat__value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
}
.saim-stat__label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--saim-muted);
}

/* Monospace detail, used for evidence strings and log excerpts */
.saim-mono { font-family: var(--saim-mono); font-size: .8125rem; }
.saim-log {
    font-family: var(--saim-mono);
    font-size: .75rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 22rem;
    overflow-y: auto;
}

/* "Not configured" is a first-class state, styled so it cannot be mistaken
   for a real measurement. */
.saim-unconfigured {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    color: var(--saim-muted);
    font-style: italic;
}

.saim-empty {
    padding: 2.5rem 1rem;
    text-align: center;
}
.saim-empty__icon { opacity: .4; margin-bottom: .75rem; }

/* Mobile-first approval cards: the whole card is comfortably tappable. */
.saim-approval { border-inline-start: 3px solid var(--tblr-border-color); }
.saim-approval--critical { border-inline-start-color: var(--tblr-danger); }
.saim-approval--high     { border-inline-start-color: var(--tblr-orange); }
.saim-approval--medium   { border-inline-start-color: var(--tblr-warning); }
.saim-approval--low      { border-inline-start-color: var(--tblr-secondary); }

@media (max-width: 575.98px) {
    .saim-approval__actions .btn { flex: 1 1 0; min-height: 2.75rem; }
    .saim-stat__value { font-size: 1.5rem; }
    .table-responsive table { font-size: .8125rem; }
}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .saim-meter__fill { transition: none; }
}

/* ------------------------------------------------------------- navigation ---
   The sidebar is the only navbar inside `.page`; see the note at the top of
   app/Views/layout/app.php for why a second one must never be added there.

   Tabler already positions and colours it. What is added here is (a) an active
   state strong enough to read at a glance — Tabler's own is an 8% primary tint,
   which is close to invisible on white — and (b) the user area at the foot of
   the sidebar. */

/* Never let the sidebar or its contents push the page sideways on a phone. */
.saim-sidebar,
.saim-sidebar .container-fluid {
    max-width: 100%;
}
.saim-sidebar .navbar-collapse { overscroll-behavior: contain; }

/* Active page. A filled tint plus a leading accent bar, so the current item is
   unambiguous whether or not the icon colour is noticed. */
.saim-sidebar .navbar-nav > .nav-item > .nav-link {
    position: relative;
    border-radius: .375rem;
}
.saim-sidebar .navbar-nav > .nav-item.active > .nav-link {
    background: color-mix(in srgb, var(--tblr-primary) 12%, transparent);
    color: var(--tblr-primary);
    font-weight: 600;
}
.saim-sidebar .navbar-nav > .nav-item.active > .nav-link .nav-link-icon { color: inherit; }
.saim-sidebar .navbar-nav > .nav-item.active > .nav-link::before {
    content: "";
    position: absolute;
    inset-block: .35rem;
    inset-inline-start: -.5rem;
    width: 3px;
    border-radius: 3px;
    background: var(--tblr-primary);
}
.saim-sidebar .navbar-nav > .nav-item:not(.active) > .nav-link:hover {
    background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, .035));
}

/* ----------------------------------------------------------- user area ------
   Sits at the foot of the sidebar on desktop (the nav list above it grows), and
   simply follows the menu when the collapse is open on a phone. */

.saim-sidebar__user {
    border-top: 1px solid var(--tblr-border-color);
    padding-block: .5rem;
    margin-inline: .5rem;
}
.saim-sidebar__user-nav { flex-grow: 0 !important; }
.saim-sidebar__user-nav .nav-link {
    padding: .4rem .75rem;
    border-radius: .375rem;
    font-size: .875rem;
}
.saim-sidebar__user-nav .nav-link:hover {
    background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, .035));
}

.saim-sidebar__identity {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem .25rem;
    min-width: 0;
}
.saim-sidebar__identity-text { min-width: 0; }
.saim-brand__mark--sm {
    width: 1.75rem;
    height: 1.75rem;
    font-size: .6875rem;
    border-radius: .375rem;
}

.saim-sidebar__appearance { padding: .25rem .75rem 0; }

/* The change-password card is linked to directly from the sidebar; without this
   the heading lands flush against the top of the viewport. */
#change-password { scroll-margin-top: 1.5rem; }

@media (max-width: 767.98px) {
    /* Below the expand breakpoint the sidebar is a plain bar; keeping it stuck to the
       top means the menu is one tap away however far the page has been scrolled. */
    .saim-sidebar {
        position: sticky;
        top: 0;
        z-index: 1030;
    }
    /* Brand stays legible next to the hamburger on a 320px screen. */
    .saim-sidebar .navbar-brand { padding-inline: .25rem; }
    .saim-brand__mark { width: 1.75rem; height: 1.75rem; font-size: .6875rem; }
    .saim-sidebar .navbar-collapse { max-height: 75vh; overflow-y: auto; }
    .saim-sidebar__user { margin-inline: 0; }
}

/* ------------------------------------------------------------ objectives --- */

/* The owner's entry point. A tinted panel rather than a coloured button row, so
   it reads as the primary action without competing with the status badges. */
.saim-cta {
    background: var(--tblr-primary-lt, rgba(32, 107, 196, .08));
    border-color: rgba(32, 107, 196, .25);
}

/* Filter chips scroll sideways on a phone instead of wrapping into four rows and
   pushing the list itself below the fold. */
.saim-filter-row {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.saim-filter-row > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Objective text and task results are written as prose with line breaks that
   carry meaning; they must survive rendering without becoming a <pre> block. */
.saim-prewrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    /* A long objective title must not force the page header wider than the screen. */
    .page-title { overflow-wrap: anywhere; }
}

/* Lifecycle strip on the objective page. Scrolls sideways on a phone rather than
   wrapping into a ragged block that hides where the objective actually is. */
.saim-phase-row {
    display: flex;
    gap: .375rem;
    overflow-x: auto;
    padding-bottom: .125rem;
    -webkit-overflow-scrolling: touch;
}
.saim-phase {
    flex: 0 0 auto;
    letter-spacing: .04em;
    font-size: .6875rem;
}
.saim-action-badge {
    font-size: .625rem;
    letter-spacing: .04em;
}

/* --------------------------------------------------------------- workspace ---
   Project workspace. Mobile first: the chat log is the scrolling element and the
   composer stays reachable, rather than the whole page scrolling and pushing the
   input off the bottom of a phone. */

.saim-workspace-tabs {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.saim-workspace-tabs::-webkit-scrollbar { display: none; }

/* The strip scrolls sideways on a phone and the scrollbar is hidden, so there
   was nothing on screen to say more tabs existed past the right edge. A fade
   on that edge is the affordance. It is inline-end, not right, so it stays on
   the correct side in RTL. */
.saim-workspace-tabs-scroller {
    position: relative;
}

.saim-workspace-tabs-scroller::after {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 2rem;
    pointer-events: none;
    background: linear-gradient(to left, var(--tblr-body-bg), transparent);
}

[dir="rtl"] .saim-workspace-tabs-scroller::after {
    background: linear-gradient(to right, var(--tblr-body-bg), transparent);
}

@media (min-width: 62em) {
    .saim-workspace-tabs-scroller::after { display: none; }
}

.saim-chat {
    display: flex;
    flex-direction: column;
    /* Fill what is left below the header rather than guessing a pixel height. */
    height: calc(100vh - 19rem);
    min-height: 22rem;
}

.saim-chat-log {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.saim-chat-composer {
    position: sticky;
    bottom: 0;
    background: var(--tblr-card-bg, #fff);
}

.saim-chat-input {
    resize: none;
    max-height: 200px;
    overflow-y: auto;
}

.saim-msg { margin-bottom: 1.25rem; max-width: 52rem; }
.saim-msg-owner { margin-inline-start: auto; }

.saim-msg-meta {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    font-size: .75rem;
    color: var(--tblr-secondary, #6c757d);
    margin-bottom: .25rem;
}
.saim-msg-owner .saim-msg-meta { justify-content: flex-end; }
.saim-msg-who { font-weight: 600; }

.saim-msg-body {
    padding: .625rem .875rem;
    border-radius: .5rem;
    background: var(--tblr-bg-surface-secondary, #f6f8fb);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.55;
}
.saim-msg-owner .saim-msg-body {
    background: var(--tblr-primary-lt, #e9f0fb);
}

.saim-msg-card {
    margin-top: .5rem;
    padding: .5rem .75rem;
    border-inline-start: 3px solid var(--tblr-primary, #206bc4);
    background: var(--tblr-bg-surface, #fff);
    font-size: .8125rem;
}
.saim-msg-card-label {
    display: inline-block;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .6875rem;
    letter-spacing: .03em;
    margin-inline-end: .375rem;
    color: var(--tblr-secondary, #6c757d);
}

/* Three dots that do not animate for anyone who asked not to see motion. */
.saim-thinking span { opacity: .3; animation: saim-blink 1.4s infinite; }
.saim-thinking span:nth-child(2) { animation-delay: .2s; }
.saim-thinking span:nth-child(3) { animation-delay: .4s; }
@keyframes saim-blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .saim-thinking span { animation: none; opacity: .6; }
}

.saim-approval-reason {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 16rem;
    overflow-y: auto;
    background: transparent;
    border: 0;
    padding: 0;
}

@media (max-width: 575.98px) {
    .saim-chat { height: calc(100vh - 16rem); }
    .saim-msg { max-width: 100%; }
}