/* ============================================================
   Bootstrap v3 Visual Compatibility Layer

   Purpose: Restores the Bootstrap v3 visual baseline (typography,
   spacing, colors) that the app shipped with prior to the CSS
   consolidation. Loaded LAST in the cascade (via setDynamicStyle
   in CommonUtility.ts) so it wins over Material Dashboard's V4
   reboot rules.

   Sourced from Bootstrap v3.3.7 _scaffolding.less, _type.less,
   _forms.less and _tables.less (the global reset/scaffolding
   sections only — not full V3).

   Lifecycle: This file is throw-away. When the app migrates to
   Bootstrap v5, evaluate whether v5 defaults meet your needs;
   if so, delete this file and remove the dynamic load from
   setDynamicStyle.
   ============================================================ */

/* --- Root font size (V3: 10px so 1rem = 10px; V4/UA default: 16px) ---
   This is the foundation of the V3 baseline. Many rem-based sizes
   in component CSS were authored assuming 1rem = 10px. */
html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* --- Body typography (V3: 14px / 1.42857143 / Helvetica Neue / #333) ---
   Unitless line-height inherits as a ratio so descendants compute
   their own line-height from their own font-size (V3 default behavior). */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

/* --- Paragraphs (V3: 0 0 10px; V4: 0 0 1rem) --- */
p {
    margin: 0 0 10px;
}

/* --- Lists (V3: margin-top 0, margin-bottom 10px) --- */
ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
}

dl {
    margin-top: 0;
    margin-bottom: 20px;
}

/* --- Anchor link colors (v3: #337ab7 normal / #23527c hover;
       v4: #007bff / #0056b3) --- */
a {
    color: #337ab7;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #23527c;
    text-decoration: underline;
}

/* --- Form element inheritance (V3 + normalize.css 3.0.3) ---
   V3's normalize sets `font: inherit; color: inherit` on form controls so
   they pick up body / parent typography, weight, and color. Without this,
   the button UA stylesheet's own font properties beat inheritance:
   - color: <input> inside <table style="color: #3e454c"> shows UA black
   - font-weight: <button> inside .selectedRow{font-weight:bold!important}
     stays at UA-default 400 instead of inheriting bold */
input,
button,
select,
textarea,
optgroup {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

/* --- Table cell padding reset (V3 normalize.css 3.0.3 line 38) ---
   `td, th { padding: 0 }` was part of V3's reset. Without it, cells fall
   back to the UA default `padding: 1px`. The .table class in V3 then
   re-applied 8px padding on top of this baseline. */
td,
th {
    padding: 0;
}

/* --- Headings: V3 inherits + line-height + weight (line 69 of V3 bundle) ---
   V3 set: font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit
   V4 changed line-height to 1.2 and font-weight to 500 (sometimes inherited).
   These differences show up as small line-height drift on heading elements. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

/* --- Heading sizes (V3 fixed-px; V4 used larger rem-based) --- */
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }

/* --- Heading margins: intentionally NOT set here ---
   On dev2 (non-homeowner), the V3 bundle declares h1-h6 margins 20/10,
   but material-bootstrap (loaded after) sets `margin-top: 0;
   margin-bottom: .5rem` on the V4 reset, which wins by source order. So
   dev2's actual heading margins are 0/5px (with rem=10px), NOT V3 20/10.
   Re-asserting V3 margins here would create drift from dev2. */

/* --- Caption (V3 line 322): table caption padding + color ---
   V4 caption: padding-top/bottom: .75rem (= 7.5px with rem=10px). V3: 8px. */
caption {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #777;
    text-align: left;
}

/* --- Form controls: intentionally NOT overridden here ---
   Several components @import node_modules/bootstrap/dist/css/bootstrap.min.css
   into their component CSS. Angular ViewEncapsulation scopes those rules to
   `.form-control[_ngcontent-xxx]`, which is what matches dev2's appearance for
   inputs (V4 sizing, .375rem .75rem padding, 1rem font-size resolving to 10px
   because of html { font-size: 10px } in this file).

   A global V3 .form-control reset here would override that component-scoped
   choice and create drift from dev2. If you discover a place where plain
   .form-control elements need V3 sizing for visual parity, prefer adding a
   targeted rule in the affected component's CSS rather than re-introducing
   a global override here. */

/* --- Buttons (V3: 6px 12px padding, 14px text) --- */
.btn {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
}

.btn-sm,
.btn-group-sm > .btn {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.btn-lg,
.btn-group-lg > .btn {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}

/* --- Form groups (V3 spacing) --- */
.form-group {
    margin-bottom: 15px;
}

/* --- Container widths (V3: fixed widths, not max-widths) --- */
@media (min-width: 768px) {
    .container { max-width: 750px; }
}
@media (min-width: 992px) {
    .container { max-width: 970px; }
}
@media (min-width: 1200px) {
    .container { max-width: 1170px; }
}

/* --- Alerts (V3: 15px padding, 4px radius) --- */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

/* --- Labels (V3 normalize: 700 weight, 5px margin-bottom) ---
   Note: line-height is intentionally NOT set here. V3 didn't set
   line-height on label either, relying on natural inheritance from
   the parent. If a parent has a fixed-px line-height (like
   h2.toDoTitle{line-height:28px}), the label inherits that 28px,
   matching dev2 behavior. Body line-height in this file is unitless
   (1.42857143), so labels under <body> inherit the ratio and compute
   their own line-height correctly from their own font-size. */
label {
    font-weight: 700;
    margin-bottom: 5px;
}

/* --- Generic input element-only sizing.
       Uses element selectors so any class-based font-size
       (e.g. .labelfieldsize) wins on specificity. --- */
input,
textarea,
select {
    font-size: 14px;
}