/* ============================================================
   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;
}

/* -- Canonical admin form-field label — single source of truth --
   The Kendo theme ships `.k-label { margin:0 }` (typographically inert), so bare
   `k-label` labels inherit the field's CONTENT font and read as body text. This one
   rule (Layer 3, all hosts, all themes — it's `--kendo-*` token-based so it tracks
   light/dark) gives every stacked form-field label a distinct look: sm / semibold /
   subtle. Scoped to `> label` children of a Bootstrap column or `.k-form-field` so
   Kendo's floating / checkbox / validation `.k-label` variants stay untouched.
   See docs/DCL_Editor_Label_Typography_Concept.md. */
.k-form-field > .k-label,
.k-form-field > label,
[class*="col-"] > label.k-label,
[class*="col-"] > label.form-label {
    display: block;
    margin-block-end: var(--kendo-spacing-1, 0.25rem);
    font-size: var(--kendo-font-size-sm, 0.875rem);
    font-weight: var(--kendo-font-weight-semibold, 600);
    color: var(--kendo-color-subtle, #6c757d);
}

/* -- Shared app widgets (host-neutral; moved out of per-theme site.css) --
   Generic overlay + cookie-banner + large-icon helpers used by Core features
   (cookie consent / first-visit gate). Colors are intentionally neutral so
   each theme's site.css / _custom.scss can restyle if needed. */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
}
.cookie-banner {
    position: relative;
    z-index: 1001;
}
.icon-large {
    font-size: 1.5em;
    color: inherit;
}

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

/* -- AppBar row --
   Two elements with separated concerns:
     .app-appbar-row — pure layout: sticky grid row spanning the full viewport,
                       carries no chrome. Owns the appbar height.
     .app-appbar     — the visible AppBar. Carries `k-appbar k-appbar-primary`
                       so Telerik's theme paints it natively (single source of
                       truth — no overrides). Sized by --appbar-w, so:
                         AppBar.Mode = Full        → spans the viewport
                         AppBar.Mode = Fixed/Fluid → centered, theme paints only the centered box
                       This makes AppBarPlacement = CenteredOverContent work
                       without touching the theme paint at all. */
.app-appbar-row {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--appbar-h);
    /* In centered mode this row is wider than its visible chrome (.app-appbar)
       and sits at z-index 1000 — without this, the transparent left/right
       gutters would silently swallow clicks meant for the rail's top menu
       items. pointer-events: none lets clicks fall through to whatever is
       behind (the rail in centered mode, nothing in FullWidth mode). */
    pointer-events: none;
}
.app-appbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    width: var(--appbar-w);
    margin: 0 auto;
    padding: 0 1rem;
    min-width: 0;
    /* Re-enable pointer events on the visible chrome so the brand link,
       hamburger, top menu, and login widgets stay interactive. */
    pointer-events: auto;
}

/* 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; }

/* -- Centered AppBar mode --
   Triggered by CoreOptions.Widths.AppBarPlacement = CenteredOverContent (desktop only;
   mobile always renders FullWidth via the layout's !isMobile guard). The AppBar
   itself centers automatically — its width is var(--appbar-w), so setting
   Widths.AppBar to match Widths.Content gives a centered Telerik chrome with no
   theme override needed. This block only relocates the SideRail drawer.

   SideRail: leaves the grid; RIGHT edge anchored at content's LEFT edge, width
   grows leftward into the otherwise-empty left margin when expanded. Content does
   NOT reflow (P4's JS keeps --chrome-offset at 0 so .full-bleed stays centered).

   Narrow desktop viewports (where (viewport - content) / 2 < drawer-expanded) cause
   the expanded drawer to overlay the content from content-left inward — z-index keeps
   it above .center-pane. Matches the documented P0 default. */
.app-shell.appbar-centered.has-rail .app-body {
    grid-template-columns: 1fr;
}
.app-shell.appbar-centered.has-rail .app-rail {
    position: fixed;
    top: 0;              /* aligns with AppBar top — drawer lives in the empty left
                            margin, never overlaps the centered AppBar horizontally. */
    bottom: auto;        /* don't stretch to viewport bottom… */
    height: auto;        /* …fit the menu's intrinsic height instead. */
    max-height: 100vh;   /* safety: if the menu grows beyond the viewport, cap it
                            so the inner's overflow-y: auto can scroll it. */
    right: calc(50vw + var(--content-w) / 2);
    left: auto;
    width: var(--drawer-collapsed);
    z-index: 999;
    transition: width .25s ease-out;
    grid-column: auto;
    border-right: none;
    border-left: 1px solid var(--kendo-color-border, rgba(255, 255, 255, 0.08));
}
.app-shell.appbar-centered.has-rail .app-rail.expanded {
    width: var(--drawer-expanded);
}

/* CenteredOverContent placement + Full-width AppBar: the AppBar chrome still spans
   the full viewport, so anchoring the drawer to the content's left edge no longer
   makes sense — the AppBar isn't constrained to the content column. Revert to
   regular left-side rail behavior: anchored to viewport left, grows rightward,
   sits below the AppBar (so its first row isn't hidden by the chrome). */
.app-shell.appbar-centered.appbar-fullwidth.has-rail .app-rail {
    top: var(--appbar-h);
    max-height: calc(100vh - var(--appbar-h));
    left: 0;
    right: auto;
    border-left: none;
    border-right: 1px solid var(--kendo-color-border, rgba(255, 255, 255, 0.08));
}

/* -- 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;
}

/* Subtitle-as-link in <admin-page-header> for IUrl entities. Auto-rendered by the TagHelper
   when for="@Model" is bound to a VM whose entity has a registered {name}ByUrl public route.
   The link wraps the subtitle text itself — clicking anywhere on the subtitle line opens the
   public detail page in a new tab. Visually subtle: inherits the muted subtitle color, hover
   reveals an underline as a clickability hint. */
.admin-page-header-subtitle-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease-in-out;
    cursor: pointer;
}
.admin-page-header-subtitle-link:hover,
.admin-page-header-subtitle-link:focus {
    color: var(--bs-link-hover-color, var(--kendo-color-primary, #0d6efd));
    text-decoration: underline;
}


/* ============================================================================
   Generalized upload gallery (_UploadGallery.cshtml + damba.webui.upload-gallery.js)
   The item list IS the drop target: a dashed dropzone that holds the file cards,
   shows a "drop here" hint, highlights on drag-over, and dims while uploading.
   ============================================================================ */
.damba-upload-gallery {
    position: relative;
}
.damba-upload-gallery .damba-upload-open {
    line-height: 1;
}
/* Smaller glyph for the per-card delete icon (the folder-open button keeps the standard
   Damba button icon size so it matches the page's other buttons). */
.damba-upload-gallery .damba-upload-del .bi {
    font-size: 0.8rem;
}
.damba-upload-dropzone {
    position: relative;
    border: 2px dashed var(--kendo-color-border, #d1d5db);
    border-radius: var(--kendo-border-radius-md, 6px);
    padding: 1rem;
    min-height: 8rem;
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.damba-upload-dropzone.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}
.damba-upload-dropzone.is-dragover {
    border-color: var(--kendo-color-primary, #0d6efd);
    background-color: color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 8%, transparent);
}
/* The "drop here" hint: shown centered when empty; a subtle top strip otherwise. */
.damba-upload-hint {
    color: var(--kendo-color-subtle, #6b7280);
    font-size: 0.85rem;
    pointer-events: none;
    text-align: center;
}
.damba-upload-dropzone:not(.is-empty) .damba-upload-hint {
    margin-bottom: 0.75rem;
    opacity: 0.7;
}
.damba-upload-dropzone.is-dragover .damba-upload-hint {
    color: var(--kendo-color-primary, #0d6efd);
    opacity: 1;
}
.damba-upload-gallery.is-busy {
    opacity: 0.6;
    pointer-events: none;
}
.damba-upload-item .k-card-image {
    width: 100%;
}

/* ============================================================
   Public map page (Areas/Core/Map) — host-neutral layout;
   colours track the active Kendo theme via --kendo-color-* tokens
   (RkcKb: burgundy surface / red primary).
   ============================================================ */
.rkc-map {
    height: 600px;
    width: 100%;
    border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.12));
    border-radius: var(--kendo-border-radius-md, 6px);
    overflow: hidden;
}
.rkc-map-filters {
    position: sticky;
    top: 1rem;
}
.rkc-map-filters .k-label {
    font-weight: 600;
}
/* Marker click-popup (rendered inside the Kendo tooltip) — a flat list of links, one per line. */
.rkc-map-pop {
    min-width: 180px;
    font-size: 0.9rem;
    line-height: 1.4;
}
.rkc-map-pop-item {
    margin: 0.12rem 0;
}
.rkc-map-pop a {
    color: var(--kendo-color-primary, #0d6efd);
    text-decoration: none;
}
.rkc-map-pop a:hover {
    text-decoration: underline;
}