/* ==========================================================================
   Dataman — theme.css
   Design tokens, base element styling, and Bootstrap variable overrides.

   Loaded AFTER bootstrap.min.css so these win. We override Bootstrap through
   its own CSS custom properties rather than recompiling Sass — there is no
   build step in this project, and --bs-* variables get us everything we need.

   Palette: light, clean, corporate. One restrained navy accent, a near-white
   canvas, hairline borders, and no gradients or heavy shadows anywhere.
   ========================================================================== */

:root {
    /* ---- Brand ---------------------------------------------------------- */
    --dm-navy:            #1d4e7c;
    --dm-navy-dark:       #163d61;
    --dm-navy-darker:     #102c46;
    --dm-navy-tint:       #eef3f8;   /* active nav background, table hover  */
    --dm-navy-tint-hard:  #dce7f1;   /* borders on tinted surfaces          */

    /* ---- Surfaces ------------------------------------------------------- */
    --dm-canvas:          #f4f6f8;   /* the page behind everything          */
    --dm-surface:         #ffffff;   /* cards, tables, bars                 */
    --dm-surface-muted:   #fafbfc;   /* table headers, subtle panels        */

    /* ---- Ink ------------------------------------------------------------ */
    --dm-ink:             #1f2933;   /* body text, headings                 */
    --dm-ink-soft:        #52606d;   /* secondary text                      */
    --dm-ink-muted:       #7b8794;   /* labels, timestamps, placeholders    */

    /* ---- Lines ---------------------------------------------------------- */
    --dm-border:          #e2e6ea;   /* the standard hairline               */
    --dm-border-strong:   #cbd2d9;   /* inputs, emphasised dividers         */

    /* ---- Status --------------------------------------------------------- */
    --dm-success:         #1b7f5a;
    --dm-success-tint:    #e8f5ef;
    --dm-warning:         #9a6700;
    --dm-warning-tint:    #fdf6e3;
    --dm-danger:          #b42318;
    --dm-danger-tint:     #fdeceb;
    --dm-info:            #1d4e7c;
    --dm-info-tint:       #eef3f8;

    /* ---- Shell metrics --------------------------------------------------
       The 50px top bar is a fixed requirement, not a suggestion. Both the
       sidebar and the content area position themselves against these, so
       change them here and nothing else needs touching.                    */
    --dm-topbar-height:   50px;
    --dm-sidebar-width:   232px;

    /* ---- Type ----------------------------------------------------------- */
    --dm-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
    --dm-font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
               "Liberation Mono", monospace;

    --dm-text-xs:   0.75rem;    /* 12px — table meta, timestamps            */
    --dm-text-sm:   0.8125rem;  /* 13px — labels, sidebar, dense tables     */
    --dm-text-base: 0.875rem;   /* 14px — body. Corporate density.          */
    --dm-text-md:   1rem;       /* 16px — card titles                       */
    --dm-text-lg:   1.125rem;   /* 18px — page titles                       */
    --dm-text-xl:   1.375rem;   /* 22px — the odd hero number               */

    /* ---- Spacing / shape ------------------------------------------------ */
    --dm-radius:      4px;
    --dm-radius-lg:   6px;
    --dm-shadow:      0 1px 2px rgba(31, 41, 51, 0.06);
    --dm-shadow-pop:  0 4px 14px rgba(31, 41, 51, 0.12);

    /* ---- Bootstrap overrides -------------------------------------------
       Bootstrap reads these at runtime, so pointing them at our tokens
       re-skins its components without a Sass rebuild.                      */
    --bs-primary:       #1d4e7c;
    --bs-primary-rgb:   29, 78, 124;
    --bs-body-color:    #1f2933;
    --bs-body-bg:       #f4f6f8;
    --bs-border-color:  #e2e6ea;
    --bs-border-radius: 4px;
    --bs-font-sans-serif: var(--dm-font);
    --bs-body-font-size: 0.875rem;
    --bs-link-color:       #1d4e7c;
    --bs-link-hover-color: #163d61;
    --bs-focus-ring-color: rgba(29, 78, 124, 0.25);
}

/* ==========================================================================
   Base elements
   ========================================================================== */

html {
    /* Never let a long table shove the whole page sideways. */
    overflow-x: hidden;
}

body {
    margin: 0;
    background: var(--dm-canvas);
    color: var(--dm-ink);
    font-family: var(--dm-font);
    font-size: var(--dm-text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5rem;
    color: var(--dm-ink);
    font-weight: 600;
    line-height: 1.3;
}

h1 { font-size: var(--dm-text-lg); }
h2 { font-size: var(--dm-text-md); }
h3 { font-size: var(--dm-text-base); }

p { margin: 0 0 0.75rem; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--dm-navy);
    text-decoration: none;
}

a:hover {
    color: var(--dm-navy-dark);
    text-decoration: underline;
}

hr {
    height: 1px;
    margin: 1rem 0;
    border: 0;
    background: var(--dm-border);
    opacity: 1;
}

code, kbd, pre, samp {
    font-family: var(--dm-font-mono);
    font-size: 0.8125em;
}

/* Focus: visible for keyboard users, invisible for mouse users. Never remove
   it outright — a dozen people will live in this app all day. */
:focus-visible {
    outline: 2px solid var(--dm-navy);
    outline-offset: 2px;
}

/* ==========================================================================
   Small shared utilities
   Deliberately few. Bootstrap's utilities cover most of it; these are the
   handful that carry meaning specific to Dataman.
   ========================================================================== */

.dm-muted      { color: var(--dm-ink-muted); }
.dm-soft       { color: var(--dm-ink-soft); }
.dm-xs         { font-size: var(--dm-text-xs); }
.dm-sm         { font-size: var(--dm-text-sm); }
.dm-mono       { font-family: var(--dm-font-mono); }
.dm-nowrap     { white-space: nowrap; }

/* Metadata line: "Uploaded by Greg S · 18 Feb 2026" */
.dm-meta {
    color: var(--dm-ink-muted);
    font-size: var(--dm-text-xs);
}

.dm-meta a { color: var(--dm-ink-soft); }

/* Screen-reader-only text, for icon-only controls. */
.dm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}