/* ===========================================
   Base - Shared Design System
   ===========================================

   A stylesheet's FILENAME is not a class name, and the distinction is deliberate:
   a class name stays inside the markup, but a FILENAME is fetched by URL
   from every operator's rendered HTML, so every visitor to every install sees it.
   It names the file's role in the design system and its house prefix,
   never an owner. */

/* --- The ADMIN accent token ---

   ⛔ THIS IS NOT --omm-brand-color, AND THE TWO MUST NEVER BE MERGED.

     --omm-admin-accent   PLATFORM tier. The installation's own chrome: admin, Studio, profile,
                          hub, sign-in. Set from BRAND_ACCENT_COLOR by each base template.
                          Declared HERE, which only the admin design system loads.
     --omm-brand-color    PER-SITE tier. The public reader. Set from SiteBranding.hex_color by
                          content/base.gohtml, consumed by 73 var() sites across the omm_* family,
                          and guarded by branding_render_test.go.

   Two names because three templates load BOTH stylesheet families (hub_home,
   content/auth_combo, and the shared omm-utilities). One token would mean the platform value and
   the site value fighting over the same property, with whichever loaded last winning — silently
   overwriting every tenant's configured colour. Measured, that is not hypothetical: those three
   templates really do load both.

   The literal below is the fallback and the shipped default, a neutral #193857 behind the
   BRAND_ACCENT_COLOR setting. content/base.gohtml gives --omm-brand-color the same default,
   because omm-utilities.css's fallbacks to THIS token render on reader pages too. Same value,
   two declarations: neither token is fed from the other. */
:root {
  --omm-admin-accent: #193857;
}

/* --- Font ---
   The @font-face pair and the --omm-font-stack token live in static/css/fonts.css, which every
   template loading this file also loads. They are NOT here because two templates
   (content/base.gohtml, admin_auth_forbidden.gohtml) need the font and deliberately do not load
   this design system — see the header of fonts.css for the measurement. */

.ommBody {
  font-family: var(--omm-font-stack);
}

/* --- Colors --- */
.bg-1c1c1c { background-color: #1c1c1c !important; }

/* --- Borders --- */
.border-bottom-2-000 { border-bottom: 2px solid #000000 !important; }
.border-bottom-2-ccc { border-bottom: 2px solid #cccccc !important; }

/* --- Typography --- */
.ommFS14 {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
  text-align: center;
  box-sizing: border-box;
  font-family: var(--omm-font-stack);
  font-weight: 500;
  line-height: 1.1;
  color: white;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
}

/* --- Form Styling --- */
input::placeholder, textarea::placeholder { color: lightgrey !important; }
input[type="text"]:focus, textarea:focus, select:focus { box-shadow: 0 0 0 rgb(255, 255, 255) !important; }

/* --- Navbar --- */
.navbar-omm-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='1' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
.navbar-toggler:focus { border: 0 !important; box-shadow: none !important; }
.navbar-toggler { border: 0 !important; }

/* --- Bootstrap Overrides --- */
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
  background-color: var(--omm-admin-accent, #193857) !important;
  border-color: var(--omm-admin-accent, #193857) !important;
  color: white !important;
  min-width: 150px !important;
}
.badge:not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-info):not(.bg-secondary):not(.bg-primary) {
  background-color: var(--omm-admin-accent, #193857) !important;
  border-color: var(--omm-admin-accent, #193857) !important;
}
@media (min-width: 768px) {
  .modal-xl { width: 33%; max-width: 650px !important; }
}
.btn { font-size: 14px !important; }

/* --- Sidebar Navigation --- */
.omm-nav-active { background-color: #444444 !important; }
.omm-nav-item:hover { background-color: #333333 !important; }

/* --- Content Area --- */
.content-area a { color: var(--omm-admin-accent, #193857); }
.content-area a:hover { color: color-mix(in srgb, var(--omm-admin-accent, #193857) 77%, #000); }

/* --- Tables --- */
.table th { font-weight: 500; color: grey; }

/* --- Dashboard Cards --- */
.stat-card { border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.stat-card .stat-value { font-size: 2rem; font-weight: 600; color: #333; }
.stat-card .stat-label { color: grey; font-size: 14px; }

/* --- Dev Mode (global-admin only, but safe to include) --- */
.dev-mode-badge {
  background: #198754;
  color: #fff;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 700;
  text-transform: uppercase;
  margin-left: 10px;
}

/* --- Avatar (profile-admin, but useful elsewhere) --- */
.avatar-preview {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #dee2e6;
}
.avatar-placeholder {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: var(--omm-admin-accent, #193857);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2.5rem;
  font-weight: 500;
}
.avatar-sm { width: 40px; height: 40px; font-size: 1rem; }
.avatar-md { width: 60px; height: 60px; font-size: 1.5rem; }
.avatar-lg { width: 80px; height: 80px; font-size: 2rem; }
.avatar-xl { width: 100px; height: 100px; font-size: 2.5rem; }

/* ===========================================
   Auth Page Styles
   Used by: hub_auth_combo, hub_reset_form,
   hub_mfa_challenge, admin_auth_combo
   =========================================== */

body.omm-auth {
    margin: 0;
    height: auto;
    min-height: 100%;
    width: 100%;
    position: relative;
    overflow-x: hidden;
}

.omm-auth .ommH4 {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    text-align: center;
    box-sizing: border-box;
    font-family: var(--omm-font-stack);
    font-weight: 500;
    line-height: 1.1;
    color: white;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 18px;
}

.omm-auth .ommInput {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    font: inherit;
    margin: 0;
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    background-color: #fff;
    background-image: none;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    border-radius: 2px;
    box-shadow: none;
    border-width: 0;
    border-color: var(--omm-admin-accent, #193857);
}

.omm-auth .ommButton {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    font: inherit;
    margin: 0;
    overflow: visible;
    text-transform: none;
    -webkit-appearance: button;
    font-family: inherit;
    margin-bottom: 0;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    background-image: none;
    border: 1px solid transparent;
    user-select: none;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    display: block;
    width: 100%;
    font-weight: 500;
    border-radius: 2px;
    outline: 0 !important;
    color: #fff !important;
    padding-left: 12px;
    padding-right: 12px;
    cursor: pointer;
    box-shadow: none;
    background-color: var(--omm-admin-accent, #193857);
    border-color: var(--omm-admin-accent, #193857);
}

.omm-auth .btn-default,
.omm-auth .btn-default:hover,
.omm-auth .btn-default:active,
.omm-auth .btn-default:visited {
    background-color: #fff !important;
    border-color: #fff !important;
    color: #58666e !important;
}

.omm-auth .form-control {
    font-size: 14px !important;
}

.omm-auth .line {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: var(--omm-font-stack);
    color: #58666e;
    -webkit-font-smoothing: antialiased;
    line-height: 1.42857143;
    box-sizing: border-box;
    width: 100%;
    height: 2px;
    margin: 10px 0;
    font-size: 0;
    overflow: hidden;
    border-style: dashed !important;
    background-color: transparent;
    border-width: 0;
}

.omm-auth a {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: var(--omm-font-stack);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    line-height: 1.42857143;
    text-align: center;
    font-weight: 700;
    box-sizing: border-box;
    background-color: transparent;
    text-decoration: none !important;
    cursor: pointer;
    color: white;
}

.omm-auth p {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: var(--omm-font-stack);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    line-height: 1.42857143;
    font-weight: 700;
    box-sizing: border-box;
    margin: 0 0 10px;
    text-align: center;
    color: #fff;
}

.omm-auth .form-check-input:checked {
    background-color: var(--omm-admin-accent, #193857) !important;
    border-color: var(--omm-admin-accent, #193857) !important;
    color: var(--omm-admin-accent, #193857) !important;
    outline-color: var(--omm-admin-accent, #193857) !important;
    accent-color: var(--omm-admin-accent, #193857) !important;
}

.omm-auth .field-error {
    color: #ffcccc;
    font-size: 12px;
    text-align: left;
    margin-top: 4px;
    font-family: var(--omm-font-stack);
}

.omm-auth-mfa .ommInput {
    text-align: center;
    letter-spacing: 0.5em;
    font-weight: bold;
}

.mt-15 { margin-top: 15px; }