/**
 * Default theme. based on Arahant styles, for Kiss framework.
 *
 * Phase 2 visual modernization: this file is the single place that sets control
 * GEOMETRY and COLOR for input[type=button]/.btn-popup, text/password/date inputs,
 * select, checkbox/radio, textarea and the legacy .modal-* popup family -- see
 * "Control Design System (Phase 2)" in Frontend/AI/kb/components.md. The custom
 * property NAMES below are kept even where a screen outside this plan's scope is
 * their only remaining direct consumer (grep confirmed real consumers for
 * --btn-bg/--btn-bg-hover/--btn-bg-active/--btn-border-color-hover/-active/-focus/
 * --btn-bg-color-light/--input-border-color-focus before they were repointed here) --
 * only the VALUES change, flipped from the old gradients to flat --s360-* tokens, so
 * those screens' own local button/input look-alikes repaint for free without being
 * touched themselves.
 */
:root {
    --input-border-color-focus: var(--s360-accent);

    --btn-bg-color-dark: var(--s360-bg);
    --btn-bg-color-light: var(--s360-surface);
    --btn-border-color: var(--s360-border-strong);

    --btn-bg-color-hover-dark: var(--s360-bg);
    --btn-bg-color-hover-light: var(--s360-bg);
    --btn-border-color-hover: #9ca3af;

    --btn-bg-color-active-light: var(--s360-brand-soft);
    --btn-bg-color-active-dark: var(--s360-brand-soft);
    --btn-border-color-active: var(--s360-brand);

    --btn-border-color-focus: var(--s360-accent);

    /* Flat surfaces now (no gradient) -- kept as plain aliases of --s360-* tokens so
       the handful of screens that reference these directly (SmartChooser bg, a few
       custom "choose file" pseudo-buttons) repaint to match without being edited. */
    --btn-bg: var(--s360-surface);
    --btn-bg-hover: var(--s360-bg);
    --btn-bg-active: var(--s360-brand-soft);

    --input-border-color-light: var(--s360-border-strong);
    --input-border-color-dark: var(--s360-border-strong);
    --input-borer: var(--s360-border-strong);

    --modal-content-bg-color-dark: var(--s360-surface);
    --modal-content-bg-color-light: var(--s360-surface);
    --modal-content-shadow-color: rgba(0, 0, 0, .18);

    --modal-content-bg: var(--s360-surface);
    --modal-content-shadow: var(--s360-shadow-pop);

    --modal-title-color: var(--s360-text);
    --modal-title-bg-color-light: var(--s360-surface);
    --modal-title-bg-color-dark: var(--s360-surface);

    --modal-title-bg: var(--s360-surface);

    --input-disabled-bg-color: var(--s360-bg);

    /**
     * Font formatting.
     */
    font-family: var(--s360-font-stack);
    font-size: 11px;
    font-weight: lighter;
}

/*
 * ag-Grid sets its own --ag-font-family on the .ag-theme-balham element itself
 * (vendor/css/ag-theme-balham.css), which beats a :root-level override since a
 * rule matching the element directly always wins over an inherited value. This
 * rule must stay here, in default-theme.css, because index.html loads it AFTER
 * vendor/css/ag-theme-balham.css -- equal specificity, later in the cascade,
 * wins with no !important needed. Moving it to common.css (loaded before the
 * vendor theme) would make it silently ineffective again. The color/border
 * variables below ride the same rule for the same reason -- see "AG Grid Theme
 * Overrides Must Live in default-theme.css, Not common.css" in
 * Frontend/AI/kb/components.md.
 */
.ag-theme-balham {
    --ag-font-family: var(--s360-font-stack);
    --ag-header-background-color: var(--s360-bg);
    --ag-header-foreground-color: var(--s360-text-muted);
    --ag-border-color: var(--s360-border);
    --ag-row-border-color: var(--s360-border);
    --ag-header-column-separator-color: var(--s360-border);
    --ag-secondary-border-color: var(--s360-border);
    --ag-selected-row-background-color: var(--s360-brand-soft);
    --ag-row-hover-color: #f9fafb;
    --ag-odd-row-background-color: var(--ag-background-color);
    --ag-border-radius: var(--s360-radius-sm);
}

.ag-root-wrapper {
    border-radius: var(--s360-radius-sm);
    /* Rounds the grid's outer box to match the app's other flat/rounded surfaces.
       overflow: hidden is safe here because AG Grid scrolls internally (its own
       .ag-body-viewport/.ag-header manage their own overflow) -- verified live
       that sticky headers and both scrollbars still work with this set. */
    overflow: hidden;
}

/**
 * Start of component styling.
 */

input[type="text"], input[type="password"], input[type="date"] {
    height: 20px;
    margin: 1px;
    padding-left: 4px;
    padding-right: 4px;
    border: 1px solid var(--s360-border-strong);
    border-radius: 4px;

    background-color: #fff;
    box-shadow: none;
}

input[type="text"]:read-only, input[type="password"]:read-only, input[type="date"]:read-only {
    background-color: var(--s360-bg);
    color: var(--s360-text-muted);
}

input[type="text"]:disabled, input[type="password"]:disabled, input[type="date"]:disabled {
    background-color: var(--input-disabled-bg-color);
    color: var(--s360-text-muted);
}

/* Focus keeps the SAME box (margin/border-width never change -- only a color swap
   plus a soft outer ring drawn with box-shadow, which does not participate in
   layout) so focusing a field never shifts anything around it. */
input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus {
    border-color: var(--s360-accent);
    box-shadow: 0 0 0 3px rgba(0, 123, 193, .18);
    outline: none;
}

input[type="button"], select {
    padding: 5px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--s360-radius-sm);
    line-height: 1.3;
    cursor: default;
}

/* Same reasoning as .btn-smart-chooser in common.css: a native <input
   type=date> can't hold a child <svg><use>, so its icon is a standalone
   data-URI (the Lucide "calendar" glyph, muted gray baked in) rather than a
   sprite reference. Same 16x16 size/position (97% 50%, no-repeat) the PNG it
   replaces used. */
input[type="date"] {
    padding-right: 5px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v3'/%3E%3Cpath d='M16 2v3'/%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E") 97% 50% no-repeat;
    background-size: 16px 16px;
    padding-top: 0;
    padding-bottom: 0;
    -moz-padding-end: 5px;
    /* Review round -- Blake: "sometimes the cursor gets stuck as the 'clickable' cursor" over a
       date field. framework.html's shared input[type=button/radio/checkbox/color] pointer-cursor
       rule used to include input[type="date"] too, forcing a pointer over the ENTIRE field (the
       text/typing area included, not just the calendar icon). Removed from that shared rule;
       this field now gets the ordinary text-input cursor, and only the calendar icon itself
       (below) is a pointer. */
    cursor: text;
}

input[type="date"]::-webkit-inner-spin-button {
    display: none;
}

/* opacity/position unchanged from before this review round -- the native indicator stays
   invisible (the drawn calendar SVG in the `background` above is what's actually seen) and at
   its own native right-aligned position; only `cursor` is new here, since it's the one sub-area
   of the field that should still show a pointer. */
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
}

.time-input {
    width: 50px;
    text-align: right;
}

.btn-popup {
    min-width: 70px;
    height: 23px !important;
}

/* Flat, bordered, rounded button surface -- no gradient, no outset/inset border
   styles. Geometry (padding/border-width/font-size) that the box size depends on
   is set in framework.html's ".kiss input[type=button]" rule, which wins inside
   every screen (they all render inside ".kiss"); this rule is what actually shows
   through for buttons rendered outside ".kiss" (popups, the sidebar/login) and is
   the single source for color/border-style/radius in both cases. See "Control
   Design System (Phase 2)" in kb/components.md.

   Every rule in this family uses the LONGHAND `background-color`, never the
   `background` SHORTHAND, deliberately (Phase 5 review -- root cause of a real,
   shipped "repeating checkmark" defect on the Handled/View/Reply captioned-icon
   buttons, Blake: "'Handled' button on hover is showing repeating checkmarks").
   `background` as a shorthand resets EVERY background-* longhand to its initial
   value for any longhand it doesn't explicitly mention -- background-image: none,
   background-repeat: repeat, background-position: 0% 0%, background-size: auto --
   and the cascade compares each of those RESET longhands against every other
   rule's own declaration of that same longhand, at the resetting rule's own
   specificity, not the shorthand's "intent". styles/common.css's captioned-icon
   rules (".kiss input[type=button][value=\"Handled\"]" and friends) declare
   background-image/-repeat/-position/-size at specificity (0,3,1); the one rule
   below with an EQUAL (0,3,1) specificity is ":disabled:hover" (input, [type=
   button], :disabled, :hover -- four simple selectors), and since this file
   loads AFTER common.css in index.html, an equal-specificity tie is broken by
   source order in THIS file's favor -- so hovering a DISABLED captioned button
   used to silently win that tie for background-repeat/-position/-size (though
   not -image, which a higher-specificity ":disabled"-only value rule in
   common.css still supplied), leaving the real checkmark image but resetting it
   to "repeat" at its native 24x24 intrinsic size: a field of tiled checkmarks
   instead of one 14x14 icon. Using background-color here instead means these
   rules never declare -image/-repeat/-position/-size at all, so there is no
   longhand left to tie over, regardless of state or source order -- the fix
   generalizes to every current and future captioned-icon caption, and to the
   select caret (see the "select" rule below), without needing a single :hover/
   :disabled override in styles/common.css's own per-caption rules. See
   "Captioned-Icon Buttons: background Shorthand vs. background-color" in
   Frontend/AI/kb/components.md. */
input[type="button"], select, .btn-popup {
    background-color: var(--btn-bg);
    color: var(--s360-text);
    padding: 4px 12px;
    border: 1px solid var(--btn-border-color);
}

input[type="button"]:hover, select:hover, .btn-popup:hover {
    background-color: var(--btn-bg-hover);
    border-color: var(--btn-border-color-hover);
}

/* Active/focus never change padding or border WIDTH (that used to shift layout by
   1-2px every time a button was pressed/focused) -- only background/border color,
   plus a focus ring drawn with box-shadow so it never affects the box. */
input[type="button"]:active, select:active, .btn-popup:active {
    background-color: var(--btn-bg-active);
    border-color: var(--btn-border-color-active);
}

input[type="button"]:focus-visible, select:focus-visible, .btn-popup:focus-visible {
    border-color: var(--btn-border-color-focus);
    box-shadow: 0 0 0 2px var(--s360-accent);
    outline: none;
}

input[type="button"]:disabled {
    background-color: var(--s360-bg);
    color: var(--s360-text-muted);
    border-color: var(--s360-border);
}

input[type="button"]:disabled:hover {
    background-color: var(--s360-bg);
    border-color: var(--s360-border);
}

/* Phase 5 review -- Blake: "The caret in dropdown inputs is too close to the side,
   needs more padding or something and maybe a bit smaller or greyer." select's
   native (appearance: auto) arrow sits flush against whatever padding-right the
   box has; ".kiss select" (framework.html, the box-geometry owner inside every
   screen -- see its own doc comment) used to declare "padding: 0" on all four
   sides, so the native arrow rendered right up against the box's own border.
   appearance: none removes that native arrow entirely and this rule draws a
   Lucide chevron-down instead (same hand-drawn-data-URI approach every other
   select-adjacent/native-control icon in this file already uses -- see
   input[type="date"] above and ".btn-smart-chooser" in styles/common.css -- a
   bare <select> can't host a child <svg><use>, see "Icon Sprite" in
   kb/components.md), sized down to 10px and colored the muted-gray token
   (baked as a literal hex, same reason those other icons bake theirs) rather
   than the browser's own larger/darker native glyph. background-color/-image/
   -repeat/-position/-size are all declared here as LONGHANDS, never as part of
   a `background` shorthand -- see the button-family comment above this block
   for exactly why that matters (a shorthand here would be the same class of
   bug, just for the caret instead of a caption icon). <select> is the browser's
   own UA-stylesheet border-box by default (see "select Defaults to Border-Box"
   in kb/components.md), so the padding-right this rule needs (added to ".kiss
   select"'s own padding, and to the equivalent padding in the button/select
   rule above for selects rendered outside .kiss) eats into the text's
   available width rather than widening the control -- box size unchanged, per
   the frozen-box-size rule. Firefox needs its own -moz-appearance: none
   alongside the standard/WebKit properties; Firefox and Chromium were both
   checked live. */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Overrides just the right side of the shared "input[type=button], select,
       .btn-popup { padding: 4px 12px; }" rule above (same (0,0,1) specificity,
       later in file order wins this one longhand) -- for a select rendered
       OUTSIDE .kiss (popups/sidebar/login); ".kiss select" in framework.html is
       the equivalent, higher-specificity geometry owner for every select inside
       a screen and carries its own matching padding-right. */
    padding-right: 24px;
    background-color: var(--btn-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 10px;
}

select:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Phase 4: native rendering (appearance: auto), tinted with accent-color,
   instead of the hand-drawn appearance:none glyph Phase 2 shipped. width/
   height stay the exact same 14px box (border-box) the hand-drawn version
   used, so this is a paint-only change -- see "Native Checkbox/Radio
   Rendering (Phase 4)" in Frontend/AI/kb/components.md for the box-size and
   label-alignment verification. Disabled relies on the browser's own native
   disabled treatment (every evergreen browser already mutes/greys a native
   checkbox or radio when disabled -- no extra rule needed). */
input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: auto;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    accent-color: var(--s360-brand);
    display: inline-block;
    vertical-align: bottom;
    margin: 0 5px 0 0;
}

input[type="radio"] {
    appearance: auto;
    -webkit-appearance: auto;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    accent-color: var(--s360-brand);
    display: inline-block;
    vertical-align: bottom;
    margin: 0 5px 0 0;
}

input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    box-shadow: 0 0 0 2px var(--s360-accent);
    outline: none;
}

input[type="radio"]:disabled + label {
    color: var(--s360-text-muted);
}

textarea {
    line-height: 1.5;
    border: 1px solid var(--s360-border-strong);
    border-radius: 4px;
    background-color: #fff;
    box-shadow: none;
}

textarea:focus {
    border-color: var(--s360-accent);
    box-shadow: 0 0 0 3px rgba(0, 123, 193, .18);
    outline: none;
}

textarea:disabled, textarea:read-only {
    background-color: var(--s360-bg);
    color: var(--s360-text-muted);
}

/* Pre-existing, separate "select" rule from an earlier pass -- same (0,0,1)/
   (0,1,1) specificity as the newer chevron-owning "select"/"select:disabled"
   rules above, and declared LATER in this file, so for any LONGHAND both
   blocks set, THIS one wins regardless of the other's own value (equal-
   specificity ties break on source order). Phase 5 review found this the
   same way as the button-family bug this file's own comment above describes:
   "padding-right: 24px" explicitly repeated here (not just left to the
   earlier rule) so the caret's clearance survives this tie no matter which
   block ends up "authoritative" for the property; "background" below is the
   LONGHAND background-color, not the shorthand, for the identical shorthand-
   reset reason -- a shorthand here would have silently blanked the disabled
   chevron's own background-image the same way the pre-fix button rules
   blanked a captioned icon's background-repeat. */
select {
    /* Phase 6 review -- Blake: "Dropdown fields need some slight left
       padding in the selected option in the input box. right now it hugs
       the left margin" -- left bumped from 5px to 6px to match ".kiss
       select"'s own equivalent fix in framework.html; right stays 24px for
       the chevron's clearance. */
    padding: 3px 24px 3px 6px;
    margin: 1px;
    border: 1px solid var(--s360-border-strong);
}

select:focus-visible {
    border-color: var(--s360-accent);
    box-shadow: 0 0 0 3px rgba(0, 123, 193, .18);
    outline: none;
}

select:disabled {
    background-color: var(--s360-bg);
    color: var(--s360-text-muted);
}

select::selection {
    color: red;
    background: yellow;
}

/**
 * End of component styling.
 */

/**
 * Start of pop-up modal styling (legacy .modal-* -- see kiss/Utils.css for the
 * .kiss-popup-* and .kiss-msg-modal-* families, overridden in styles/common.css).
 */

.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(17, 24, 39, .45);
    -webkit-font-smoothing: subpixel-antialiased;
}

.modal-content {
    /* border-box: screens declare .modal-content's pixel width/height inline
       (the WHOLE box, unlike a kiss <popup> -- see the .modal-title comment
       below), so adding this border must not grow that declared footprint.
       border-box keeps it frozen by drawing the border 1px inside the declared
       edge instead of 1px outside it. */
    box-sizing: border-box;
    background: var(--modal-content-bg);
    min-width: 275px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    border: 1px solid var(--s360-border);
    border-radius: var(--s360-radius);
    box-shadow: var(--modal-content-shadow);
}

/* Same white surface as the body -- no colored title bar -- just larger, semi-bold
   text with a hairline rule underneath. Padding is only modestly taller than the
   old 6px (not the full kiss-popup-header treatment) because, unlike a kiss
   <popup>'s declared height (which sizes the BODY only -- see kb/popups.md), a
   legacy .modal-content's declared width/height is the WHOLE box, so growing the
   title here eats directly into the body's available space. Verified live against
   the two dialogs in this family with the least headroom (SearchCompany.html's
   410x465 popup, HrParent2's 750x420 "addWorker") that this padding still leaves
   every control and the button row clear of the bottom edge. */
.modal-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--s360-text);
    background: var(--modal-title-bg);
    padding: 8px 12px;
    border-bottom: 1px solid var(--s360-border);

    border-top-left-radius: var(--s360-radius);
    border-top-right-radius: var(--s360-radius);

    cursor: default;
}

.modal-body {
    padding: 10px;
}

.modal-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: 10px;
    padding-top: 10px;

    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

#popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

#popup-msg-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: flex-start;
    padding: 5px 15px;
}

#popup-btn-block {
    display: flex;
    flex-direction: row;
}

#popup-btn-block > .btn-popup {
    margin-left: 5px;
    margin-right: 5px;
}

#popup-msg {
    padding-left: 10px;
    line-height: 1.5;
}

div.vert-input {
    display:grid;
    grid-template-columns: max-content max-content;
    grid-column-gap:5px;
    grid-row-gap: 10px;
    margin-top: 10px;
    margin-left: 10px;
}
div.vert-input label {
    text-align:right;
    margin-top: 4px;
}
div.vert-input span {
    text-align:right;
    margin-top: 4px;
}
div.vert-input label:after { content: ":"; }

/**
 * End of pop-up modal styling.
 */