/* ============================================================
   damba-shell.css
   ============================================================
   Framework-level shell styling for all Damba web apps.
   Served as an RCL static asset at:
     /_content/Damba.WebUi/static/css/damba-shell.css

   Layered AFTER the Kendo theme CSS (which we do NOT own) and
   BEFORE each theme's site.css (which owns theme-specific tweaks).

   This file owns:
     - Shell grid structure (appbar / body / footer)
     - Width variables consumed from inline <style> emitted by _Layout
     - Brand slot, menu slot, login slot
     - SideRail drawer (push, grid column)
     - HamburgerOverlay drawer (fixed, no push) + backdrop + scroll-lock
     - .full-bleed escape hatch for landing pages

   This file does NOT own:
     - Any .k-* selector (that's Kendo theme territory)
     - Any theme colors (those live in the theme's site.css)
     - Mobile media queries (emitted inline by _Layout from config)
   ============================================================ */

/* ── Base variable defaults ──
   _Layout emits a leading <style>:root{...}</style> that overrides these
   with config-driven values. Keeping fallbacks here means damba-shell.css
   renders sanely even if the inline block is missing. */
:root {
    --appbar-w:         100vw;
    --content-w:        min(1140px, 100vw);
    --footer-w:         min(1140px, 100vw);
    --appbar-h:         48px;
    --drawer-collapsed: 50px;
    --drawer-expanded:  280px;
    --rail-w:           50px;
    --chrome-offset:    0px;
    --brand-logo-h:     32px;
}

/* ── Shell grid: appbar row / body row / footer row ── */
.app-shell {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

/* ── AppBar row ── */
.app-appbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--appbar-h);
}
.app-appbar-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    width: var(--appbar-w);
    margin: 0 auto;
    padding: 0 1rem;
    min-width: 0;
}

/* Brand slot — left of the menu slot. Flex-start, never grows. */
.app-brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}
.app-brand:hover { text-decoration: none; opacity: 0.9; }
.app-brand-logo  { max-height: var(--brand-logo-h); width: auto; display: block; }
.app-brand-text  { font-weight: 600; font-size: 1.05rem; }

/* Menu slot — grows to fill available space. Alignment modifiers for text menus. */
.app-menu-slot {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
}
.app-menu-slot.align-left    { justify-content: flex-start; }
.app-menu-slot.align-center  { justify-content: center; }
.app-menu-slot.align-right   { justify-content: flex-end; }

/* Login slot — right of menu slot, never grows. */
.app-login-slot {
    flex: 0 0 auto;
    padding-right: .5rem;
}

/* Hamburger button (shared between SideRail and HamburgerOverlay modes) */
.app-hamburger {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 0 .5rem;
    height: 100%;
}
.app-hamburger .bi { font-size: 1.6em; line-height: 1; }

/* ── Body row ──
   Default: single-column (TopMenu / None / HamburgerOverlay modes).
   .has-rail: two columns (rail + content) — SideRail mode only. */
.app-body {
    display: grid;
    min-width: 0;
    grid-template-columns: 1fr;
}
.app-shell.has-rail .app-body {
    grid-template-columns: var(--rail-w) 1fr;
    transition: grid-template-columns .25s ease-out;
}
.app-body > .center-pane { min-width: 0; }

.center-pane {
    width: var(--content-w);
    margin: 0 auto;
}

/* ── SideRail drawer (grid column) ── */
.app-rail {
    grid-column: 1;
    background: var(--kendo-color-surface-alt, #141d38);
    border-right: 1px solid var(--kendo-color-border, rgba(255, 255, 255, 0.08));
    overflow: hidden;
    position: sticky;
    top: var(--appbar-h);
    height: calc(100vh - var(--appbar-h));
}
.app-rail-inner {
    width: var(--drawer-expanded);
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.app-rail .k-panelbar { background: transparent; border: none; }

/* Drawer menu item layout — specificity must beat Kendo's
   .k-panelbar > .k-panelbar-header > .k-link (0,3,0) and
   .k-panelbar .k-panelbar-group > .k-panelbar-item > .k-link (0,4,0) */
.app-rail .k-panelbar .k-panelbar-item .k-link {
    padding-inline: 0;
}
.app-rail .k-panelbar .k-panelbar-toggle {
    margin-inline-end: .75rem;
}
.drawer-item {
    display: inline-flex;
    align-items: center;
}
.drawer-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: var(--drawer-collapsed);
    flex-shrink: 0;
}
.drawer-text { white-space: nowrap; }

/* Rail brand header (optional, when BrandPosition == RailHeader) */
.app-rail .app-brand {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--kendo-color-border, rgba(255, 255, 255, 0.08));
    width: var(--drawer-expanded);
}

/* ── SideRail FloatOver variant (fixed, no grid column, no backdrop) ── */
.app-shell.has-rail-float .app-body {
    grid-template-columns: 1fr;
}
.has-rail-float .app-rail {
    position: fixed;
    top: var(--appbar-h);
    left: 0;
    bottom: 0;
    width: var(--drawer-collapsed);
    z-index: 999;
    overflow: hidden;
    transition: width .25s ease-out;
}
.has-rail-float .app-rail.expanded {
    width: var(--drawer-expanded);
}
/* Collapsed rail: remove sub-menu indentation so all icons align */
.app-rail:not(.expanded) .k-panelbar .k-panelbar-group > .k-panelbar-item .k-link {
    padding-inline-start: 0;
}

/* ── HamburgerOverlay drawer (fixed, transforms in/out, no grid push) ── */
.app-overlay-drawer {
    position: fixed;
    top: var(--appbar-h);
    left: 0;
    bottom: 0;
    width: var(--drawer-expanded);
    max-width: 100vw;
    background: var(--kendo-color-surface-alt, #141d38);
    border-right: 1px solid var(--kendo-color-border, rgba(255, 255, 255, 0.08));
    transform: translateX(-100%);
    transition: transform .25s ease-out;
    z-index: 999;
    overflow-y: auto;
    overflow-x: hidden;
}
.app-overlay-drawer.expanded { transform: translateX(0); }

.app-overlay-drawer .app-brand {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--kendo-color-border, rgba(255, 255, 255, 0.08));
}

/* Overlay backdrop — only visible when body.drawer-overlay-open is set */
.app-overlay-backdrop {
    display: none;
    position: fixed;
    inset: var(--appbar-h) 0 0 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
}
body.drawer-overlay-open { overflow: hidden; }
body.drawer-overlay-open .app-overlay-backdrop { display: block; }

/* Rail backdrop — used on mobile when SideRail falls back to overlay via emitted media query */
.app-rail-backdrop { display: none; }

/* ── Footer row ── */
.app-footer .footer-content {
    width: var(--footer-w);
    margin: 0 auto;
    padding: 0 1rem;
}

/* ── .full-bleed escape hatch ──
   Breaks out of .center-pane to span the viewport width (minus any chrome
   offset produced by an active rail). Usage:
     <section class="full-bleed">
         <div class="container">inner capped content</div>
     </section>
*/
.full-bleed {
    width: calc(100vw - var(--chrome-offset, 0px));
    margin-left:  calc(50% - 50vw + var(--chrome-offset, 0px) / 2);
    margin-right: calc(50% - 50vw - var(--chrome-offset, 0px) / 2);
}

/* ── admin-page-header actions slot ──
   The Kendo ToolBar component wraps our action buttons in a .k-toolbar
   container with its own background, border, and internal padding. Inside
   the page header that chrome visually misaligns the rightmost button from
   the grid's right edge (the toolbar's padding creates a scrollbar-width-
   sized gap). Strip it so the buttons sit directly on the page background,
   flush with the grid below. */
.admin-page-header-actions > .k-toolbar,
.admin-page-header-actions > .k-widget.k-toolbar {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

/* ── admin-panel-actions: description (left) + Add button (right) inside a PanelBar item ──
   Wraps the row that contains a description text plus an icon-only "+" toolbar
   above a sub-items list.

   Two non-obvious bits:

   1. Strips Kendo ToolBar chrome the same way .admin-page-header-actions does
      (background / border / internal padding) so the spacing is driven only by
      this wrapper's own margin-bottom rather than stacking three sources of
      vertical air (panel p-3 + toolbar chrome + Bootstrap mb-3).

   2. Forces `flex: 0 0 auto` and `width: auto` on the toolbar. Kendo's stock
      .k-toolbar ships with `width: 100%`, which would otherwise grab the entire
      row and force the description below — even though we placed it as the
      second flex child with `flex-wrap`. This override lets the toolbar size
      to its content (just the icon-only "+") so the description's flex-grow
      can fill the remaining row space, and on narrow viewports flex-wrap
      breaks the toolbar onto its own line under the description. */
.admin-panel-actions {
    margin-bottom: 0.5rem;
}
.admin-panel-actions > .k-toolbar,
.admin-panel-actions > .k-widget.k-toolbar {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    flex: 0 0 auto;
    width: auto;
}

/* ── .admin-list-row: server-rendered admin list item (whole row clickable) ──
   Replaces the ad-hoc `border-bottom py-2 d-flex align-items-center` block
   used across admin edit pages for child-entity lists (appointments, agenda
   items, sub-pages, …). Layout:

     [        anchor (icon + content + chevron)        ][  actions  ]

   `<a class="admin-list-row-link">` covers the click target; sibling
   `<div class="admin-list-row-actions">` holds Up/Down/Delete buttons that
   stay outside the anchor (no event.stopPropagation needed).

   Hover background hints clickability — the cursor:pointer alone wasn't
   pulling its weight on dense lists. */
.admin-list-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.1));
    padding-block: 0.5rem;
    transition: background-color 0.15s ease;
}
.admin-list-row:hover {
    background-color: var(--kendo-color-base-hover, rgba(0, 0, 0, 0.04));
}
.admin-list-row > .admin-list-row-link {
    display: block;
    text-decoration: none;
    color: inherit;
    flex-grow: 1;
    min-width: 0;
}
.admin-list-row > .admin-list-row-link:hover {
    color: inherit;
    text-decoration: none;
}
.admin-list-row > .admin-list-row-actions {
    display: flex;
    align-items: center;
    padding-inline-start: 0.5rem;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* ── .stage-grid: icon-only Kendo Grid command + toolbar buttons ──
   Add `.HtmlAttributes(new { @class = "stage-grid" })` to a Kendo Grid that
   uses Edit/Destroy/Update/Cancel commands and ToolBar.Create() declared
   with .Text(" "). The space character keeps the button non-empty (Kendo
   would otherwise render the default label) but takes no visible space;
   this rule then hides the text span entirely so only the auto-generated
   icon and the `title` tooltip remain.

   Reference implementation: EventTemplates/CreateEdit.cshtml — Rabat and
   Cancellation stage grids inside the PanelBar. */
.stage-grid .k-grid-add .k-button-text,
.stage-grid .k-grid-edit .k-button-text,
.stage-grid .k-grid-update .k-button-text,
.stage-grid .k-grid-cancel .k-button-text,
.stage-grid .k-grid-delete .k-button-text {
    display: none;
}
.stage-grid .k-grid-add,
.stage-grid .k-grid-edit,
.stage-grid .k-grid-update,
.stage-grid .k-grid-cancel,
.stage-grid .k-grid-delete {
    min-width: 0;
    padding-inline: 0.5rem;
}