/*
    Site-OWLShared.css
    Common styling shared by every JS-only-converted OWL DevExtreme page:
    color/spacing tokens, grid styling, primary-button treatment, error
    container, tab panel treatment, and theme-colored DevExtreme interaction
    states (checkboxes, TreeView, texteditors, submenu).

    Loaded site-wide via _Layout.cshtml (2026-08 -- promoted from a per-page
    opt-in link to the default baseline every page gets automatically; per
    Brian: "the rule is NOT an opt-out. All pages should, in general, load
    the common css rules. Each page can choose to override, but those are
    exceptions."). A page that needs to diverge overrides specific rules or
    tokens in its own <style> block, loaded after this file -- see
    TapeLoadRequest's --tlr-* tokens (now themselves wired to the --owl-*
    tokens below via var(--owl-x, fallback), not a from-scratch palette) for
    what a legitimate, documented exception looks like.

    Prefix convention: "owl-" for classes/rules meant to be shared as-is by
    every page. A page may still keep its own prefix (uq-, bav-, sr-, etc)
    for layout that is genuinely page-specific (e.g. a toolbar row's exact
    shape) -- those page-local rules should reference the --owl-* tokens
    below instead of redefining their own copies.

    PALETTE: originally a placeholder (2026-08, consolidated from
    UserQuery's --uq-* and BLAdHocView's --bav-* tokens, which already used
    identical amber/gold values -- not a deliberate brand choice). Per
    Brian's direction to move the palette "bluer/greener": tried "Option C
    -- Slate Blue-Gray" first, rejected as "too gray"; replaced (2026-08)
    with "Option A -- Steel Blue" instead. Only --owl-accent,
    --owl-accent-light, --owl-accent-dim, --owl-dark, and --owl-hover
    changed; surfaces/borders/text tokens are unchanged.

    History: originally copy-pasted per-page from Claude/styles-guide.css
    (OWL-1 through OWL-7) into each page's own <style> block. Consolidated
    here (2026-08) so future pages (starting with ServicerRemits) reference
    one file instead of re-copying it. See
    Claude/RAZOR_TO_JS_ONLY_CONVERSION_PLAYBOOK.md for the conversion
    pattern and Claude/styles-guide.css for the fuller design-system notes.
*/

/* =================================================================
   TOKENS
   ================================================================= */

:root {
    --owl-accent:        #2c6e9e;
    --owl-accent-light:  #5b93bd;
    --owl-accent-dim:    rgba(44, 110, 158, 0.12);
    --owl-dark:          #16324a;
    --owl-surface:       #ffffff;
    --owl-surface-2:     #f7f8fa;
    --owl-border:        #e3e6ea;
    --owl-border-dark:   #cfd4da;
    --owl-text:          #202632;
    --owl-text-muted:    #6b7280;
    --owl-hover:         #e6eef4;
    --owl-radius:        8px;
    --owl-shadow:        0 2px 12px rgba(0, 0, 0, 0.08);
    --owl-shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.12);
} /* end of :root OWL tokens */


/* =================================================================
   ERROR CONTAINER
   Hidden by default, shown/populated by each page's own JS.
   ================================================================= */

.owl-error-container {
    background-color: #fff0f0;
    border:           1.5px solid #a94442;
    border-radius:    6px;
    color:            #a94442;
    font-size:        13px;
    font-weight:      500;
    line-height:      1.6;
    margin-bottom:    12px;
    padding:          10px 14px;
} /* end of .owl-error-container */


/* =================================================================
   DEFAULT-VIEW STAR
   Plain <img>, toggled between two icons in JS. Only UserQuery uses this
   today; kept shared since it is harmless if unused elsewhere.
   ================================================================= */

.owl-default-star {
    cursor:      pointer;
    width:       22px;
    height:      22px;
    margin-top:  6px;
}


/* =================================================================
   PRIMARY BUTTON (Run Query / Save / etc)
   Default min-width is BLAdHocView's original value (110px) -- a page
   that wants a wider button (e.g. UserQuery's Run Query at 130px) should
   add its own small override rule keyed off its own extra class, not
   redefine this whole block.
   ================================================================= */

.owl-btn-primary.dx-button {
    background:     var(--owl-accent) !important;
    border:         1px solid var(--owl-accent) !important;
    border-radius:  var(--owl-radius);
    box-shadow:     var(--owl-shadow);
    min-width:      110px;
}

.owl-btn-primary.dx-button .dx-button-text {
    color:          #ffffff !important;
    font-weight:    600;
    letter-spacing: 0.02em;
}

.owl-btn-primary.dx-button:hover {
    background:     var(--owl-accent-light) !important;
    border-color:   var(--owl-accent-light) !important;
}

.owl-btn-primary.dx-button.dx-state-active {
    background:     var(--owl-dark) !important;
    border-color:   var(--owl-dark) !important;
} /* end of .owl-btn-primary */


/* =================================================================
   GRID STYLING (dxDataGrid overrides)
   Wrap a grid's host element in a ".owl-grid-section" div (DevExtreme
   decorates the SAME element .dxDataGrid() is called on, so always target
   ".dx-datagrid" as a descendant of the wrapper, never the wrapper itself).
   Base row padding here is BLAdHocView's original value (6px 10px) -- a
   page that needs a tighter grid (e.g. UserQuery, which also has a menu
   column) should override padding with its own selector after this file
   loads, not redefine the whole grid block.
   ================================================================= */

.owl-grid-section .dx-datagrid {
    border:      none !important;
    font-family: 'Segoe UI', sans-serif;
    font-size:   13px;
}

.owl-grid-section .dx-datagrid-headers .dx-datagrid-table .dx-header-row > td {
    background:     #f0f0f0 !important;
    color:          var(--owl-text) !important;
    font-weight:    700 !important;
    font-size:      11px !important;
    letter-spacing: 0.02em !important;
//    text-transform: uppercase !important;
    border-bottom:  2px solid var(--owl-border-dark) !important;
    padding:        4px 8px !important;
}

.owl-grid-section .dx-datagrid-rowsview .dx-row > td {
    padding:        6px 10px !important;
    border-bottom:  1px solid var(--owl-border) !important;
    vertical-align: middle !important;
}

.owl-grid-section .dx-datagrid-rowsview .dx-row:hover > td {
    background: var(--owl-hover) !important;
}

.owl-grid-section .dx-datagrid-filter-panel-text,
.owl-grid-section .dx-datagrid-filter-panel .dx-icon-filter {
    color: var(--owl-accent) !important;
}

.owl-grid-section .dx-datagrid-filter-panel-checkbox .dx-checkbox-checked .dx-checkbox-icon,
.owl-grid-section .dx-datagrid-filter-panel-checkbox .dx-checkbox-indeterminate .dx-checkbox-icon,
.owl-grid-section .dx-datagrid-filter-panel-checkbox.dx-checkbox-checked .dx-checkbox-icon,
.owl-grid-section .dx-datagrid-filter-panel-checkbox.dx-checkbox-indeterminate .dx-checkbox-icon {
    color: var(--owl-accent) !important;
}

.owl-grid-section .dx-datagrid-search-panel .dx-texteditor.dx-state-focused,
.owl-grid-section .dx-datagrid-filter-row .dx-texteditor.dx-state-focused,
.owl-grid-section .dx-datagrid-header-panel .dx-texteditor.dx-state-focused {
    border-color: var(--owl-accent) !important;
}

.owl-grid-section .dx-datagrid-filter-row *:focus,
.owl-grid-section .dx-datagrid-filter-row *:focus-visible,
.owl-grid-section .dx-datagrid-filter-row .dx-state-focused,
.owl-grid-section .dx-datagrid-filter-row .dx-focused,
.owl-grid-section .dx-datagrid-search-panel *:focus,
.owl-grid-section .dx-datagrid-search-panel *:focus-visible,
.owl-grid-section .dx-datagrid-search-panel .dx-state-focused,
.owl-grid-section .dx-datagrid-header-panel *:focus,
.owl-grid-section .dx-datagrid-header-panel *:focus-visible,
.owl-grid-section .dx-datagrid-header-panel .dx-state-focused {
    outline-color: var(--owl-accent) !important;
    border-color: var(--owl-accent) !important;
}

.owl-grid-section .dx-datagrid-focus-overlay {
    border-color: var(--owl-accent) !important;
}

.owl-grid-section .dx-menu .dx-icon-preferences {
    color: var(--owl-accent) !important;
}

.owl-grid-section .dx-menu .dx-menu-item-popout {
    color: var(--owl-accent) !important;
}

/* Grid / TreeList search box (not scoped to a wrapper -- the cause is a global
   Site.css rule): Site.css sets `.dx-texteditor-input { padding: 3px 8px !important }`
   which clobbers the searchbox's built-in 34px left gutter, so the magnifier
   ends up sitting under the typed value. Restore the gutter while the box is
   empty; once the user types, drop the now-redundant icon and reclaim the space. */
.dx-datagrid-search-panel .dx-texteditor-input,
.dx-treelist-search-panel .dx-texteditor-input,
.dx-datagrid-search-panel.dx-texteditor-empty .dx-placeholder,
.dx-treelist-search-panel.dx-texteditor-empty .dx-placeholder {
    padding-left: 30px !important;
}

.dx-datagrid-search-panel:not(.dx-texteditor-empty) .dx-icon-search,
.dx-treelist-search-panel:not(.dx-texteditor-empty) .dx-icon-search {
    display: none !important;
}

.dx-datagrid-search-panel:not(.dx-texteditor-empty) .dx-texteditor-input {
    padding-left: 8px !important;
}

/* Grid scrollbar -- pale OWL fill + rounded (un-scoped: every OWL grid, 2026-09). */
.dx-datagrid .dx-scrollable-scrollbar.dx-scrollbar-horizontal .dx-scrollable-scroll-content {
    background-color: #e5edf3;
    border-radius: 7px;
}
/* end of grid styling */


/* =================================================================
   THEME-COLORED INTERACTION STATES
   Applied unconditionally (not scoped to a wrapper) -- DevExtreme's default
   theme blue shows through checkboxes, focused editors, TreeView item
   press/focus, and dxMenu submenus unless explicitly overridden.
   ================================================================= */

.dx-checkbox-checked .dx-checkbox-icon,
.dx-checkbox-indeterminate .dx-checkbox-icon {
    color: var(--owl-accent) !important;
}

.dx-checkbox.dx-state-hover .dx-checkbox-icon {
    border-color: var(--owl-accent) !important;
}

.dx-checkbox-indeterminate .dx-checkbox-icon::before {
    background-color: var(--owl-accent) !important;
}

.dx-treeview .dx-checkbox-checked .dx-checkbox-icon {
    color: var(--owl-accent) !important;
}

.dx-treeview-item-with-checkbox.dx-state-focused > .dx-treeview-item .dx-checkbox .dx-checkbox-icon {
    border-color: var(--owl-accent) !important;
}

.dx-treeview-item-without-checkbox.dx-state-focused > .dx-treeview-item {
    background-color: var(--owl-accent) !important;
    color: #fff !important;
}

.dx-texteditor.dx-state-focused.dx-editor-filled,
.dx-texteditor.dx-state-focused.dx-editor-outlined,
.dx-texteditor.dx-state-focused.dx-editor-underlined {
    border-color: var(--owl-accent) !important;
}

.dx-submenu {
    box-shadow:    var(--owl-shadow-lg) !important;
    border-radius: var(--owl-radius) !important;
    overflow:      hidden;
}

.dx-submenu .dx-menu-item-text {
    color: var(--owl-accent) !important;
}

.dx-submenu .dx-menu-item:hover .dx-menu-item-text {
    /* was #8a5f16 (a hardcoded darker-gold shade, not tokenized) under the
       old amber palette; now var(--owl-dark) to stay consistent with the
       2026-08 palette swap (now Option A steel blue). */
    color: var(--owl-dark) !important;
} /* end of theme-colored interaction states */


/* =================================================================
   MANAGE + ACCOUNT / AUTH PAGES (prefix: mng-)
   Shared by:
     Views/Manage/{Index, ChangePassword, AddPhoneNumber,
                   VerifyPhoneNumber}.cshtml
     Views/Account/{ConfirmEmail, ForgotPassword,
                    ForgotPasswordConfirmation, ResetPassword,
                    ResetPasswordConfirmation, ResetUSERPassword,
                    ResetUSERPasswordConfirmation, SendCode, VerifyCode,
                    NotFound}.cshtml
   Ported from ECF's per-view <style> blocks (ECF/Views/Manage/*.cshtml
   and ECF/Views/Account/*.cshtml) -- in OWL these live here in the one
   shared stylesheet instead of being copy-pasted into each view. Accent
   is the OWL steel-blue (--owl-accent); surface/border/text/radius/
   shadow come from the --owl-* tokens above. The only Manage-local
   tokens are two semantic state colors with no --owl-* equivalent:
   green "ok" (status banner, "Enabled" 2FA badge) and red "error"
   (validation summary). NOT re-themed to the accent on purpose.
   ================================================================= */

:root {
    --mng-ok:      #009345;
    --mng-ok-dim:  rgba(0, 147, 69, 0.12);
    --mng-red:     #d32f2f;
    --mng-red-dim: rgba(211, 47, 47, 0.08);
} /* end of Manage-local tokens */

/* Flex wrapper -- vertically centers .mng-inner within the available viewport
   height (minus an allowance for the shared _Layout.cshtml header/footer chrome,
   which these pages don't touch). Also has the effect of pushing the shared
   footer down to the bottom of the screen on short-content pages instead of it
   floating right under the card. */
.mng-container {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      calc(100vh - 220px);
    padding:         20px;
    font-family:     'Segoe UI', sans-serif;
    color:           var(--owl-text);
}

.mng-inner {
    width:     100%;
    max-width: 480px;
    margin:    0 auto;
}

/* Wider variant -- Index's row list needs more room than the single-column forms. */
.mng-inner-wide {
    max-width: 640px;
}

.mng-logo {
    text-align:    center;
    margin-bottom: 24px;
}

.mng-page-header {
    text-align:    center;
    margin-bottom: 20px;
}

.mng-page-header .mng-header-eyebrow {
    display:        block;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--owl-accent);
    margin-bottom:  6px;
}

.mng-page-header h2 {
    margin:       0;
    padding-left: 0; /* override Site.css's site-wide "h1, h2, h3 { padding-left: 50px; }" */
    font-size:    24px;
    font-weight:  700;
    color:        var(--owl-text);
}

.mng-status {
    background-color: var(--mng-ok-dim);
    border:           1px solid rgba(0, 147, 69, 0.25);
    border-radius:    var(--owl-radius);
    color:            var(--mng-ok);
    font-size:        13px;
    font-weight:      600;
    padding:          10px 16px;
    margin-bottom:    20px;
    text-align:       center;
}

.mng-status:empty {
    display: none;
}

.mng-card {
    background:    var(--owl-surface);
    border:        1px solid var(--owl-border);
    border-radius: var(--owl-radius);
    box-shadow:    var(--owl-shadow);
    overflow:      hidden;
}

.mng-card-header {
    background:     var(--owl-accent-dim);
    border-bottom:  1px solid rgba(44, 110, 158, 0.25);
    padding:        14px 24px;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--owl-accent);
}

/* ---- Index: label / value / action rows ---- */

.mng-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    padding:         18px 24px;
    border-bottom:   1px solid var(--owl-border);
}

.mng-row:last-child {
    border-bottom: none;
}

.mng-row-label {
    font-size:     13px;
    font-weight:   700;
    color:         var(--owl-text);
    margin-bottom: 4px;
}

.mng-row-value {
    font-size: 13px;
    color:     var(--owl-text-muted);
}

.mng-row-actions {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-shrink: 0;
}

.mng-row-actions form {
    margin: 0;
}

.mng-link-btn {
    display:         inline-block;
    color:           var(--owl-accent);
    font-weight:     700;
    font-size:       12px;
    letter-spacing:  0.04em;
    text-transform:  uppercase;
    text-decoration: none;
    border:          2px solid var(--owl-accent);
    border-radius:   var(--owl-radius);
    padding:         6px 14px;
    background:      transparent;
    cursor:          pointer;
    transition:      opacity 0.2s;
}

.mng-link-btn:hover,
.mng-link-btn:focus {
    opacity:         0.75;
    color:           var(--owl-accent);
    text-decoration: none;
}

.mng-badge {
    display:        inline-block;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:        3px 10px;
    border-radius:  999px;
}

.mng-badge-on {
    background: var(--mng-ok-dim);
    color:      var(--mng-ok);
}

.mng-badge-off {
    background: #f0f0f0;
    color:      var(--owl-text-muted);
}

/* ---- Sub-page forms: ChangePassword / AddPhoneNumber / VerifyPhoneNumber ---- */

.mng-form-body {
    padding: 24px;
}

.mng-hint {
    font-size: 13px;
    color:     var(--owl-text-muted);
    margin:    0 0 20px;
}

.mng-error {
    color:         var(--mng-red);
    background:    var(--mng-red-dim);
    border:        1px solid rgba(211, 47, 47, 0.25);
    border-radius: var(--owl-radius);
    padding:       8px 14px;
    font-size:     12px;
    margin-bottom: 16px;
}

/* Html.ValidationSummary always renders its wrapping <div> (an empty list when
   there are no errors, so it is never truly :empty). MVC adds
   "validation-summary-valid" to that same div when ModelState has no errors and
   switches it to "validation-summary-errors" when it does -- hide on that. */
.mng-error.validation-summary-valid {
    display: none;
}

.mng-form-group {
    margin-bottom: 20px;
}

.mng-form-group:last-child {
    margin-bottom: 0;
}

.mng-label {
    display:        block;
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color:          var(--owl-text-muted);
    margin-bottom:  6px;
}

.mng-input {
    width:         100%;
    box-sizing:    border-box;
    padding:       10px 12px;
    font-size:     14px;
    font-family:   inherit;
    color:         var(--owl-text);
    background:    var(--owl-surface);
    border:        1px solid var(--owl-border);
    border-radius: var(--owl-radius);
    transition:    border-color 0.2s;
}

.mng-input:focus {
    outline:      none;
    border-color: var(--owl-accent);
}

.mng-form-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    padding:         16px 24px;
    border-top:      1px solid var(--owl-border);
    background:      #fafafa;
}

.mng-back-link {
    font-size:       12px;
    font-weight:     700;
    letter-spacing:  0.04em;
    text-transform:  uppercase;
    color:           var(--owl-text-muted);
    text-decoration: none;
}

.mng-back-link:hover {
    color:           var(--owl-accent);
    text-decoration: none;
}

.mng-submit-btn {
    background:     var(--owl-accent);
    color:          #fff;
    border:         none;
    border-radius:  var(--owl-radius);
    font-weight:    700;
    font-size:      13px;
    letter-spacing: 0.06em;
    padding:        10px 24px;
    cursor:         pointer;
    transition:     opacity 0.2s;
}

.mng-submit-btn:hover {
    opacity: 0.85;
}

/* ---- Account / auth message + action variants (confirmation / info /
        404 pages that have no form -- ConfirmEmail, the *Confirmation
        pages, NotFound) ---- */

.mng-prose {
    font-size:   14px;
    line-height: 1.6;
    color:       var(--owl-text);
    text-align:  center;
    margin:      4px 0;
}

.mng-bignum {
    font-size:      44px;
    font-weight:    800;
    letter-spacing: 0.02em;
    color:          var(--owl-accent);
    text-align:     center;
    margin:         0 0 8px;
}

/* An <a> styled as the solid primary button (matches .mng-submit-btn) --
   for "Back to sign in" / "Log In" / "Go to Home" links. */
.mng-btn {
    display:         inline-block;
    background:      var(--owl-accent);
    color:           #fff;
    border:          none;
    border-radius:   var(--owl-radius);
    font-weight:     700;
    font-size:       13px;
    letter-spacing:  0.06em;
    padding:         10px 24px;
    text-decoration: none;
    cursor:          pointer;
    transition:      opacity 0.2s;
}

.mng-btn:hover,
.mng-btn:focus {
    opacity:         0.85;
    color:           #fff;
    text-decoration: none;
}

/* Center a footer that holds a single action (message pages) instead of
   the form pages' back-link + submit space-between. */
.mng-form-footer-center {
    justify-content: center;
}

/* Right-align the contents of a .mng-form-group (e.g. a lone submit button). */
.mng-form-group-right {
    text-align: right;
} /* end of Manage + Account / auth pages */


/* =================================================================
   LOGIN SPLASH ANIMATION (prefix: login-)
   Just the entrance animation ported from ECF's Views/Account/Login.cshtml
   (@keyframes loginSplashIn + .login-splash) -- NOT ECF's fuller login
   redesign. Wrap the OWL login page's content in <div class="login-splash">.
   ================================================================= */

@keyframes loginSplashIn {
    from { opacity: 0; transform: translateY(25px); }
    to   { opacity: 1; transform: translateY(0); }
}

.login-splash {
    animation: loginSplashIn 0.7s ease-out;
}

/* Logo border-draw: an SVG line drawn once, left-to-right, along the full BOTTOM
   edge of the logo on load, then held. Ported/adapted from ECF's Login (which
   drew the whole <rect> outline; stroke recolored to the OWL blue). Wrap the
   logo <img> in <div class="login-logo-border"> holding an absolutely-positioned
   <svg><line ... class="login-logo-border-trace"></svg>. */
.login-logo-border {
    position:      relative;
    display:       inline-block;
    padding:       24px;
    border-radius: 16px;
}

@keyframes loginLogoBorderDraw {
    0%   { stroke-dashoffset: 1; opacity: 1; }
    65%  { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

.login-logo-border-trace {
    stroke-dasharray:  1;
    stroke-dashoffset: 1;
    animation:         loginLogoBorderDraw 1.2s ease-out 0.15s forwards;
}

/* "OWL Asset Management" wordmark: solid OWL blue, with a one-off glass/shine
   band that sweeps across the letters ONCE on load (background-clip:text + an
   animated gradient position). The last keyframe forces the text fill back to
   solid blue so nothing lingers after the sweep. color: fallback for any engine
   that lacks background-clip:text -- the text then just stays solid, no shine. */
.owl-wordmark {
    display:          inline-block;
    color:            #337ab7;
    font-size:        28px;
    font-weight:      700;
    letter-spacing:   0.02em;
    margin-top:       8px;
    background:       linear-gradient(105deg, #337ab7 0%, #337ab7 45%, #bcdcf5 50%, #337ab7 55%, #337ab7 100%);
    background-size:  300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip:  text;
    -webkit-text-fill-color: transparent;
    animation:        owlWordmarkShine 0.9s ease-out 0.5s 1 forwards;
}

@keyframes owlWordmarkShine {
    0%   { background-position: 100% 0; -webkit-text-fill-color: transparent; }
    99%  { background-position: 0% 0;   -webkit-text-fill-color: transparent; }
    100% { background-position: 0% 0;   -webkit-text-fill-color: #337ab7; }
} /* end of login splash */