/* theme.css — AlterCPA Design System v2 */

/* 1. DESIGN TOKENS */
:root {
  color-scheme: light dark;
  --font: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Ubuntu, Cantarell, Roboto, "Helvetica Neue", "Noto Sans", "Open Sans", Arial, sans-serif;
  --font-size: 14px;
  --line-height: 1.5;

  /* Surfaces — light mode */
  --c-bg:            #f1f5f9;
  --c-surface:       #ffffff;
  --c-surface-alt:   #f8fafc;
  --c-border:        #e2e8f0;
  --c-border-strong: #cbd5e1;

  /* Text — light mode */
  --c-text:          #1e293b;
  --c-text-muted:    #64748b;
  --c-text-subtle:   #94a3b8;
  --c-text-inv:      #ffffff;

  /* Links — fallback only; overridden per skin both in light and dark mode */
  --c-link:          var(--accent);
  --c-link-hover:    var(--accent-hover);

  /* Semantic */
  --c-success:         #1d9650;
  --c-success-bg:      #f0fdf4;
  --c-success-border:  #bbf7d0;
  --c-danger:          #cc3838;
  --c-danger-bg:       #fef2f2;
  --c-danger-border:   #fecaca;
  --c-warning:         #c48818;
  --c-warning-bg:      #fffbeb;
  --c-warning-border:  #fde68a;
  --c-info:            #0891b2;
  --c-info-active:     #0e7490;
  --c-info-bg:         #ecfeff;
  --c-info-border:     #a5f3fc;
  --c-primary:         #4070d8;
  --c-primary-bg:      #eff6ff;
  --c-primary-border:  #bfdbfe;
  --c-yellow:          #eab308;
  --c-yellow-active:   #c49200;
  --c-orange:          #c2410c;

  /* Badge/pill bg colors — independent of semantic vars so dark-mode adjustments don't invert the normal/active relationship */
  --c-bg-red:          #e03e3e;
  --c-bg-red-active:   #b91c1c;
  --c-bg-green:        #20a855;
  --c-bg-green-active: #15803d;
  --c-bg-orange:       #cc6419;
  --c-bg-orange-active:#aa5213;
  --c-indigo:          #4338ca;
  --c-purple:          #9333ea;

  /* Foreground (text/icon) variants — same as base in light, brightened in dark */
  --c-success-fg: #1d9650;
  --c-danger-fg:  #cc3838;
  --c-warning-fg: #c48818;
  --c-info-fg:    #0891b2;
  --c-primary-fg: #4070d8;

  /* Tooltips */
  --tooltip-bg:   rgba(15,23,42,.95);
  --tooltip-text: #f8fafc;

  /* Shadows */
  --shadow-sm:      0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04);
  --shadow-md:      0 2px 6px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:      0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-overlay: 0 8px 32px rgba(0,0,0,.14);

  /* Shape */
  --radius:    6px;
  --radius-sm: 4px;
  --radius-lg: 10px;

  /* Sidebar — light by default; dark for non-light skin-* variants */
  --sidebar-bg:          #e8edf2; /* row-2 chrome tone. Row 1 is --header-bg = --c-surface = #ffffff
                                     and the page is --c-bg = #f1f5f9, so a midpoint (the old #f5f8fb)
                                     landed 3 RGB units off the page background — imperceptible, row 2
                                     read as "blending in". This sits clearly below both: 23 units from
                                     the white header, 9/8/7 from the page. */
  --sidebar-border:      #e2e8f0;
  --sidebar-text:        #475569;
  --sidebar-text-active: #1e293b;
  --sidebar-active-bg:   var(--accent-light);
  --sidebar-hover-bg:    rgba(0,0,0,.04);
  --sidebar-section:     #94a3b8;
  --sidebar-sub-bg:      rgba(0,0,0,.03);
  --sidebar-sub-text:    #64748b;
  --sidebar-w:           230px;
  --sidebar-mini-w:      50px;

  /* Control heights — shared by buttons, inputs, and table rows */
  --h-lg: 44px;
  --h-md: 34px;
  --h-sm: 30px;
  --h-xs: 22px;

  /* Header */
  --header-h:      50px;
  --header-logo-w: 230px;

  /* Planka shell — two-row horizontal nav (see planka/PLAN.md §3) */
  --content-max: 1900px;  /* inner cap for header/nav/content/footer bands */
  --nav-h:       42px;    /* row-2 (menu bar) height; row 1 keeps --header-h */

  /* Accent — default is neutral slate (white theme); overridden per .skin-* */
  --accent:       #4a5568;
  --accent-hover: #2d3748;
  --accent-active:#1a202c;
  --accent-light: rgba(74,85,104,.12);
  --accent-text:  #ffffff;

  /* Header — white by default; colored skins override these */
  --header-bg:         var(--c-surface);
  --header-border:     var(--c-border);
  --header-logo-bg:    var(--c-surface-alt);
  --header-logo-hover: var(--c-border);
  --header-logo-text:  var(--c-text);
  --header-text:       var(--c-text-muted);
  --header-text-on:    var(--c-text);
  --header-item-hover: rgba(0,0,0,.06);
}

/* Dark mode — Vira Graphene High Contrast palette
   Surfaces: #1a1a1a page / #212121 card / #2b2b2b raised, borders #363636/#474747,
   text #d9d9d9 / #848484 / #616161, accents from the Graphene bright set
   (teal #80cbc4, red #f07178, green #c3e88d, yellow #ffcb6b, blue #82aaff,
   orange #f78c6c, purple #c792ea, cyan #89ddff). Bright hues are used for text
   and icons; solid fills use the matching dimmed step so they don't glare. */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg:            #1a1a1a;
    --c-surface:       #212121;
    --c-surface-alt:   #2b2b2b;
    --c-border:        #363636;
    --c-border-strong: #474747;
    --c-text:          #d9d9d9;
    --c-text-muted:    #848484;
    --c-text-subtle:   #616161;

    --c-danger:        #8f3b41;
    --c-primary:       #3f5c9e;
    --c-success:       #528038;
    --c-info:          #2e7f9e;
    --c-info-active:   #256a85;
    --c-warning:       #8f6b26;
    --c-yellow:        #7d5d20;
    --c-yellow-active: #654c1a;

    --c-bg-red:          #b04a50;
    --c-bg-red-active:   #8f3b41;
    --c-bg-green:        #52803a;
    --c-bg-green-active: #45702d;
    --c-bg-orange:       #b3603f;
    --c-bg-orange-active:#944d32;

    --c-success-fg:     #c3e88d;
    --c-success-bg:     rgba(195,232,141,.12);
    --c-success-border: rgba(195,232,141,.3);
    --c-danger-fg:      #f07178;
    --c-danger-bg:      rgba(240,113,120,.12);
    --c-danger-border:  rgba(240,113,120,.3);
    --c-warning-fg:     #ffcb6b;
    --c-warning-bg:     rgba(255,203,107,.12);
    --c-warning-border: rgba(255,203,107,.3);
    --c-info-fg:        #89ddff;
    --c-info-bg:        rgba(137,221,255,.12);
    --c-info-border:    rgba(137,221,255,.3);
    --c-primary-fg:     #82aaff;
    --c-primary-bg:     rgba(130,170,255,.12);
    --c-primary-border: rgba(130,170,255,.3);
    --c-orange:         #f78c6c;
    --c-indigo:         #9aa8ff;
    --c-purple:         #c792ea;

    --tooltip-bg:   #2b2b2b;
    --tooltip-text: #d9d9d9;

    --shadow-sm:      0 1px 2px rgba(0,0,0,.4);
    --shadow-md:      0 2px 6px rgba(0,0,0,.45);
    --shadow-lg:      0 4px 16px rgba(0,0,0,.55);
    --shadow-overlay: 0 8px 32px rgba(0,0,0,.65);

    --sidebar-bg:          var(--c-surface);
    --sidebar-border:      #363636;
    --sidebar-text:        #848484;
    --sidebar-text-active: var(--c-link);      /* Graphene highlights the active row in the
                                                  accent hue — teal by default, the skin's own
                                                  bright hue when a skin is set (see the
                                                  dark-mode link block below) */
    --sidebar-active-bg:   var(--accent-light);
    --sidebar-hover-bg:    rgba(255,255,255,.05);
    --sidebar-section:     #545454;
    --sidebar-sub-bg:      #1a1a1a;
    --sidebar-sub-text:    #848484;
  }
}

/* Skin accent colors */
.skin-red,    .skin-red-light    { --accent:#e53e3e; --accent-hover:#c53030; --accent-active:#9b2c2c; --accent-light:rgba(229,62,62,.12); }
.skin-blue,   .skin-blue-light   { --accent:#3182ce; --accent-hover:#2b6cb0; --accent-active:#2c5282; --accent-light:rgba(49,130,206,.12); }
.skin-green,  .skin-green-light  { --accent:#38a169; --accent-hover:#2f855a; --accent-active:#276749; --accent-light:rgba(56,161,105,.12); }
.skin-black,  .skin-black-light  { --accent:#4a5568; --accent-hover:#2d3748; --accent-active:#1a202c; --accent-light:rgba(74,85,104,.12); }
.skin-purple, .skin-purple-light { --accent:#805ad5; --accent-hover:#6b46c1; --accent-active:#553c9a; --accent-light:rgba(128,90,213,.12); }
.skin-yellow, .skin-yellow-light { --accent:#d69e2e; --accent-hover:#b7791f; --accent-active:#975a16; --accent-light:rgba(214,158,46,.12); }
.skin-pink,   .skin-pink-light   { --accent:#d81b60; --accent-hover:#be1656; --accent-active:#a3114a; --accent-light:rgba(216,27,96,.12); }
.skin-orange, .skin-orange-light { --accent:#ea580c; --accent-hover:#c2410c; --accent-active:#9a3412; --accent-light:rgba(234,88,12,.12); }

/* Dark mode — Graphene-tuned accent skins. Each skin keeps its hue but drops to the
   dimmed step of the matching Graphene bright color, so a colored header/menu sits on
   the #1a1a1a chrome without glaring; --accent-light is the bright hue at low alpha.
   The default (skin-less) accent becomes Graphene's own teal. Light mode is untouched. */
@media (prefers-color-scheme: dark) {
  :root                            { --accent:#3d7d76; --accent-hover:#4a938b; --accent-active:#2b5852; --accent-light:rgba(128,203,196,.14); }
  .skin-red,    .skin-red-light    { --accent:#8f3b41; --accent-hover:#a4464d; --accent-active:#6f2c31; --accent-light:rgba(240,113,120,.14); }
  .skin-blue,   .skin-blue-light   { --accent:#3f5c9e; --accent-hover:#4a6cb8; --accent-active:#334a80; --accent-light:rgba(130,170,255,.16); }
  .skin-green,  .skin-green-light  { --accent:#528038; --accent-hover:#5f8f42; --accent-active:#426a2d; --accent-light:rgba(195,232,141,.16); }
  .skin-black,  .skin-black-light  { --accent:#4a4a4a; --accent-hover:#545454; --accent-active:#2b2b2b; --accent-light:rgba(217,217,217,.12); }
  .skin-purple, .skin-purple-light { --accent:#7a4d96; --accent-hover:#8d5aad; --accent-active:#653f7c; --accent-light:rgba(199,146,234,.16); }
  .skin-yellow, .skin-yellow-light { --accent:#8f6b26; --accent-hover:#a07a2c; --accent-active:#75561d; --accent-light:rgba(255,203,107,.16); }
  .skin-pink,   .skin-pink-light   { --accent:#a13f56; --accent-hover:#b84a64; --accent-active:#873447; --accent-light:rgba(255,156,172,.16); }
  .skin-orange, .skin-orange-light { --accent:#a4523a; --accent-hover:#bd5f44; --accent-active:#85422e; --accent-light:rgba(247,140,108,.16); }
}

/* Colored skins — accent-colored header */
.skin-red,    .skin-red-light,
.skin-blue,   .skin-blue-light,
.skin-green,  .skin-green-light,
.skin-black,  .skin-black-light,
.skin-purple, .skin-purple-light,
.skin-yellow, .skin-yellow-light,
.skin-pink,   .skin-pink-light,
.skin-orange, .skin-orange-light {
  --header-bg:         var(--accent);
  --header-border:     transparent;
  --header-logo-bg:    var(--accent-active);
  --header-logo-hover: var(--accent-hover);
  --header-logo-text:  #ffffff;
  --header-text:       rgba(255,255,255,.85);
  --header-text-on:    #ffffff;
  --header-item-hover: rgba(0,0,0,.1);
}

/* Light-mode link colors — explicit per skin, avoids var() chaining from :root */
.skin-red,    .skin-red-light    { --c-link:#e53e3e; --c-link-hover:#c53030; }
.skin-blue,   .skin-blue-light   { --c-link:#3182ce; --c-link-hover:#2b6cb0; }
.skin-green,  .skin-green-light  { --c-link:#38a169; --c-link-hover:#2f855a; }
.skin-black,  .skin-black-light  { --c-link:#4a5568; --c-link-hover:#2d3748; }
.skin-purple, .skin-purple-light { --c-link:#805ad5; --c-link-hover:#6b46c1; }
.skin-yellow, .skin-yellow-light { --c-link:#d69e2e; --c-link-hover:#b7791f; }
.skin-pink,   .skin-pink-light   { --c-link:#d81b60; --c-link-hover:#be1656; }
.skin-orange, .skin-orange-light { --c-link:#ea580c; --c-link-hover:#c2410c; }

/* Sidebar menu — non-light skin-* variants get a darker menu in light browser mode.
   The default light menu (light browser mode, no skin or -light skin) is defined in :root above.
   The dark browser menu (all skins, including non-light) is defined in @media dark :root above. */
@media (prefers-color-scheme: light) {
  .skin-red,    .skin-blue,   .skin-green,
  .skin-black,  .skin-purple, .skin-yellow,
  .skin-pink,   .skin-orange {
    --sidebar-bg:          #1e293b;
    --sidebar-border:      rgba(255,255,255,.06);
    --sidebar-text:        #94a3b8;
    --sidebar-text-active: #f1f5f9;
    --sidebar-active-bg:   rgba(255,255,255,.1);
    --sidebar-hover-bg:    rgba(255,255,255,.05);
    --sidebar-section:     #475569;
    --sidebar-sub-bg:      rgba(0,0,0,.15);
    --sidebar-sub-text:    #7a8fa4;
  }
}

/* Dark-mode link colors — the Graphene bright hue for each skin, readable on #1a1a1a/#212121 */
@media (prefers-color-scheme: dark) {
  :root                            { --c-link: #80cbc4; --c-link-hover: #a3ded8; }
  .skin-black,  .skin-black-light  { --c-link: #d9d9d9; --c-link-hover: #ffffff; }
  .skin-red,    .skin-red-light    { --c-link: #f07178; --c-link-hover: #ff9cac; }
  .skin-blue,   .skin-blue-light   { --c-link: #82aaff; --c-link-hover: #a9c4ff; }
  .skin-green,  .skin-green-light  { --c-link: #c3e88d; --c-link-hover: #d7f0ad; }
  .skin-purple, .skin-purple-light { --c-link: #c792ea; --c-link-hover: #dbb3f2; }
  .skin-yellow, .skin-yellow-light { --c-link: #ffcb6b; --c-link-hover: #ffdb99; }
  .skin-pink,   .skin-pink-light   { --c-link: #ff9cac; --c-link-hover: #ffbcc7; }
  .skin-orange, .skin-orange-light { --c-link: #f78c6c; --c-link-hover: #ffae94; }
}

/* 2. RESET & BASE */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 10px;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--c-text);
  background: var(--c-bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* .layout-boxed used to paint a decorative dot-grid + accent-glow backdrop here (recreated
   boxed.png). Removed — the page background is now the same flat --c-bg fill as plain body /
   .content-wrapper; every band is already full-bleed edge-to-edge (§2 rule 2), so a distinct
   "boxed canvas" backdrop no longer has anything to show through around. */

body.hold-transition * { transition: none !important; }

a {
  color: var(--c-link);
  text-decoration: none;
}
a:hover {
  color: var(--c-link-hover);
  text-decoration: underline;
}
a:focus { outline: none; }
a:focus-visible {
  outline: 2px solid var(--c-link);
  outline-offset: 2px;
}

img {
  vertical-align: middle;
  border: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: 20px 0;
}

p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

small, .small { font-size: 85%; }

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font);
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-text);
  margin-top: 20px;
  margin-bottom: 10px;
}
h4, h5, h6, .h4, .h5, .h6 { margin-top: 10px; }
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 28px; }
h3, .h3 { font-size: 22px; }
h4, .h4 { font-size: 16px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }
h1 small, h2 small, h3 small,
h4 small, h5 small, h6 small { font-size: 70%; font-weight: 400; color: var(--c-text-muted); }

/* Lists */
ul, ol { margin: 0 0 10px; padding-left: 20px; }
ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; }
.list-unstyled { padding: 0; list-style: none; }
.list-inline    { padding: 0; list-style: none; margin-left: -5px; }
.list-inline > li { display: inline-block; padding: 0 5px; }

/* Definition list */
dl { margin: 0 0 20px; }
dt { font-weight: 600; line-height: var(--line-height); }
dd { margin-left: 0; margin-bottom: 4px; line-height: var(--line-height); }
@media (min-width: 768px) {
  .dl-horizontal dt {
    float: left; width: 160px; clear: left; text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dl-horizontal dd { margin-left: 180px; }
}

/* Code */
code, kbd, pre, samp {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 90%;
}
code {
  padding: 2px 5px;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-danger-fg);
}
pre {
  display: block;
  padding: 12px;
  margin: 0 0 12px;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: auto;
  color: var(--c-text);
}

blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  border-left: 4px solid var(--accent);
  color: var(--c-text-muted);
  font-size: 15px;
}

.section-label {
  color: var(--c-text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 24px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-border);
}

/* SR-only */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* 3. BOOTSTRAP GRID */
.container, .container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px)  { .container { max-width: 750px; } }
@media (min-width: 992px)  { .container { max-width: 970px; } }
@media (min-width: 1200px) { .container { max-width: 1170px; } }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
[class*="col-"] {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  width: 100%;
}

/* xs */
.col-xs-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
.col-xs-2  { flex: 0 0 16.667%; max-width: 16.667%; }
.col-xs-3  { flex: 0 0 25%;     max-width: 25%; }
.col-xs-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.col-xs-5  { flex: 0 0 41.667%; max-width: 41.667%; }
.col-xs-6  { flex: 0 0 50%;     max-width: 50%; }
.col-xs-7  { flex: 0 0 58.333%; max-width: 58.333%; }
.col-xs-8  { flex: 0 0 66.667%; max-width: 66.667%; }
.col-xs-9  { flex: 0 0 75%;     max-width: 75%; }
.col-xs-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-xs-11 { flex: 0 0 91.667%; max-width: 91.667%; }
.col-xs-12 { flex: 0 0 100%;    max-width: 100%; }

/* sm ≥768px */
@media (min-width: 768px) {
  .col-sm-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
  .col-sm-2  { flex: 0 0 16.667%; max-width: 16.667%; }
  .col-sm-3  { flex: 0 0 25%;     max-width: 25%; }
  .col-sm-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-sm-5  { flex: 0 0 41.667%; max-width: 41.667%; }
  .col-sm-6  { flex: 0 0 50%;     max-width: 50%; }
  .col-sm-7  { flex: 0 0 58.333%; max-width: 58.333%; }
  .col-sm-8  { flex: 0 0 66.667%; max-width: 66.667%; }
  .col-sm-9  { flex: 0 0 75%;     max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .col-sm-11 { flex: 0 0 91.667%; max-width: 91.667%; }
  .col-sm-12 { flex: 0 0 100%;    max-width: 100%; }
  .col-sm-offset-1 { margin-left: 8.333%; }
  .col-sm-offset-2 { margin-left: 16.667%; }
  .col-sm-offset-3 { margin-left: 25%; }
}

/* md ≥992px */
@media (min-width: 992px) {
  .col-md-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
  .col-md-2  { flex: 0 0 16.667%; max-width: 16.667%; }
  .col-md-3  { flex: 0 0 25%;     max-width: 25%; }
  .col-md-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-md-5  { flex: 0 0 41.667%; max-width: 41.667%; }
  .col-md-6  { flex: 0 0 50%;     max-width: 50%; }
  .col-md-7  { flex: 0 0 58.333%; max-width: 58.333%; }
  .col-md-8  { flex: 0 0 66.667%; max-width: 66.667%; }
  .col-md-9  { flex: 0 0 75%;     max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .col-md-11 { flex: 0 0 91.667%; max-width: 91.667%; }
  .col-md-12 { flex: 0 0 100%;    max-width: 100%; }
  .col-md-offset-1 { margin-left: 8.333%; }
  .col-md-offset-2 { margin-left: 16.667%; }
  .col-md-offset-3 { margin-left: 25%; }
}

/* lg ≥1200px */
@media (min-width: 1200px) {
  .col-lg-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
  .col-lg-2  { flex: 0 0 16.667%; max-width: 16.667%; }
  .col-lg-3  { flex: 0 0 25%;     max-width: 25%; }
  .col-lg-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-lg-5  { flex: 0 0 41.667%; max-width: 41.667%; }
  .col-lg-6  { flex: 0 0 50%;     max-width: 50%; }
  .col-lg-7  { flex: 0 0 58.333%; max-width: 58.333%; }
  .col-lg-8  { flex: 0 0 66.667%; max-width: 66.667%; }
  .col-lg-9  { flex: 0 0 75%;     max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .col-lg-11 { flex: 0 0 91.667%; max-width: 91.667%; }
  .col-lg-12 { flex: 0 0 100%;    max-width: 100%; }
  .col-lg-offset-1 { margin-left: 8.333%; }
  .col-lg-offset-2 { margin-left: 16.667%; }
  .col-lg-offset-3 { margin-left: 25%; }
  .col-lg-offset-4 { margin-left: 33.333%; }
  .col-lg-offset-5 { margin-left: 41.667%; }
  .col-lg-offset-6 { margin-left: 50%; }
}

/* 4. LAYOUT UTILITIES */
.clearfix::after { display: block; content: ""; clear: both; }
.pull-left  { float: left  !important; }
.pull-right { float: right !important; }
.center-block { display: block; margin-right: auto; margin-left: auto; }

.hidden     { display: none !important; }
.invisible  { visibility: hidden; }
.show       { display: block !important; }

/* Responsive show/hide */
.visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; }

@media (max-width: 767px) {
  .visible-xs { display: block !important; }
  .visible-xs.btn { display: flex !important; }
  .hidden-xs  { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm { display: block !important; }
  .visible-sm.btn { display: flex !important; }
  .hidden-sm  { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md { display: block !important; }
  .hidden-md  { display: none !important; }
}
@media (min-width: 1200px) {
  .visible-lg { display: block !important; }
  .hidden-lg  { display: none !important; }
}

/* 5. IMAGES */
.img-circle    { border-radius: 50%; }
.img-rounded   { border-radius: var(--radius); }
.img-responsive { display: block; max-width: 100%; height: auto; }
.img-thumbnail {
  display: inline-block; max-width: 100%; height: auto;
  padding: 4px; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius);
}

/* 6. LAYOUT SHELL
   Planka two-row shell (planka/PLAN.md §2). Header (row 1), nav (row 2), content-wrapper and
   footer are all in-flow full-bleed bands — nothing is position:fixed at >=768px (the classic
   flex sticky-footer pattern below handles a short page's footer instead). Header/nav/footer
   each wrap their real content in an `-inner` div capped at var(--content-max) and centered;
   content-wrapper paints the same color as <body> so it can be capped directly with no separate
   inner div (see comment above .content-wrapper). Mobile (<768px) reintroduces the one sticky
   element and two off-canvas sheets — see §30. */
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

/* Row 1 — header band */
.main-header {
  position: relative;
  width: 100%;
  z-index: 1030;
  height: var(--header-h);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--shadow-md);
  transition: background .2s;
}
.header-inner {
  max-width: var(--content-max);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}

.main-header .logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 16px;
  color: var(--header-text-on);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
}
.main-header .logo:hover { text-decoration: none; color: var(--header-text-on); }
.main-header .logo-mini { display: none; font-size: 18px; font-weight: 600; }
/* logo-lg: {name} may contain <b>, <i>, <small> template variables */
.main-header .logo-lg        { display: inline; }
.main-header .logo-lg small  { font-size: 12px; font-weight: 400; opacity: .75; text-transform: uppercase; letter-spacing: .06em; vertical-align: middle; margin-left: 4px; }
.main-header .logo-lg b,
.main-header .logo-lg strong { font-weight: 600; }
.main-header .logo-lg .fa,
.main-header .logo-lg i      { font-size: 18px; vertical-align: middle; }

/* navbar-brand wraps the same raw {name} markup as .logo-lg, so it uses the same inline /
   vertical-align technique: the outer box stays a flex item stretched to the header height, but
   its CONTENT falls back to normal inline flow (no align-items/gap), keeping <b>/<small>/icons on
   one shared baseline instead of making each a separately-centred flex item. */
.navbar-brand {
  display: flex;
  align-items: stretch;
  height: 100%;
  line-height: var(--header-h);
  color: var(--header-text-on) !important;
  font-size: 16px; font-weight: 600;
  padding: 0 12px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.navbar-brand small { font-size: 12px; font-weight: 400; opacity: .75; text-transform: uppercase; letter-spacing: .06em; vertical-align: middle; margin-left: 4px; }
.navbar-brand b,
.navbar-brand strong { font-weight: 600; }
.navbar-brand .fa,
.navbar-brand i      { font-size: 16px; vertical-align: middle; }
.navbar-brand:hover { color: var(--header-text-on) !important; text-decoration: none; }

/* Mobile-only header toggles (.planka-toggle) — markup owned by the templates subagent, two
   buttons: [data-toggle="planka-utility"] opens the profile/money/support sheet,
   [data-toggle="planka-nav"] opens the row-2 menu sheet. Hidden at >=768px (both dropdowns/row-2
   are reachable inline there); shown at <768px, see §30. */
.planka-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: var(--header-h);
  color: var(--header-text);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
  transition: background .12s;
}
.planka-toggle:hover,
.planka-toggle:focus { color: var(--header-text-on); background: var(--header-item-hover); }
.planka-toggle .fa { font-size: 16px; }

.navbar-custom-menu { margin-left: auto; }
.navbar-custom-menu .nav,
.navbar-nav {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0; margin: 0;
}

.navbar-custom-menu .nav > li > a {
  display: flex; align-items: center; gap: 6px;
  height: var(--header-h);
  padding: 0 12px;
  color: var(--header-text);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s;
}
.navbar-custom-menu .nav > li > a:hover { color: var(--header-text-on); background: var(--header-item-hover); text-decoration: none; }

/* Header dropdown */
.navbar-custom-menu .dropdown { position: relative; }
.navbar-custom-menu .dropdown-menu {
  position: absolute;
  top: calc(100% + 2px); right: 0; left: auto;
  min-width: 170px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 4px 0; margin: 0;
  list-style: none;
  display: none;
  z-index: 1040;
}
.navbar-custom-menu .dropdown.open .dropdown-menu { display: block; }
.navbar-custom-menu .dropdown-menu li a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  color: var(--c-text); font-size: 13px;
  text-decoration: none; white-space: nowrap;
}
.navbar-custom-menu .dropdown-menu li a:hover { background: var(--c-surface-alt); }
.navbar-custom-menu .dropdown-menu li.divider { height: 1px; background: var(--c-border); margin: 4px 0; }

.ul-profile { cursor: pointer; }
.user-image {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  object-fit: cover;
}

/* Cash balance widget */
.header-money {
  display: block;
  padding: 7px 14px;
  border-top: 1px solid var(--c-border);
}
.header-cashname {
  font-size: 11px; font-weight: 600;
  color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 3px;
}
.header-cashline {
  display: flex; align-items: center;
  padding: 2px 0;
  font-size: 13px;
  color: var(--c-text);
}
.header-cashline span { color: var(--c-text-muted); font-size: 11px; margin-right: auto; }

/* Row 2 — nav band (see §7 below for .sidebar-menu/.treeview-menu contents) */
.main-sidebar {
  position: relative;
  width: 100%;
  z-index: 1020;
  height: var(--nav-h);
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--sidebar-border);
}
.nav-inner {
  max-width: var(--content-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 16px 0 11px; /* asymmetric on purpose: 11px left (5px tighter), 16px right */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;    /* Firefox */
  -ms-overflow-style: none; /* legacy Edge/IE */
  cursor: grab;
}
.nav-inner.dragging { cursor: grabbing; user-select: none; } /* class toggled by skin.js's drag-to-scroll */
/* Content-driven horizontal scroll: once the row's items don't fit (typically below ~1200px,
   the BS3 `lg` breakpoint used elsewhere in this file) they no longer wrap — the row scrolls
   sideways instead. The scrollbar itself is hidden entirely in every browser (a visible bar
   across a 44px menu band looks bad); scrolling still works via wheel/shift-wheel, trackpad,
   touch and keyboard. */
.nav-inner::-webkit-scrollbar { display: none; } /* Chrome/Safari/new Edge */

/* Content wrapper — background matches <body> (--c-bg), so unlike header/nav/footer it doesn't
   need a separate full-bleed layer + inner cap: capping the element itself already reads as
   "100%-width canvas, capped content column" since the band and the page behind it are the same
   color. flex:1 is the sticky-footer half of the pattern (.wrapper is the other half). */
.content-wrapper {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  background: var(--c-bg);
  padding: 20px;
  box-sizing: border-box;
}

.content { }
.content-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 16px;
  margin-bottom: 4px;
}
.content-header h1 { font-size: 20px; margin: 0; }
.content-header small { font-size: 13px; color: var(--c-text-muted); margin-left: 8px; }

/* Row 3 — footer band */
.main-footer {
  width: 100%;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: 12px;
  line-height: 1.6;
  min-height: 46px;
  overflow: hidden;
}
.footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 12px 20px;
}
.main-footer a { text-decoration: none; }
.main-footer a:hover { color: var(--accent); }

/* Layout variants */
/* .layout-boxed: the dot-grid + accent-glow backdrop that used to be painted on body.layout-boxed
   itself is gone — the body now paints the same flat --c-bg fill whether or not this class is
   present. Every band above is already full-bleed edge-to-edge (§2 rule 2), so this class no
   longer constrains `.wrapper` (that would defeat "canvas is 100% width") and has zero visual
   effect of its own; it's kept purely as a compatibility body-class hook. The old fixed-element
   ~1920px viewport-offset hack is gone entirely too — it only existed because .main-header/
   .main-sidebar used to be position:fixed. */

/* Top-nav layout (no menu row) */
.layout-top-nav .main-sidebar { display: none; }
.layout-top-nav .main-header .logo { width: auto; min-width: 0; }

/* 7. SIDEBAR NAVIGATION
   Row 2's menu list. Base rules below are the vertical-list look, used as-is inside the mobile
   off-canvas sheet (<768px, see §30). The >=768px media block turns the same markup into a
   horizontal bar with dropdown-flyout submenus — same classes, same `.menu-open` JS hook,
   different position/display per PLAN.md §2 rule 5. Do not rename `.sidebar-menu` /
   `.treeview-menu` / `.fai` — §29's icon map keys off `.main-sidebar X .fai::before` verbatim. */
.sidebar-menu {
  list-style: none;
  padding: 6px 0;
  margin: 0;
}

.sidebar-menu > li { position: relative; }

/* menu.space section headers + the {mainmenu} label (both render <li class="header">) */
.sidebar-menu > li.header {
  display: none;
}

.sidebar-menu > li > a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  margin: 0 8px;              /* mobile: inset from the sheet edges so the row reads as a block */
  border-radius: var(--radius); /* same corner as boxes/buttons/desktop pills — no new token */
  color: var(--sidebar-text);
  font-size: 13.5px;
  font-weight: 400;
  text-decoration: none;
  transition: background .12s, color .12s;
  position: relative;
  white-space: nowrap;
}
.sidebar-menu > li > a:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text-active);
  text-decoration: none;
}
/* Filled rounded highlight, no left border stripe — same language as the desktop pill. */
.sidebar-menu > li.active > a {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-text-active);
  font-weight: 500;
}
.sidebar-menu > li > a .fa,
.sidebar-menu > li > a .fai {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  font-size: 14px;
  opacity: .85;
}
.sidebar-menu > li.active > a .fa,
.sidebar-menu > li.active > a .fai { opacity: 1; }

.pull-right-container {
  margin-left: auto;
  display: flex; align-items: center;
  flex-shrink: 0;
}
.sidebar-menu > li > a .fa-angle-left {
  font-size: 11px;
  opacity: .5;
  transition: transform .2s;
}
.sidebar-menu > li.menu-open > a .fa-angle-left { transform: rotate(-90deg); opacity: .8; }

/* Mobile default: inline accordion panel (position:static, slides down under its <li>) */
.treeview-menu {
  display: none;
  position: static;
  list-style: none;
  padding: 3px 0 5px;
  margin: 2px 8px 4px;  /* 8px sides align the panel with the pill inset above it */
  background: var(--sidebar-sub-bg);
  border-radius: var(--radius);
}
.sidebar-menu > li.menu-open > .treeview-menu { display: block; }

.treeview-menu > li > a {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 26px;
  color: var(--sidebar-sub-text);
  font-size: 13px;
  text-decoration: none;
  transition: color .1s;
}
.treeview-menu > li > a:hover,
.treeview-menu > li.active > a {
  color: var(--sidebar-text-active);
  text-decoration: none;
}
.treeview-menu > li > a .fa {
  width: 14px;
  font-size: 9px;
  opacity: .7;
  flex-shrink: 0;
}

/* >=768px: row 2 becomes a horizontal bar; submenus become floating dropdown flyouts */
@media (min-width: 768px) {
  /* Items are pills, so they size themselves and get centred in the band rather than
     stretching edge to edge. */
  .sidebar-menu {
    display: flex;
    align-items: center;
    height: 100%;
    min-width: max-content; /* lets .nav-inner's overflow-x scroll the whole row */
  }

  /* Pill geometry inside the 42px band: the <ul>'s own 6px vertical padding leaves a 30px content
     box, which the 30px pill fills exactly (0px slack) — so every item gets 6px of clear air above
     and below. 30px comfortably holds the 13.5px label and the 14px icon (9px gap, from the base
     rule); --radius is the same corner used by boxes/buttons, so the pill belongs to the existing
     design system instead of inventing a radius. */
  .sidebar-menu > li > a {
    min-height: 30px;
    padding: 0 10px;
    margin: 0 1px; /* overrides the base rule's mobile 0 8px inset */
    border-radius: var(--radius);
    flex-shrink: 0;
  }
  /* The base rule's margin-left:auto pins the chevron to the far right edge, which is right for
     the mobile full-width accordion row but reads as "floating" on a content-sized desktop pill,
     so desktop swaps it for a small fixed gap next to the label.
     MUST stay negative: flex `gap` applies between EVERY adjacent pair of children in addition to
     their margins (they add, they don't override), so the <a>'s gap:9px + this -4px margin = 5px
     net visual gap to the label. A naive positive `margin-left: 4px` here reads as 13px, which is
     what made the chevron look "very far" before. */
  .sidebar-menu > li > a .pull-right-container {
    margin-left: -4px;
  }
  /* The filled pill IS the active indicator now — no separate underline, and no border stripe
     anywhere (the base rule dropped it too, so nothing needs resetting here). Hover keeps the same
     shape (inherited from the rule above) but the lighter --sidebar-hover-bg from the base
     rule, so hover still reads as the weaker state; active adds font-weight 500 (base rule). */

  /* Floating flyout — card look copied from .navbar-custom-menu .dropdown-menu (surface bg,
     border, radius, shadow; no new tokens). Positioned off the <li> (position:relative above). */
  .treeview-menu {
    position: absolute;
    top: 100%; left: 0;
    min-width: 200px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 4px 0;
    margin: 0;
    z-index: 1040;
  }
  .treeview-menu > li > a {
    padding: 8px 16px;
    color: var(--c-text);
  }
  .treeview-menu > li > a:hover,
  .treeview-menu > li.active > a {
    color: var(--c-text);
    background: var(--c-surface-alt);
  }
}

/* 8. BOXES */
.box {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  position: relative;
}

.box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}
.box-header.with-border {
  border-bottom: 1px solid var(--c-border);
}

.box-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
  margin: 0;
  flex: 1;
  order: 1;
}
h3.box-title {
  font-size: 16px;
}
.box-tools {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0; margin-left: auto;
  order: 2;
}

.box-body { padding: 16px; }
.box-body.no-padding { padding: 0; }

.box-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-alt);
  border-radius: 0 0 var(--radius) var(--radius);
}
.box-footer.no-padding { padding: 0; }
.box-footer.no-padding .btn, .box-footer.no-padding .btn-block {
  border-radius: 0 0 var(--radius) var(--radius) !important;
  width: 100%; display: flex;
}

.box-danger  { border-top: 3px solid var(--c-danger); }
.box-warning { border-top: 3px solid var(--c-warning); }
.box-primary { border-top: 3px solid var(--c-primary); }
.box-success { border-top: 3px solid var(--c-success); }
.box-info    { border-top: 3px solid var(--c-info); }
.box-default { border-top: 3px solid var(--c-border-strong); }

.box-widget { overflow: hidden; }
.box-widget.widget-user-2 { border-top: none; }

/* INFO BOXES */
.info-box {
  display: flex;
  align-items: stretch;
  min-height: 90px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  overflow: hidden;
}
.info-box small { font-size: 14px; }

.info-box-icon {
  flex-shrink: 0;
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 45px;
  background: rgba(0,0,0,.15);
}
.info-box-icon > img { max-width: 100%; }

.info-box-content {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.info-box-number {
  display: block;
  font-weight: 700;
  font-size: 18px;
}
.info-box-text {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .85;
}
.info-box-more { display: block; }

.info-box .progress {
  background: rgba(0,0,0,.2);
  height: 2px;
  border-radius: 0;
  margin: 5px 0 3px;
  overflow: visible;
}
.info-box .progress .progress-bar {
  background: rgba(255,255,255,.85);
  border-radius: 0;
}
.progress-description {
  display: block;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Uncolored info-box fallback (no bg-* applied) */
.info-box:not([class*="bg-"]) .info-box-icon {
  background: var(--c-surface-alt);
  color: var(--c-text-muted);
}
.info-box:not([class*="bg-"]) .progress {
  background: var(--c-border);
}
.info-box:not([class*="bg-"]) .progress .progress-bar {
  background: var(--c-primary);
}

/* 9. DASHBOARD STAT BLOCKS (config-block) */
.config-block {
  display: flex;
  flex-direction: column;
  border-radius: calc(var(--radius) - 1px);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  transition: filter .15s;
}
.config-block:hover { filter: brightness(.95); }
a:has(> .config-block),
a:has(> .config-block):hover,
.widget-user-2 a,
.widget-user-2 a:hover { text-decoration: none !important; }
a .config-block, a:hover .config-block,
a .config-block *, a:hover .config-block * { text-decoration: none !important; }

.config-block-info {
  padding: 15px 12px;
  height: 72px;
  overflow: hidden;
}
.config-block-icon {
  display: block;
  float: left;
  text-align: center;
  font-size: 18px;
  width: 43px; height: 43px;
  line-height: 43px;
  border-radius: 100%;
  margin-right: 10px;
}
.config-block-name {
  display: block;
  font-size: 22px; font-weight: 300;
  line-height: 43px;
}
.config-block-line {
  display: block;
  font-size: 12px;
  line-height: 15px;
}
.config-block-descr {
  padding: 6px 12px;
  font-size: 11.5px; font-weight: 600;
  color: rgba(255,255,255,.85);
  text-transform: uppercase; letter-spacing: .05em;
}
.config-block-name,
.config-block-line,
.config-block-descr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.config-block-dash .config-block-name { font-size: 24px; line-height: 25px; }

.bg-light-blue { background-color: #3c8dbc !important; color: #fff !important; }
.bg-aqua       { background-color: #00c0ef !important; color: #fff !important; }
.bg-navy       { background-color: #001f3f !important; color: #fff !important; }
.bg-teal       { background-color: #39cccc !important; color: #fff !important; }
.bg-green      { background-color: var(--c-bg-green) !important; color: #fff !important; }
.bg-purple     { background-color: #605ca8 !important; color: #fff !important; }
.bg-yellow     { background-color: var(--c-yellow) !important; color: #fff !important; }
.bg-orange     { background-color: var(--c-bg-orange) !important; color: #fff !important; }
.bg-red        { background-color: var(--c-bg-red) !important;  color: #fff !important; }
.bg-maroon     { background-color: #d81b60 !important; color: #fff !important; }
.bg-gray       { background-color: #d2d6de !important; color: #000 !important; }
.bg-black      { background-color: #222 !important;    color: #fff !important; }
.bg-blue       { background-color: var(--c-info) !important;    color: #fff !important; }

.bg-light-blue-active { background-color: #357ca5 !important; color: #fff !important; }
.bg-aqua-active       { background-color: #00a7d0 !important; color: #fff !important; }
.bg-navy-active       { background-color: #001a35 !important; color: #fff !important; }
.bg-teal-active       { background-color: #30bbbb !important; color: #fff !important; }
.bg-green-active      { background-color: var(--c-bg-green-active) !important; color: #fff !important; }
.bg-purple-active     { background-color: #555299 !important; color: #fff !important; }
.bg-yellow-active     { background-color: var(--c-yellow-active) !important; color: #fff !important; }
.bg-orange-active     { background-color: var(--c-bg-orange-active) !important; color: #fff !important; }
.bg-red-active        { background-color: var(--c-bg-red-active) !important; color: #fff !important; }
.bg-maroon-active     { background-color: #ca195a !important; color: #fff !important; }
.bg-gray-active       { background-color: #b5bbc8 !important; color: #000 !important; }
.bg-black-active      { background-color: #111 !important;    color: #fff !important; }
.bg-blue-active       { background-color: var(--c-info-active) !important; color: #fff !important; }
.bg-primary { background-color: var(--c-primary) !important; color: #fff !important; }
.bg-success { background-color: var(--c-success) !important; color: #fff !important; }
.bg-info    { background-color: var(--c-info) !important; color: #fff !important; }
.bg-warning { background-color: var(--c-warning) !important; color: #fff !important; }
.bg-danger  { background-color: var(--c-danger) !important; color: #fff !important; }

/* Dark mode — the hardcoded AdminLTE block colors (skin_bg → bg-*) either glare
   (aqua/teal/maroon/light-blue) or vanish into the dark surface (navy/black) or
   invert to a light block (gray). Retune each to the same muted level as the already
   dark-tuned bg-red/green/orange, dimming both the tile (bg-*) and its icon/descr
   strip (bg-*-active). red/green/orange/purple already read fine and are left alone. */
@media (prefers-color-scheme: dark) {
  .bg-aqua              { background-color:#2e7f9e !important; }
  .bg-aqua-active       { background-color:#256a85 !important; }
  .bg-teal              { background-color:#39756e !important; }
  .bg-teal-active       { background-color:#2b5852 !important; }
  .bg-light-blue        { background-color:#3f5c9e !important; }
  .bg-light-blue-active { background-color:#334a80 !important; }
  .bg-navy              { background-color:#2f3f63 !important; }
  .bg-navy-active       { background-color:#26334f !important; }
  .bg-maroon            { background-color:#8e3550 !important; }
  .bg-maroon-active     { background-color:#742b41 !important; }
  .bg-yellow            { background-color:#9a742a !important; }
  .bg-yellow-active     { background-color:#7d5d20 !important; }
  .bg-gray              { background-color:#4a4a4a !important; color:#d9d9d9 !important; }
  .bg-gray-active       { background-color:#363636 !important; color:#d9d9d9 !important; }
  .bg-black             { background-color:#2b2b2b !important; }
  .bg-black-active      { background-color:#1a1a1a !important; }
}

/* 10. CALLOUTS & ALERTS — bright, color-coded status boxes (one shared look)
   Real markup carries no icon and rarely an <h4> (usually inline <b> + text),
   so the whole box is filled + the status icon is injected via ::before. */
.callout, .alert,
.callout-success, .callout-danger, .callout-warning, .callout-info,
.alert-success, .alert-danger, .alert-warning, .alert-info, .alert-error {
  position: relative;
  margin-bottom: 16px;
  padding: 12px 16px 12px 44px;
  border: 1px solid rgba(0,0,0,.14);
  border-left: 5px solid rgba(0,0,0,.32);   /* bold accent bar = a deeper shade of the fill */
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: #fff;
  background-color: var(--c-text-subtle);        /* neutral fallback (no type modifier) */
  background-image: linear-gradient(100deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 52%, rgba(0,0,0,.045) 100%);
  box-shadow: var(--shadow-sm);
  text-shadow: 0 1px 1px rgba(0,0,0,.16);
}

/* auto status icon */
.callout::before, .alert::before,
.callout-success::before, .callout-danger::before, .callout-warning::before, .callout-info::before,
.alert-success::before, .alert-danger::before, .alert-warning::before, .alert-info::before, .alert-error::before {
  position: absolute;
  left: 16px;
  top: 13px;
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
  font-weight: 900;
  font-size: 15px;
  line-height: 1.4;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal; font-variant: normal; text-rendering: auto;
}

/* type: vivid fill + matching icon (reuses the badge palette, dimmed in dark) */
.callout-success, .alert-success { background-color: var(--c-bg-green-active); }
.callout-danger,  .alert-danger, .alert-error { background-color: var(--c-bg-red-active); }
.callout-warning, .alert-warning { background-color: var(--c-bg-orange-active); }
.callout-info,    .alert-info    { background-color: var(--c-info-active); }

.callout-success::before, .alert-success::before { content: "\f058"; }              /* circle-check */
.callout-danger::before,  .alert-danger::before, .alert-error::before { content: "\f06a"; } /* circle-exclamation */
.callout-warning::before, .alert-warning::before { content: "\f071"; }              /* triangle-exclamation */
.callout-info::before,    .alert-info::before    { content: "\f05a"; }              /* circle-info */

/* inner elements on the solid fill */
.callout > h4, .alert > h4 { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; color: inherit; }
.callout > p:last-child, .alert > p:last-child { margin: 0; }
.callout b, .callout strong, .alert b, .alert strong { font-weight: 700; color: inherit; }
.callout a, .alert a { color: #fff; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.callout a:hover, .alert a:hover { color: rgba(255,255,255,.82); }
.callout code, .alert code {
  background: rgba(255,255,255,.22); color: #fff; text-shadow: none;
  padding: 1px 5px; border-radius: 4px; font-size: 12.5px;
}
.callout.no-margin, .alert.no-margin { margin: 0; }

/* Support banner variant */
.support-callout {
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.support-callout.alert,
.alert.bg-red.support-callout {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  flex-direction: column;
  position: relative;
  padding-right: 32px;
}
.support-callout.alert .pull-right {
  position: absolute;
  top: 8px;
  right: 10px;
  color: inherit;
  opacity: .75;
}
.support-callout .support-user {
  font-size: 12px;
  opacity: .85;
  margin-left: auto;
}

/* 11. ALERTS — styled together with callouts in section 10 (shared bright system) */

/* 12. BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--h-md);
  padding: 0 16px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
  -webkit-user-select: none;
  user-select: none;
  transition: background .12s, border-color .12s, box-shadow .12s, color .12s;
  appearance: none;
  position: relative;
  flex-shrink: 0;
}
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn:focus { outline: none; }
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* btn-flat: legacy AdminLTE no-shadow class */
.btn-flat { box-shadow: none !important; }

/* Form-block toggle buttons (btn-xs btn-block visible-xs/sm) — flush corners to glue to the panel below */
.btn-block.btn-xs.visible-xs,
.btn-block.btn-xs.visible-sm { border-radius: 0 !important; }

.btn-xs { height: var(--h-xs); padding: 0 8px;  font-size: 11px; border-radius: var(--radius-sm); gap: 4px; }
.btn-sm { height: var(--h-sm); padding: 0 11px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-lg { height: var(--h-lg); padding: 0 22px; font-size: 15px; border-radius: var(--radius); }
.btn-block { display: flex; width: 100%; }
.btn-block + .btn-block { margin-top: 4px; }

/* Compact table cells: flush buttons/inputs */
td.compact-td .btn, td.no-padding .btn { border-radius: 0 !important; }
td.no-padding .form-control, td.no-padding select { border-radius: 0 !important; }

.btn-default {
  background: var(--c-surface);
  border-color: var(--c-border-strong);
  color: var(--c-text);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.7);
}
.btn-default:hover {
  background: var(--c-surface-alt);
  border-color: var(--c-border-strong);
  color: var(--c-text);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  text-decoration: none;
}
.btn-default:active {
  background: var(--c-border);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.07);
  text-decoration: none;
}
@media (prefers-color-scheme: dark) {
  .btn-default { box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03); }
  .btn-default:hover { box-shadow: 0 1px 4px rgba(0,0,0,.45); }
}

.btn-danger, .btn-primary, .btn-success, .btn-info, .btn-warning {
  box-shadow: 0 1px 2px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-danger:active,
.btn-primary:active,
.btn-success:active,
.btn-info:active,
.btn-warning:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,.18);
}

.btn-danger {
  background: var(--c-danger);
  border-color: #ba3030;
  color: #fff;
}
.btn-danger:hover { background: #ba3030; border-color: #a52828; color: #fff; box-shadow: 0 2px 6px rgba(204,56,56,.3), inset 0 1px 0 rgba(255,255,255,.1); text-decoration: none; }
.btn-danger:active { background: #a52828; border-color: #a52828; }

.btn-primary {
  background: var(--c-primary);
  border-color: #3462c8;
  color: #fff;
}
.btn-primary:hover { background: #3462c8; border-color: #2c55b5; color: #fff; box-shadow: 0 2px 6px rgba(64,112,216,.3), inset 0 1px 0 rgba(255,255,255,.1); text-decoration: none; }
.btn-primary:active { background: #2c55b5; border-color: #2c55b5; }

.btn-success {
  background: var(--c-success);
  border-color: #198643;
  color: #fff;
}
.btn-success:hover { background: #198643; border-color: #157039; color: #fff; box-shadow: 0 2px 6px rgba(29,150,80,.3), inset 0 1px 0 rgba(255,255,255,.1); text-decoration: none; }
.btn-success:active { background: #157039; border-color: #157039; }

.btn-info {
  background: var(--c-info);
  border-color: #0e7490;
  color: #fff;
}
.btn-info:hover { background: #0891b2; border-color: #155e75; color: #fff; box-shadow: 0 2px 6px rgba(8,145,178,.35), inset 0 1px 0 rgba(255,255,255,.1); text-decoration: none; }
.btn-info:active { background: #0e7490; border-color: #155e75; }

.btn-warning {
  background: var(--c-warning);
  border-color: #b07814;
  color: #fff;
}
.btn-warning:hover { background: #b07814; border-color: #9c6a11; color: #fff; box-shadow: 0 2px 6px rgba(196,136,24,.3), inset 0 1px 0 rgba(255,255,255,.1); text-decoration: none; }
.btn-warning:active { background: #9c6a11; border-color: #9c6a11; }

@media (prefers-color-scheme: dark) {
  .btn-danger, .btn-primary, .btn-success, .btn-info, .btn-warning {
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
  }
  .btn-danger  { border-color: #a4464d; }
  .btn-primary { border-color: #4a6cb8; }
  .btn-success { border-color: #5f8f42; }
  .btn-info    { border-color: #3387a6; }
  .btn-warning { border-color: #a07a2c; }

  .btn-danger:hover  { background: #a4464d; border-color: #b8555c; box-shadow: 0 1px 4px rgba(240,113,120,.25); }
  .btn-primary:hover { background: #4a6cb8; border-color: #5a7cc9; box-shadow: 0 1px 4px rgba(130,170,255,.25); }
  .btn-success:hover { background: #5f8f42; border-color: #6b9c4a; box-shadow: 0 1px 4px rgba(195,232,141,.25); }
  .btn-info:hover    { background: #3387a6; border-color: #3794b6; box-shadow: 0 1px 4px rgba(137,221,255,.25); }
  .btn-warning:hover { background: #a07a2c; border-color: #b08733; box-shadow: 0 1px 4px rgba(255,203,107,.25); }

  .btn-danger:active  { background: #7a3238; border-color: #8f3b41; box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }
  .btn-primary:active { background: #334a80; border-color: #3f5c9e; box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }
  .btn-success:active { background: #426a2d; border-color: #528038; box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }
  .btn-info:active    { background: #256a85; border-color: #2e7f9e; box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }
  .btn-warning:active { background: #75561d; border-color: #8f6b26; box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }
}

.btn-group { display: inline-flex; }
.btn-group > .btn { border-radius: 0; border-right-width: 0; box-shadow: none; }
.btn-group > .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.btn-group > .btn:last-child  { border-radius: 0 var(--radius) var(--radius) 0; border-right-width: 1px; }
.btn-group > .btn:only-child  { border-radius: var(--radius); border-right-width: 1px; }

.btn-group-justified { display: flex; width: 100%; }
.btn-group-justified > .btn {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: none;
}
.btn-group-justified > .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.btn-group-justified > .btn:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }

.btn-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.btn-toolbar > .btn-group { margin-right: 4px; }

/* Persisted .active class on a plain button/anchor — GET-navigation toggles and filters
   (e.g. a Mine/All switch, a Today/7 days/30 days quick-range row), not the JS-driven
   [data-toggle=buttons] radio/checkbox component below. Distinct from the :active
   mouse-down pseudo above: this stays on while the option is the current selection. */
.btn-default.active {
  background: var(--accent);
  border-color: var(--accent-active);
  color: var(--accent-text);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.15);
}
.btn-default.active:hover { background: var(--accent-hover); color: var(--accent-text); }

.btn-danger.active,
.btn-primary.active,
.btn-success.active,
.btn-info.active,
.btn-warning.active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,.18);
}
.btn-danger.active  { background: #a52828; border-color: #a52828; }
.btn-primary.active { background: #2c55b5; border-color: #2c55b5; }
.btn-success.active { background: #157039; border-color: #157039; }
.btn-info.active    { background: #0e7490; border-color: #155e75; }
.btn-warning.active { background: #9c6a11; border-color: #9c6a11; }

@media (prefers-color-scheme: dark) {
  .btn-danger.active  { background: #7a3238; border-color: #8f3b41; box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }
  .btn-primary.active { background: #334a80; border-color: #3f5c9e; box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }
  .btn-success.active { background: #426a2d; border-color: #528038; box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }
  .btn-info.active    { background: #256a85; border-color: #2e7f9e; box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }
  .btn-warning.active { background: #75561d; border-color: #8f6b26; box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }
}

[data-toggle="buttons"] > label { cursor: pointer; }

[data-toggle="buttons"] > label input[type="checkbox"],
[data-toggle="buttons"] > label input[type="radio"] {
  position: absolute;
  clip: rect(0,0,0,0);
  width: 0; height: 0;
  opacity: 0;
  pointer-events: none;
}

[data-toggle="buttons"] > label:not(.active) {
  opacity: .45;
  box-shadow: none;
}
[data-toggle="buttons"] > label:not(.active):hover { opacity: .7; }

[data-toggle="buttons"] > label.active { opacity: 1; }
[data-toggle="buttons"] > label:focus  { outline: none; }

/* 13. LABELS & BADGES */
.label {
  display: inline-block;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  border-radius: 20px;
  color: #fff;
  vertical-align: baseline;
}
.label-default { background: var(--c-text-subtle); }
.label-primary  { background: var(--c-primary); }
.label-success  { background: var(--c-success); }
.label-warning  { background: var(--c-warning); }
.label-danger   { background: var(--c-danger); }
.label-inline   { border-radius: var(--radius-sm); }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  font-size: 10px; font-weight: 600;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 100px;
  vertical-align: middle;
}

/* 14. PROGRESS BARS */
.progress {
  display: flex;
  align-items: stretch;
  height: 14px;
  background: var(--c-border);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 12px;
}
.progress-sm { height: 8px; }
.progress-xs { height: 4px; }

.progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 100px;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0 6px;
  font-size: 10px; color: #fff; font-weight: 600;
  min-width: 0;
  transition: width .4s ease;
}
.progress-bar-primary { background: var(--c-primary); }
.progress-bar-success { background: var(--c-success); }
.progress-bar-info    { background: var(--c-info); }
.progress-bar-warning { background: var(--c-warning); }
.progress-bar-danger  { background: var(--c-danger); }
.progress-bar-yellow  { background: var(--c-warning); }
.progress-bar-green   { background: var(--c-success); }
.progress-bar-red     { background: var(--c-danger); }
.progress-bar-blue    { background: #3182ce; }
.progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255,255,255,.15) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,.15) 50%,
    rgba(255,255,255,.15) 75%, transparent 75%, transparent
  );
  background-size: 14px 14px;
}
.progress.active .progress-bar { animation: progress-stripes 1s linear infinite; }
@keyframes progress-stripes {
  from { background-position: 14px 0; }
  to   { background-position: 0 0; }
}

/* 15. TABLES */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--c-text);
}
.table th {
  text-align: center;
  vertical-align: middle;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.table > thead > tr:last-child > th,
.table > thead > tr:last-child > td { border-bottom: 2px solid var(--c-border); }
.table > thead > tr > th,
.table > tfoot > tr > th { vertical-align: middle; }
.table > thead > tr > td {
  background: var(--c-bg);
  color: var(--c-text-muted);
  font-size: 12px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--c-border);
  padding: 5px 8px;
}
/* Vertical padding matters only for cells whose content wraps to several lines (offer.tpl's
   source list, description cells) — `height` acts as a MIN height on a table cell, so
   single-line rows stay exactly var(--h-md) tall and nothing else shifts. Cells holding a
   full-width button always carry .no-padding, so no button gets inset by this. */
.table td {
  height: var(--h-md);
  padding: 6px 10px;
  vertical-align: middle;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.table > tfoot > tr > td,
.table > tfoot > tr > th {
  background: var(--c-bg);
  font-weight: 600;
}
.table > tfoot > tr:first-child > td,
.table > tfoot > tr:first-child > th {
  border-top: 2px solid var(--c-border);
}
.table:last-child tbody tr:last-child td { border-bottom: none; }

.table-striped > tbody > tr:nth-child(even) > td { background: var(--c-surface-alt); }
.table-hover > tbody > tr:hover > td { background: var(--accent-light); transition: background .1s; }
.table-bordered { border: 1px solid var(--c-border); }
.table-bordered td, .table-bordered th { border: 1px solid var(--c-border); }
/* Condensed */
.table-condensed td { height: var(--h-sm); padding: 0 8px; }
.table-condensed th { padding: 5px 8px; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }

.table td.sub     { text-align: center; font-size: 11px; line-height: 1.2; height: auto; padding: 5px 8px; }
.table td.head    { font-weight: 600; }
/* Empty state — markup gives one text node (`<td class="noitems">{noitems}</td>`, no
   template edits allowed), so the icon is a pure ::before, same idiom as .alert::before. */
.table td.noitems { text-align: center; height: auto; padding: 40px 24px; color: var(--c-text-muted); font-size: 13px; }
.table td.noitems::before {
  content: "\f49e";                                  /* box-open */
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--c-surface-alt);
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
  font-weight: 900;
  font-style: normal;
  font-size: 18px;
  line-height: 48px;
  color: var(--c-text-subtle);
}
.table td.no-padding { padding: 0; }
.table td.cb      { padding: 0 6px; width: 30px; text-align: center; }
.table td.toolong { word-wrap: break-word; word-break: break-all; max-width: 200px; }
.table td.compact-td { white-space: nowrap; width: 1px; padding: 0; }

/* alert-* on a table cell = a status strip row, NOT a floating alert box.
   Only offer.tpl uses this (the "exclusive offer" / "top offer" rows above the offer's
   info list). Left as-is, `.table td` beat the alert component on both padding and
   background: the ::before icon landed on top of the first letter, and the white alert
   text sat on the cell's white surface — invisible in light mode. So: restore the fill,
   give the icon its own gutter aligned with the fa-fw icons of the rows below, and drop
   the box chrome (radius / shadow / accent bar) that makes no sense mid-table.
   `.padding-15` is !important in the markup, hence !important here. */
.table td.alert-success, .table td.alert-danger, .table td.alert-warning,
.table td.alert-info, .table td.alert-error {
  padding: 11px 14px 11px 34px !important;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,.14);
  border-radius: 0;
  box-shadow: none;
}
.table td.alert-success { background: var(--c-bg-green-active); }
.table td.alert-danger, .table td.alert-error { background: var(--c-bg-red-active); }
.table td.alert-warning { background: var(--c-bg-orange-active); }
.table td.alert-info    { background: var(--c-info-active); }
.table td.alert-success::before, .table td.alert-danger::before, .table td.alert-warning::before,
.table td.alert-info::before, .table td.alert-error::before {
  left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px;
}

/* 16. FORMS */
.form-group { margin-bottom: 14px; position: relative; }
.form-group-last { margin-bottom: 0; }
.form-hidden { display: none !important; }

.control-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px; font-weight: 600;
  color: var(--c-text-muted);
  letter-spacing: 0;
}

/* Stacked label above its control: restore the air Bootstrap 3 gave every label.
   inline-block, NOT block — the "empty-value" inline-checkbox must stay on the
   title label's line (anal/stats filter fields). */
.form-group > label,
.form-group.row > [class*="col-"] > label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
}
/* wrapping labels keep their flex layout (gap between box and text) */
.form-group > label.inline-checkbox,
.form-group > label.checkbox-inline,
.form-group > label.radio-inline { display: inline-flex; }
/* contexts that manage their own vertical rhythm */
.form-inline .form-group > label,
.form-group > label.margin-hh { margin-bottom: 0; }

.form-control {
  display: block;
  width: 100%;
  height: var(--h-md);
  padding: 0 10px;
  font-size: 13px;
  font-family: var(--font);
  line-height: var(--h-md);
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
  -webkit-appearance: none;
}
.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.form-control::placeholder { color: var(--c-text-subtle); }
.form-control[disabled], .form-control[readonly] {
  background: var(--c-surface-alt);
  color: var(--c-text-muted);
  cursor: not-allowed;
}
select.form-control { cursor: pointer; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
textarea.form-control { height: auto; min-height: 80px; resize: vertical; padding: 8px 10px; line-height: 1.5; }

.input-sm { height: var(--h-sm) !important; line-height: var(--h-sm) !important; padding: 0 8px !important; font-size: 12px !important; }

/* Input group */
.input-group { display: flex; position: relative; }
.input-group .form-control {
  flex: 1;
  border-radius: 0;
  z-index: 1;
}
.input-group .form-control:focus { z-index: 3; }
.input-group > .form-control:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group > .form-control:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.input-group-addon {
  display: flex; align-items: center;
  padding: 0 10px;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: 13px;
  white-space: nowrap;
  z-index: 2;
}
.input-group-addon:first-child {
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.input-group-addon:last-child {
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.input-group-btn { display: flex; z-index: 2; }
.input-group-btn .btn { border-radius: 0; }
.input-group-btn:first-child .btn {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border-right-width: 0;
}
.input-group-btn:last-child .btn {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-left-width: 0;
}

/* Checkboxes & radios */
.checkbox, .radio { margin: 4px 0 8px; }
.checkbox label, .radio label {
  display: block;
  padding-left: 22px;
  position: relative;
  cursor: pointer;
  font-size: 13px; font-weight: 400;
  color: var(--c-text);
  min-height: 20px;
  line-height: 1.5;
}
.checkbox label > input[type="checkbox"],
.radio   label > input[type="radio"] {
  position: absolute;
  left: 0; top: 3px;
  width: 14px; height: 14px;
  margin: 0;
  flex-shrink: 0;
}

.checkbox-inline, .radio-inline, .inline-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--c-text);
  position: static;
  padding-left: 0;
}
.checkbox-inline input, .radio-inline input, .inline-checkbox input {
  position: static;
  width: 14px; height: 14px;
  margin: 0; flex-shrink: 0;
}
.checkbox > label.inline-checkbox,
.checkbox > label.checkbox-inline,
.radio   > label.radio-inline {
  display: inline-flex !important;
  padding-left: 0 !important;
  position: static !important;
  min-height: 0;
  margin-bottom: 2px;
}
.checkbox > label.inline-checkbox > input,
.checkbox > label.checkbox-inline > input,
.radio   > label.radio-inline   > input {
  position: static !important;
  margin: 0 !important;
}

.form-inline .checkbox, .form-inline .radio {
  display: inline-flex; align-items: center; margin: 0 10px 0 0;
}
.form-inline .checkbox label, .form-inline .radio label {
  display: inline-flex; align-items: center;
  gap: 6px; padding-left: 0; position: static; min-height: 0;
}
.form-inline .checkbox label > input, .form-inline .radio label > input {
  position: static; margin: 0;
}
.inline-checkbox {
  display: inline-flex; align-items: center;
  gap: 7px; margin-right: 14px;
}
.form-checkbox { margin: 4px 0; }
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
  width: 14px; height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Validation states */
.has-error   .form-control { border-color: var(--c-danger-fg); }
.has-success .form-control { border-color: var(--c-success-fg); }
.has-warning .form-control { border-color: var(--c-warning-fg); }
.has-error   .form-control:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
.has-success .form-control:focus { box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.has-error   .control-label { color: var(--c-danger-fg); }
.has-success .control-label { color: var(--c-success-fg); }
.has-warning .control-label { color: var(--c-warning-fg); }
.has-error   .help-block { color: var(--c-danger-fg); }
.has-success .help-block { color: var(--c-success-fg); }
.has-warning .help-block { color: var(--c-warning-fg); }

.has-feedback { position: relative; }
.form-control-feedback {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 14px;
  z-index: 2;
}
.has-success .form-control-feedback { color: var(--c-success-fg); }
.has-error   .form-control-feedback { color: var(--c-danger-fg); }
.has-warning .form-control-feedback { color: var(--c-warning-fg); }

.help-block {
  display: block;
  font-size: 12px;
  color: var(--c-text-muted);
  margin-top: 4px; margin-bottom: 0;
}

.form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 10px;
}
.form-inline .form-group { margin-bottom: 0; display: flex; align-items: center; gap: 6px; }
.form-inline .control-label { margin-bottom: 0; white-space: nowrap; }
.form-inline .form-control { width: auto; }

.form-inline-block { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.form-inline-block .form-group { margin-bottom: 0; }
/* Keep flex when .in is added by JS */
.form-inline-block.collapse.in { display: flex !important; }
/* Inline checkboxes */
.btn .inline-checkbox,
.form-inline-block .checkbox,
.form-inline-block .radio { display: inline-flex; align-items: center; margin: 0; }
.form-inline-block .checkbox label,
.form-inline-block .radio label { margin: 0; }

.form-horizontal .form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-right: -15px;
  margin-left:  -15px;
}
.form-horizontal .control-label {
  text-align: right;
  padding-top: 9px;
  padding-right: 15px;
  padding-left:  15px;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .form-horizontal .control-label { text-align: left; }
}

input.no-arrows::-webkit-outer-spin-button,
input.no-arrows::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.no-arrows { -moz-appearance: textfield; }

/* 17. MODALS */
.modal {
  position: fixed; inset: 0;
  z-index: 1050;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 30px 20px;
}
/* Tint + blur live on a ::before layer, NOT on .modal itself.
   `backdrop-filter` on an element makes it the containing block for every
   position:fixed descendant — which turns the fixed select2 dropdown wrapper
   into an absolutely-positioned box inside the modal's scroll content, so the
   dropdown drifts up by scrollTop once the modal is scrolled. Keeping the
   filter on the pseudo-element leaves .modal filter-free, so fixed children
   resolve against the viewport again. See docs/11-gotchas.md.
   The blur is STATIC so the compositor blurs the backdrop once and caches it;
   the open/close fade animates background-color only, never the filtered
   layer's opacity — so the blur is not recomputed per frame. */
.modal::before {
  content: '';
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
/* Open: dark tint fades in (blur is instant+static), dialog pops in */
.modal.in        { display: block; }
.modal.modal-out { display: block; }
.modal.in::before        { animation: modal-bg-in .25s ease-out; }
.modal.modal-out::before { animation: modal-bg-out .2s ease-in forwards; }

.modal-dialog {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  width: 100%;
  max-width: 520px;
  animation: modal-in .32s cubic-bezier(.34,1.56,.64,1);
  position: relative;
  z-index: 1;                     /* paint above the ::before tint layer */
  margin: 0 auto;
}
.modal.modal-out .modal-dialog { animation: modal-out .2s ease-in forwards; }

/* Fade the tint via background-color (not opacity) so the static blur isn't re-run each frame */
@keyframes modal-bg-in  { from { background-color: rgba(0,0,0,0); } to { background-color: rgba(0,0,0,.55); } }
@keyframes modal-bg-out { from { background-color: rgba(0,0,0,.55); } to { background-color: rgba(0,0,0,0); } }
@keyframes modal-in {
  from { opacity: 0; transform: scale(.94) translateY(-18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes modal-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: scale(.96) translateY(-10px); }
}
.modal-sm { max-width: 320px; }
.modal-lg { max-width: 860px; }

.modal-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
  gap: 12px;
}
/* Title left, close right via order */
.modal-header .modal-title { order: 1; flex: 1; font-size: 15px; font-weight: 600; color: var(--c-text); margin: 0; }
.modal-header .close      { order: 2; flex-shrink: 0; background: none; border: none; font-size: 22px; line-height: 1; color: var(--c-text-muted); cursor: pointer; padding: 0; opacity: .6; transition: opacity .1s; }
.modal-header .close:hover { opacity: 1; color: var(--c-text); }
/* Legacy .close standalone */
.close {
  background: none; border: none;
  font-size: 22px; line-height: 1;
  color: var(--c-text-muted);
  cursor: pointer; padding: 0;
  opacity: .6;
  transition: opacity .1s;
}
.close:hover { opacity: 1; color: var(--c-text); }

.modal-body { padding: 20px; }
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  background: var(--c-surface-alt);
  flex-shrink: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.modal-footer.no-padding { padding: 0; }
.modal-footer.no-padding .btn, .modal-footer.no-padding .btn-block {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  width: 100%; display: flex; justify-content: center;
}

/* 18. DROPDOWNS */
.dropdown, .dropup { position: relative; }
.dropdown-menu {
  position: absolute;
  top: 100%; left: 0;
  z-index: 1040;
  min-width: 160px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 4px 0;
  margin: 2px 0 0;
  list-style: none;
  display: none;
}
.dropdown-menu.pull-right { left: auto; right: 0; }
.open > .dropdown-menu { display: block; }

.dropdown-menu > li > a {
  display: block;
  padding: 7px 14px;
  color: var(--c-text);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.dropdown-menu > li > a:hover { background: var(--c-surface-alt); color: var(--c-text); }
.dropdown-menu > li.divider { height: 1px; background: var(--c-border); margin: 4px 0; }
.dropdown-menu > li.active > a { background: var(--accent); color: var(--accent-text); }
.caret {
  display: inline-block;
  width: 0; height: 0;
  border-top: 4px dashed;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  vertical-align: middle;
  margin-left: 3px;
  opacity: .7;
}
.dropup .dropdown-menu { top: auto; bottom: 100%; margin-bottom: 2px; }
.dropup .caret { border-top: 0; border-bottom: 4px dashed; }

/* 18b. TOOLTIPS
   Built by skin.js ($.fn.tooltip) as .tooltip.<placement> > .tooltip-arrow +
   .tooltip-inner, appended to <body>. position:fixed is not decoration — skin.js
   measures the tip before placing it, and a tip that is measured in normal flow
   grows the document and makes the page shake on every hover. */
.tooltip {
  position: fixed;
  z-index: 1070;
  display: block;
  max-width: 260px;
  padding: 0;
  margin: 0;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  word-wrap: break-word;
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s ease-out;
}
.tooltip.in { opacity: 1; }
.tooltip-inner {
  display: block;
  padding: 5px 9px;
  color: var(--tooltip-text);
  background: var(--tooltip-bg);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.tooltip-arrow {
  position: absolute;
  width: 0; height: 0;
  border-style: solid;
  border-color: transparent;
}
.tooltip.top    .tooltip-arrow { bottom: -5px; left: 50%; margin-left: -5px; border-width: 5px 5px 0;   border-top-color: var(--tooltip-bg); }
.tooltip.bottom .tooltip-arrow { top: -5px;    left: 50%; margin-left: -5px; border-width: 0 5px 5px;   border-bottom-color: var(--tooltip-bg); }
.tooltip.left   .tooltip-arrow { right: -5px;  top: 50%;  margin-top: -5px;  border-width: 5px 0 5px 5px; border-left-color: var(--tooltip-bg); }
.tooltip.right  .tooltip-arrow { left: -5px;   top: 50%;  margin-top: -5px;  border-width: 5px 5px 5px 0; border-right-color: var(--tooltip-bg); }

/* 19. NAVIGATION (pills, stacked, breadcrumb, pagination) */
.nav {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0; margin: 0 0 12px;
  gap: 2px;
}
.nav > li > a {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--c-text-muted);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background .1s, color .1s;
}
.nav > li > a:hover { background: var(--c-surface-alt); color: var(--c-text); text-decoration: none; }
.nav > li.active > a {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 500;
}
.nav-pills > li > a { border-radius: var(--radius-sm); }
.nav-stacked {
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
}
.nav-stacked > li {
  border-bottom: 1px solid var(--c-border);
}
.nav-stacked > li:last-child { border-bottom: none; }
.nav-stacked > li > a {
  border-radius: 0;
  justify-content: flex-start;
  padding: 10px 14px;
}
.nav-stacked > li > a .pull-right { float: none !important; margin-left: auto; order: 1; }
.nav-stacked > li.active > a { background: var(--accent); color: var(--accent-text); }

/* Boxed pills — a page's primary segment switcher (e.g. a dashboard's tab row). Same size and
   active-state accent fill as the plain pills above — the only difference is the enclosing
   track: a bordered, tinted panel that visually separates the switcher from the bare page,
   with room for a trailing badge or quota string. */
.nav-pills-boxed {
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 4px;
  /* Always a single scrollable line, at every width — how many tabs fit depends on their
     label lengths, not on a fixed screen-width breakpoint, so wrapping is never a safe
     fallback even on a mid-size desktop window. */
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-pills-boxed::-webkit-scrollbar { display: none; }
.nav-pills-boxed > li { flex: 0 0 auto; }

/* A lighter hover fill than the track itself — .nav's shared hover uses --c-surface-alt, the
   same tone as the track background here, so it would otherwise disappear. Scoped to inactive
   items: the active pill is already accent-filled, and this light fill would wash out its
   white text on top of it. */
.nav-pills-boxed > li:not(.active) > a:hover { background: var(--c-surface); }
/* The active pill gets its own hover shade — the accent's own darker step, so it stays legible
   with --accent-text on top instead of fading toward the light hover fill above. */
.nav-pills-boxed > li.active > a:hover { background: var(--accent-hover); }

/* Count badge — the sidebar's unread .label.label-danger look, sitting inline after the label
   like the quota string below (a corner overlay read as noisy at this size). */
.nav-pills-boxed .nav-pills-badge { margin-left: 2px; font-size: 10px; }

/* Inline quota text ("4/100") — plain muted text after the label, not a badge. Present in both
   states; dims further against the solid accent fill so it stays secondary to the label. */
.nav-pills-boxed .nav-pills-quota {
  font-size: 11px;
  font-weight: 400;
  color: var(--c-text-subtle);
}
.nav-pills-boxed > li.active > a .nav-pills-quota { color: var(--accent-text); opacity: .8; }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  padding: 0; margin: 0 0 14px;
  font-size: 12px;
  color: var(--c-text-muted);
  background: none;
}
.breadcrumb > li + li::before { content: '/'; margin-right: 4px; color: var(--c-border-strong); }
.breadcrumb > li.active { color: var(--c-text); }
/* Skin label <small>RED</small> in breadcrumbs */
.breadcrumb small {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .55;
  vertical-align: middle;
  margin-left: 1px;
}
/* In the page header the breadcrumb sits inline on the right, no bottom margin */
.content-header > .breadcrumb { margin: 0; }

/* Tablet & mobile: lift it above the title as a bordered pill that scrolls
   horizontally under the finger instead of wrapping to several lines. */
@media (max-width: 991px) {
  .content-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .content-header > .breadcrumb {
    order: -1;                          /* sits above the <h1> */
    flex-wrap: nowrap;                  /* one line, never stack */
    overflow-x: auto;                   /* swipe horizontally */
    -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */
    scrollbar-width: none;              /* Firefox: hide the bar */
    padding: 8px 12px;
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
  }
  .content-header > .breadcrumb::-webkit-scrollbar { display: none; }
  .content-header > .breadcrumb > li { flex: 0 0 auto; white-space: nowrap; }
}

/* Pagination */
.pagination, .pages {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  list-style: none;
  padding: 0; margin: 0;
}
.pagination > li > a, .pages > li > a,
.pagination > li > span, .pages > li > span {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 30px; height: 30px;
  padding: 0 6px;
  font-size: 12px;
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  background: var(--c-surface);
}
.pagination > li > a:hover, .pages > li > a:hover {
  background: var(--c-surface-alt);
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}
.pagination > li.active > a, .pages > li.active > a,
.pagination > li.active > span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.pagination > li.disabled > a, .pages > li.disabled > a { opacity: .4; pointer-events: none; }

/* nav.lister / nav.pages = wrapper with .pagination list + .shown text */
/* DOM order is pagination-first, but .shown must appear on the left visually */
nav.pages {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
nav.lister .shown,
nav.pages .shown {
  order: -1;
}

/* 20. WIDGET USER-2 */
.widget-user-2 { overflow: hidden; }
.widget-user-header {
  padding: 18px 16px;
  background: var(--accent);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
}
.widget-user-image {
  grid-row: 1 / 3;
  align-self: center;
}
.widget-user-image img {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25);
  object-fit: cover;
}
.widget-user-username { font-size: 16px; font-weight: 600; color: #fff; margin: 0; align-self: end; }
.widget-user-desc     { font-size: 12px; color: rgba(255,255,255,.78); margin: 0; align-self: start; }

.widget-user-2 .box-footer.no-padding > .nav-stacked { margin: 0; }
.widget-user-2 .box-footer.no-padding > .nav-stacked > li {
  border-bottom: 1px solid var(--c-border);
}
.widget-user-2 .box-footer.no-padding > .nav-stacked > li:last-child { border-bottom: none; }
.widget-user-2 .box-footer.no-padding > .nav-stacked > li > a {
  border-radius: 0;
  padding: 9px 16px;
  font-size: 13px;
}

/* 21. OFFER FLAT LIST */
.offers-flat {
  display: block;
  list-style: none;
  padding: 0; margin: 0 0 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.offer-flat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  transition: background .1s;
}
.offer-flat:last-child { border-bottom: none; }
.offer-flat:nth-child(even) { background: var(--c-surface-alt); }
.offer-flat:hover { background: var(--accent-light); }

.offer-flat-img {
  flex: 0 0 110px;
  text-align: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 8px;
}
.offer-flat-img a, .offer-flat-img img { display: block; max-width: 100%; margin: 0 auto; }
.offer-flat-img img { border-radius: var(--radius-sm); }

.offer-flat-info { flex: 1 1 auto; min-width: 0; }
.offer-flat-title { }
.offer-flat-name  { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.offer-flat-name a { color: var(--c-text); text-decoration: none; }
.offer-flat-name a:hover { color: var(--accent); }
.offer-flat-cat   { margin: 5px 0; display: flex; flex-wrap: wrap; gap: 4px; }
.offer-flat-cat a {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.6;
  transition: background .15s;
}
.offer-flat-cat a:hover { background: var(--c-bg); }
.offer-flat-cat a.text-danger  { background: var(--c-danger-bg);  border-color: var(--c-danger-border); }
.offer-flat-cat a.text-success { background: var(--c-success-bg); border-color: var(--c-success-border); }
.offer-flat-stats { font-size: 12px; color: var(--c-text-muted); }
.offer-flat-stats span { margin-right: 8px; }
.offer-flat-geo, .offer-flat-geos { font-size: 12px; color: var(--c-text-muted); }

.offer-flat-money {
  flex: 0 0 90px;
  text-align: center;
  padding-left: 16px;
  border-left: 1px solid var(--c-border);
}
.offer-flat-pay   { font-size: 18px; font-weight: 700; color: var(--c-success-fg); margin-top: 4px; }

.offer-flat-action {
  flex: 0 0 130px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 16px;
  border-left: 1px solid var(--c-border);
}
.offer-flat-action span { display: block; }

.offer-list-info.entry {
  padding: 8px 12px;
  margin-bottom: 0;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.offer-logo  { display: block; width: 100%; height: auto; border-radius: var(--radius) var(--radius) 0 0; max-height: 300px; object-fit: contain; background-color: white; }
.offer-cat-info { font-size: 12px; color: var(--c-text-muted); }

@media (max-width: 800px) {
  .offer-flat { flex-wrap: wrap; }
  .offer-flat-img    { flex: 0 0 100%; }
  .offer-flat-money  { flex: 0 0 100%; text-align: left; display: flex; justify-content: space-between; flex-direction: row-reverse; border-left: none; padding-left: 0; }
  .offer-flat-pay    { font-size: 16px; margin: 0; }
  .offer-flat-action { flex: 0 0 100%; flex-direction: row; border-left: none; padding-left: 0; }
  .offer-flat-action span { flex: 1; }
}
@media (min-width: 1200px) {
  .offer-flat-info { display: flex; align-items: center; }
  .offer-flat-title { flex: 1 1 auto; }
  .offer-flat-stats { flex: 0 0 80px; margin-left: 16px; }
  .offer-flat-stats span { display: block; margin: 3px 0; }
  .offer-flat-money { flex: 0 0 120px; }
}

/* 22. NEWS */
.news-entry {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}
.news-entry-image { flex: 0 0 120px; }
.news-entry-image img { width: 100%; border-radius: var(--radius); display: block; }
.news-entry-text { flex: 1; min-width: 0; }
.news-entry-text h4 { margin: 0 0 5px; }

/* 23. STATUS INDICATORS */
.status, a.status,
.type,   a.type {
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
  font-size: 12.5px;
}

.status::before, .comment::before, .order-comp::before, .order-source::before,
.wait::before, .ok::before, .phone::before, .mobile::before, .mobicon::before, .type::before {
  padding-right: 5px;
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
  font-weight: var(--fa-style, 900);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-style: normal; font-variant: normal;
  line-height: 1; text-rendering: auto;
}
.mobicon::before { padding: 0; }
.empty-value { font-weight: 400; margin-left: 4px; color: var(--c-text-subtle); }

.status0,  a.status0  { color: var(--c-orange); }
.status1,  a.status1  { color: var(--c-orange); }
.status2,  a.status2  { color: var(--c-success-fg); }
.status3,  a.status3  { color: var(--c-primary-fg); }
.status4,  a.status4  { color: var(--c-text-muted); }
.status5,  a.status5  { color: var(--c-danger-fg); }
.status6,  a.status6  { color: var(--c-success-fg); }
.status7,  a.status7  { color: var(--c-text-muted); }
.status8,  a.status8  { color: var(--c-primary-fg); }
.status9,  a.status9  { color: var(--c-orange); }
.status10, a.status10 { color: var(--c-success-fg); }
.status11, a.status11 { color: var(--c-indigo); }
.status12, a.status12 { color: var(--c-danger-fg); }
.phase1, a.phase1 { color: var(--c-primary-fg); }
.phase2, a.phase2 { color: var(--c-text-muted); }

.status0::before  { content: "\f0d6"; }
.status1::before  { content: "\f06a"; }
.status2::before  { content: "\f021"; }
.status3::before  { content: "\f095"; }
.status4::before  { content: "\f017"; }
.status5::before  { content: "\f057"; }
.status6::before  { content: "\f0f2"; }
.status7::before  { content: "\f0e0"; }
.status8::before  { content: "\f0d1"; }
.status9::before  { content: "\f015"; }
.status10::before { content: "\f058"; }
.status11::before { content: "\f122"; }
.status12::before { content: "\f00d"; }

/* Flag / geo */
.flag, .flagicon { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; }
.flagname { padding: 0 4px; }
.flagname img { vertical-align: baseline; padding: 1px 2px 0 0; }
.flag-icon { display: inline-block; }

/* 24. LOGIN PAGE */
body.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--accent-active) 0%, var(--accent) 60%, var(--accent-hover) 100%);
  padding: 20px;
}
.login-box {
  width: 100%;
  max-width: 380px;
  animation: modal-in .2s ease;
}
.login-logo {
  text-align: center;
  margin-bottom: 20px;
  font-size: 32px;
  font-weight: 300;
  color: #fff;
}
.login-logo a { color: #fff; text-decoration: none; }
.login-box-body {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-overlay);
}
.login-box-msg {
  margin: 0 0 20px;
  text-align: center;
  color: var(--c-text-muted);
  font-size: 13.5px;
}
.social-auth-links { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.g-recaptcha { margin-bottom: 14px; display: flex; justify-content: center; }

/* 25. LOADING */
.lds-roller {
  display: inline-block;
  position: relative;
  width: 64px; height: 64px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
  transform-origin: 32px 32px;
}
.lds-roller div::after {
  content: '';
  display: block;
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin: -3px 0 0 -3px;
}
.lds-roller div:nth-child(1) { animation-delay: -0.036s; }
.lds-roller div:nth-child(1)::after { top: 50px; left: 50px; }
.lds-roller div:nth-child(2) { animation-delay: -0.072s; }
.lds-roller div:nth-child(2)::after { top: 54px; left: 44px; }
.lds-roller div:nth-child(3) { animation-delay: -0.108s; }
.lds-roller div:nth-child(3)::after { top: 57px; left: 36px; }
.lds-roller div:nth-child(4) { animation-delay: -0.144s; }
.lds-roller div:nth-child(4)::after { top: 58px; left: 29px; }
.lds-roller div:nth-child(5) { animation-delay: -0.180s; }
.lds-roller div:nth-child(5)::after { top: 57px; left: 22px; }
.lds-roller div:nth-child(6) { animation-delay: -0.216s; }
.lds-roller div:nth-child(6)::after { top: 54px; left: 15px; }
.lds-roller div:nth-child(7) { animation-delay: -0.252s; }
.lds-roller div:nth-child(7)::after { top: 50px; left: 11px; }
.lds-roller div:nth-child(8) { animation-delay: -0.288s; }
.lds-roller div:nth-child(8)::after { top: 44px; left: 8px; }
@keyframes lds-roller {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.overlay {
  position: absolute; inset: 0;
  background: rgba(255,255,255,.65);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  z-index: 10;
}
@media (prefers-color-scheme: dark) {
  .overlay { background: rgba(26,26,26,.75); }
}

/* 26. E404 */
.e404 {
  text-align: center;
  padding: 56px 20px;
}
.e404 h1 {
  font-size: 96px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin: 0 0 8px;
}
.e404 p {
  font-size: 20px;
  color: var(--c-text-muted);
  margin-bottom: 24px;
}

/* 27. MISC COMPONENTS */
.jumbotron {
  padding: 32px 24px;
  margin-bottom: 20px;
  border-radius: var(--radius-lg);
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
}
.jumbotron.bg-red-active { border: none; }
.jumbotron h1 { font-size: 40px; margin-bottom: 12px; }
.jumbotron p.lead { font-size: 16px; margin-bottom: 16px; }


/* Thumbnail */
.thumbnail {
  display: block;
  padding: 4px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  text-align: center;
}
.thumbnail.no-margin { margin: 0; }
/* Flat variant (offer cover): no frame — the image fills the column edge to edge so it
   lines up with the btn-block underneath. Keeps a small gap above that button. */
.thumbnail.flat { border: none; padding: 0; overflow: hidden; background: transparent; border-radius: var(--radius) !important; }
/* The gap to the "read more" button below lives on the button — the template puts
   .no-margin (margin: 0 !important) on the thumbnail itself, so it can't hold it. */
.thumbnail.flat + .btn { margin-top: 10px; }
.thumbnail img { display: block; max-width: 100%; margin: 0 auto; border-radius: calc(var(--radius) - 3px); }
.thumbnail.flat img { border-radius: var(--radius); max-height: 300px; object-fit: contain; }

/* Embed responsive */
.embed-responsive {
  position: relative; overflow: hidden;
  background: #000; border-radius: var(--radius);
}
.embed-responsive-16by9::before {
  content: ''; display: block; padding-top: 56.25%;
}
.embed-responsive iframe,
.embed-responsive video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: none;
}

/* Well */
.well {
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.well-sm { padding: 8px 12px; font-size: 12px; }
.well p:last-child { margin: 0; }

/* Panel */
.panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.panel-body { padding: 16px; }

/* Collapse */
.collapse { display: none; }
.collapse.in { display: block; }

/* Lister / pagination wrapper */
.lister {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}
.shown { font-size: 12px; color: var(--c-text-muted); }

/* Entry row */
.entry { padding: 10px 0; }

/* Mini widget lines */
.mwgt-title {
  padding: 10px 14px 4px;
  font-size: 12px; font-weight: 600;
  color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.mwgt-line {
  display: flex; align-items: center;
  padding: 4px 14px;
  font-size: 13px;
  color: var(--c-text);
}
.mwgt-line:last-child { padding-bottom: 10px; }
.mwgt-line abbr { color: var(--c-text-muted); font-size: 11px; text-decoration: none; margin-right: auto; }

.wd-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-border);
}
.wd-line:last-child { border-bottom: none; }

/* Audio player */
.callaudio {
  padding: 0; margin: 0;
  width: 100%; border-radius: 0;
  display: block;
}

/* 28. TEXT & COLOR UTILITIES */
.text-left    { text-align: left !important; }
.text-center  { text-align: center !important; }
.text-right   { text-align: right !important; }
.text-muted   { color: var(--c-text-muted) !important; }
.text-primary { color: var(--c-primary-fg) !important; }
.text-success { color: var(--c-success-fg) !important; }
.text-info    { color: var(--c-info-fg) !important; }
.text-warning { color: var(--c-warning-fg) !important; }
.text-danger  { color: var(--c-danger-fg) !important; }
.text-default { color: var(--c-text) !important; }

.black, a.black  { color: var(--c-text) !important; }
.grey,  a.grey   { color: var(--c-text-muted) !important; }
.red,   a.red    { color: var(--c-danger-fg) !important; }
.green, a.green  { color: var(--c-success-fg) !important; }
.blue,  a.blue   { color: var(--c-primary-fg) !important; }
.yellow,a.yellow { color: var(--c-warning-fg) !important; }

.fat    { font-weight: 700 !important; }
.xsmall { font-size: 70%; }
.flat   { border-radius: 0 !important; }

/* Spacing */
.no-padding { padding: 0 !important; }
.no-margin  { margin: 0 !important; }
.margin     { margin: 10px !important; }
.padding-15 { padding: 15px !important; }
.padding-10 { padding: 10px !important; }
.margin-hh  { margin-left: 10px; margin-right: 5px; }
.margin-hl  { margin-left: 7px; }
.margin-hr  { margin-right: 7px; }
.margin-vv  { margin-top: 5px; margin-bottom: 5px; }
.margin-vt  { margin-top: 5px; }
.margin-vb  { margin-bottom: 5px; }

/* Flex helpers */
.nice-line { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; }
.nice-line > * { margin-right: 5px; }
.nice-line > label { margin-bottom: 0; } /* inline flex row: no stacked-label gap */

/* Text utilities */
.autowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 29. FA ICON MAPPINGS */
.main-header .tracker .fai::before,     .main-sidebar .tracker .fai::before    { content: "\f074"; }
.main-header .track-flows .fai::before, .main-sidebar .track-flows .fai::before { content: "\f074"; }
.main-header .track-leads .fai::before, .main-sidebar .track-leads .fai::before { content: "\f07a"; }
.main-header .track-stats .fai::before, .main-sidebar .track-stats .fai::before { content: "\f1fe"; }
.main-header .track-anal .fai::before,  .main-sidebar .track-anal .fai::before  { content: "\f080"; }
.main-header .track-domain .fai::before,.main-sidebar .track-domain .fai::before{ content: "\f0ac"; }
.main-header .track-sites .fai::before, .main-sidebar .track-sites .fai::before { content: "\f0e8"; }
.main-header .track-spend .fai::before, .main-sidebar .track-spend .fai::before { content: "\f81d"; }
.main-header .track-log .fai::before,   .main-sidebar .track-log .fai::before   { content: "\f46d"; }
.main-header .filter .fai::before,      .main-sidebar .filter .fai::before      { content: "\f0b0"; }
.main-header .filter-bl .fai::before,   .main-sidebar .filter-bl .fai::before   { content: "\f662"; }
.main-header .fltrstat .fai::before,    .main-sidebar .fltrstat .fai::before    { content: "\f1fe"; }


/* General */
.main-header .home .fai::before,       .main-sidebar .home .fai::before       { content: "\f624"; }
.main-header .order .fai::before,      .main-sidebar .order .fai::before      { content: "\f07a"; }
.main-header .leads .fai::before,      .main-sidebar .leads .fai::before      { content: "\f07a"; }
.main-header .flow .fai::before,       .main-sidebar .flow .fai::before       { content: "\f1d8"; }
.main-header .traffic .fai::before,    .main-sidebar .traffic .fai::before    { content: "\f1d8"; }
.main-header .offer .fai::before,      .main-sidebar .offer .fai::before      { content: "\f291"; }
.main-header .offers .fai::before,     .main-sidebar .offers .fai::before     { content: "\f291"; }
.main-header .stats .fai::before,      .main-sidebar .stats .fai::before      { content: "\f1fe"; }
.main-header .referal .fai::before,    .main-sidebar .referal .fai::before    { content: "\f0c0"; }
.main-header .split .fai::before,      .main-sidebar .split .fai::before      { content: "\f074"; }
.main-header .company .fai::before,    .main-sidebar .company .fai::before    { content: "\f1ad"; }
.main-header .store .fai::before,      .main-sidebar .store .fai::before      { content: "\f1b3"; }
.main-header .team .fai::before,       .main-sidebar .team .fai::before       { content: "\f0c0"; }
.main-header .gang .fai::before,       .main-sidebar .gang .fai::before       { content: "\f0c0"; }
.main-header .analytics .fai::before,  .main-sidebar .analytics .fai::before  { content: "\f080"; }
.main-header .business .fai::before,   .main-sidebar .business .fai::before   { content: "\f080"; }
.main-header .config .fai::before,     .main-sidebar .config .fai::before     { content: "\f085"; }
.main-header .users .fai::before,      .main-sidebar .users .fai::before      { content: "\f0c0"; }
.main-header .supporthq .fai::before,  .main-sidebar .supporthq .fai::before  { content: "\f086"; }
.main-header .news .fai::before,       .main-sidebar .news .fai::before       { content: "\f1ea"; }
.main-header .bonus .fai::before,      .main-sidebar .bonus .fai::before      { content: "\f06b"; }
.main-header .money .fai::before,      .main-sidebar .money .fai::before      { content: "\f0d6"; }
.main-header .payments .fai::before,   .main-sidebar .payments .fai::before   { content: "\f0d6"; }
.main-header .tools .fai::before,      .main-sidebar .tools .fai::before      { content: "\f7d9"; }

/* 30. RESPONSIVE
   Two-panel mobile pattern (PLAN.md §2 rule 9 — the one place something IS sticky/fixed below
   768px):
     - <body class="planka-nav-open">      reveals row 2 (.main-sidebar) as an off-canvas sheet,
       opened by the [data-toggle="planka-nav"] .planka-toggle button.
     - <body class="planka-utility-open">  reveals .navbar-custom-menu (profile/money/support)
       as a header-attached dropdown sheet, opened by [data-toggle="planka-utility"].
   The JS subagent toggles these two body classes; nothing else needs to know about them. */
@media (max-width: 767px) {
  .main-header {
    position: sticky;
    top: 0;
  }
  .main-header .logo { display: none; }
  .navbar-brand.visible-xs { display: flex; }

  .planka-toggle { display: inline-flex; }
  /* .navbar-custom-menu (display:none here) no longer contributes its margin-left:auto, so the
     first toggle carries the push that anchors both buttons to the header's right edge. */
  .planka-toggle:first-of-type {
    margin-left: auto;
  }

  /* Utility sheet: profile/money/support, dropped down from the header, full width */
  .navbar-custom-menu {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    margin-left: 0;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-lg);
    z-index: 1035;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  body.planka-utility-open .navbar-custom-menu { display: block; }
  .navbar-custom-menu .nav,
  .navbar-nav { flex-direction: column; align-items: stretch; }
  .navbar-custom-menu .nav > li > a { height: auto; padding: 12px 16px; }
  .navbar-custom-menu .dropdown-menu {
    position: static;
    display: block;
    border: none; border-top: 1px solid var(--c-border);
    border-radius: 0;
    box-shadow: none;
  }
  /* The same markup renders the compact row-1 bar (where account name / balance amount /
     "Support" labels are .hidden-xs to save space next to their icon) AND this full-width
     sheet, which has plenty of room — reinstate those labels only inside the open sheet. */
  .navbar-custom-menu .hidden-xs { display: inline !important; }

  /* Nav sheet: row 2 reverts to a vertical list (base §7 rules, un-gated by the >=768px block)
     inside an off-canvas panel; submenus fall back to inline accordions the same way. */
  .main-sidebar {
    display: none;
    position: fixed;
    top: var(--header-h); left: 0; right: 0; bottom: 0;
    height: auto;
    z-index: 1045;
    overflow-y: auto;
    box-shadow: var(--shadow-overlay);
  }
  body.planka-nav-open .main-sidebar { display: block; }
  body.planka-nav-open::after {
    content: '';
    position: fixed;
    top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.4);
    z-index: 1044;
  }
  .nav-inner { max-width: none; overflow: visible; height: auto; }

  .content-wrapper { padding: 14px; }

  /* Prevent horizontal scroll */
  .row { margin-right: -10px; margin-left: -10px; }
  [class*="col-"] { padding-right: 10px; padding-left: 10px; }

  .form-inline { flex-direction: column; align-items: stretch; }
  .form-inline .form-control { width: 100%; }
}

/* 31. PRINT */
@media print {
  .main-header, .main-sidebar, .main-footer { display: none !important; }
  .content-wrapper { margin: 0 !important; padding: 0 !important; }
  .box { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
  a[href]::after { content: " (" attr(href) ")"; }
}

/* 32. PLUGIN STYLES — select2.css, summernote.css, codemirror.css, jquery-ui.css, notifIt.css */

.phase3, a.phase3 { color: var(--c-success-fg); }
.phase4, a.phase4 { color: var(--c-danger-fg); }
.phase5, a.phase5 { color: var(--c-text-muted); }

.phase1:before	{ content:"\f021"; }
.phase2:before	{ content:"\f017"; }
.phase3:before	{ content:"\f058"; }
.phase4:before	{ content:"\f057"; }
.phase5:before	{ content:"\f1f8"; }


.dlstage1, a.dlstage1 { color: var(--c-text-muted); }
.dlstage2, a.dlstage2 { color: var(--c-info-fg); }
.dlstage3, a.dlstage3 { color: var(--c-orange); }
.dlstage4, a.dlstage4 { color: var(--c-indigo); }
.dlstage5, a.dlstage5 { color: var(--c-success-fg); }
.dlstage6, a.dlstage6 { color: var(--c-danger-fg); }
.dlstage7, a.dlstage7 { color: var(--c-info-fg); }

.dlstage0:before	{ content:"\f0d1"; }
.dlstage1:before	{ content:"\f017"; }
.dlstage2:before	{ content:"\f0d1"; }
.dlstage3:before	{ content:"\f06a"; }
.dlstage4:before	{ content:"\f015"; }
.dlstage5:before	{ content:"\f058"; }
.dlstage6:before	{ content:"\f122"; }
.dlstage7:before	{ content:"\f086"; }

.prcs0 { color: var(--c-text-muted); }
.prcs1 { color: var(--c-success-fg); }
.prcs2 { color: var(--c-danger-fg); }
.prcs0:before { content:"\f017"; }
.prcs1:before { content:"\f058"; }
.prcs2:before { content:"\f057"; }

.storemvt1, a.storemvt1 { color: var(--c-success-fg); }
.storemvt2, a.storemvt2 { color: var(--c-indigo); }
.storemvt3, a.storemvt3 { color: var(--c-text-muted); }
.storemvt4, a.storemvt4 { color: var(--c-info-fg); }
.storemvt5, a.storemvt5 { color: var(--c-success-fg); }
.storemvt6, a.storemvt6 { color: var(--c-danger-fg); }

.storemvt1:before	{ content:"\f0fe"; }
.storemvt2:before	{ content:"\f044"; }
.storemvt3:before	{ content:"\f017"; }
.storemvt4:before	{ content:"\f0d1"; }
.storemvt5:before	{ content:"\f058"; }
.storemvt6:before	{ content:"\f122"; }

.fintype1, a.fintype1 { color: var(--c-success-fg); }
.fintype2, a.fintype2 { color: var(--c-danger-fg); }
.fintype3, a.fintype3 { color: var(--c-info-fg); }
.fintype4, a.fintype4 { color: var(--c-text-muted); }
.fintype5, a.fintype5 { color: var(--c-success-fg); }
.fintype6, a.fintype6 { color: var(--c-indigo); }
.fintype7, a.fintype7 { color: var(--c-success-fg); }
.fintype8, a.fintype8 { color: var(--c-danger-fg); }
.fintype9, a.fintype9 { color: var(--c-purple); }

.fintype1:before	{ content:"\f055"; }
.fintype2:before	{ content:"\f056"; }
.fintype3:before	{ content:"\f0d6"; }
.fintype4:before	{ content:"\f017"; }
.fintype5:before	{ content:"\f058"; }
.fintype6:before	{ content:"\f044"; }
.fintype7:before	{ content:"\f122"; }
.fintype8:before	{ content:"\f1e4"; }
.fintype9:before	{ content:"\f0ec"; }

.clotype0,  a.clotype0  { color: var(--c-success-fg); }
.clotype1,  a.clotype1  { color: var(--c-text-muted); }
.clotype2,  a.clotype2  { color: var(--c-indigo); }
.clotype3,  a.clotype3  { color: var(--c-info-fg); }
.clotype4,  a.clotype4  { color: var(--c-danger-fg); }
.clotype5,  a.clotype5  { color: var(--c-danger-fg); }
.clotype6,  a.clotype6  { color: var(--c-danger-fg); }
.clotype7,  a.clotype7  { color: var(--c-danger-fg); }
.clotype8,  a.clotype8  { color: var(--c-text-muted); }
.clotype9,  a.clotype9  { color: var(--c-text-muted); }
.clotype10, a.clotype10 { color: var(--c-info-fg); }
.clotype11, a.clotype11 { color: var(--c-danger-fg); }
.clotype12, a.clotype12 { color: var(--c-text-muted); }
.clotype13, a.clotype13 { color: var(--c-orange); }

.clotype0:before	{ content:"\f058"; }
.clotype1:before	{ content:"\f08e"; }
.clotype2:before	{ content:"\f390"; }
.clotype3:before	{ content:"\f0ac"; }
.clotype4:before	{ content:"\f057"; }
.clotype5:before	{ content:"\f057"; font-weight: 400; }
.clotype6:before	{ content:"\f06a"; }
.clotype7:before	{ content:"\f121"; }
.clotype8:before	{ content:"\f188"; }
.clotype9:before	{ content:"\f0ec"; }
.clotype10:before	{ content:"\f1ab"; }
.clotype11:before	{ content:"\f1f8"; }
.clotype12:before	{ content:"\f0c1"; }
.clotype13:before	{ content:"\f641"; }

.offtype0, a.offtype0 { color: var(--c-success-fg); }
.offtype1, a.offtype1 { color: var(--c-info-fg); }
.offtype2, a.offtype2 { color: var(--c-text-muted); }

.offtype0:before	{ content:"\f291"; }
.offtype1:before	{ content:"\f05a"; }
.offtype2:before	{ content:"\f1d8"; }

.comment { color: var(--c-text-muted); }
.comment:before { content: "\f086"; }

.order-comp, a.order-comp { color: var(--c-indigo); }
.order-comp:before { content: "\f1ad"; }

.order-source, a.order-source, .order-sources, a.order-sources { color: var(--c-indigo); }
.source-vip, a.source-vip     { color: var(--c-text); }
.source-ext, a.source-ext     { color: var(--c-orange); }
.source-search, a.source-search { color: var(--c-text-muted); }
.source-warn, a.source-warn   { color: var(--c-danger-fg); }
.source-ua, a.source-ua       { color: var(--c-orange); }

.order-source:before, .order-sources:before { content: "\f007"; }
.source-vip:before	{ content: "\f005"; }
.source-ext:before	{ content: "\f0c0"; }
.source-search:before	{ content: "\f002"; }
.source-warn:before	{ content: "\f06a"; }
.source-ua:before	{ content: "\f071"; }

.ok:before		{ content:"\f058"; }
.wait:before	{ content:"\f017"; }
.phone:before	{ content:"\f095"; }

.mi0:before { content: "\f109"; }
.mi1:before { content: "\f122"; }
.mi2:before { content: "\f10a"; }
.mi3:before { content: "\f0b2"; }

.lst0 { color: var(--c-text-muted); }
.lst1 { color: var(--c-text-muted); }
.lst2 { color: var(--c-indigo); }
.lst3 { color: var(--c-success-fg); }
.lst4 { color: var(--c-danger-fg); }
.lst0:before { content:"\f017"; }
.lst1:before { content:"\f0ed"; }
.lst2:before { content:"\f093"; }
.lst3:before { content:"\f058"; }
.lst4:before { content:"\f06a"; }

.newscat1, .newscat1 a { color: var(--c-text-muted); }
.newscat2, .newscat2 a { color: var(--c-success-fg); }
.newscat3, .newscat3 a { color: var(--c-danger-fg); }
.newscat4, .newscat4 a { color: var(--c-primary-fg); }
.newscat5, .newscat5 a { color: var(--c-success-fg); }
.newscat6, .newscat6 a { color: var(--c-info-fg); }
.newscat7, .newscat7 a { color: var(--c-orange); }
.newscat1 .fai:before { content: "\f1ea"; }
.newscat2 .fai:before { content: "\f0e7"; }
.newscat3 .fai:before { content: "\f057"; }
.newscat4 .fai:before { content: "\f044"; }
.newscat5 .fai:before { content: "\f0ac"; }
.newscat6 .fai:before { content: "\f0e8"; }
.newscat7 .fai:before { content: "\f164"; }

.news-entry-text figure { text-align: center; margin: 10px auto; }
.news-entry-text figure img { max-width: 100%; }
.news-entry-text figcaption { text-align: center; margin: 10px auto; }

/* #xforder: row 1 = [icon] … [submit], row 2 = pills wrapping */
ul#utmlist { display: flex !important; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0; list-style: none; }
ul#utmlist li span { cursor: move; }
ul#utmlist li { display: block; padding: 0; margin: 0; cursor: move; height: auto !important; width: auto !important; }
ul#utmlist li.dragged { position: absolute; opacity: 0.5; z-index: 2000; }
ul#utmlist li.placeholder { padding: 5px 20px; border: dotted 1px #ccc; }

@media(max-width:767px) {
	ul#utmlist { gap: 4px; }
}

#support-form { margin-bottom: 10px; }
#support-form.minimal input { display: none; }
#support-form.minimal textarea { height: 34px; }
.support-user { width: 65px; height: 65px; line-height: 65px; display: block; float: left; text-align: center; border-radius: 100%; font-size: 2em; }

.comment-list 		{ display: block; padding: 0; margin: 0; list-style: none; }
.comment-list li 	{ display: block; padding: 0; margin: 15px 0; list-style: none; min-height: 60px; }
.comment-info { margin: 0 0 10px 0; }
.comment-text {
	display: block; padding: 5px 23px; margin: 0; background: var(--c-surface);
	border-right: solid 1px var(--c-border-strong); border-bottom: solid 1px var(--c-border-strong); border-radius: 5px;
}
.comment-text p { margin: 6px 0; }
.comment-list li.unread .comment-text { background: var(--c-success-bg); border-color: var(--c-success-border); }

.offer-info p, .offer-list-info p, .offer-cat-info p { margin: 6px 0; }

#offerprices { display: block; margin: 0; padding: 0; list-style: none; }
#offerprices .dragme { cursor: move; }
.offer-price { display: block; margin: 0; padding: 1px; list-style: none; }
.offer-price .line { padding: 4px 0; }
.offer-price.dragged { position: absolute; opacity: 0.5; z-index: 2000; }
#offerprices .placeholder { display: block; margin: 16px 0; margin-top: 0; height: 140px; padding: 1px; list-style: none; border: dashed 1px #ccc; border-radius: 4px; background: #fff; }


.socb { text-align: center; padding: 0; vertical-align: middle; }
.socb label { display: block; padding: 0; margin: 0; width: 100%; height: 100%; line-height: 100%; vertical-align: middle; }

.compact-td { font-size: 0; text-align: center; white-space: nowrap; padding: 0; }

.ad-block, .ad-block a { display: block; height: 185px; text-align: center; line-height: 185px; font-size: 0px; padding: 0; margin: 0; background: #f7f8f9; }
.ad-block span { font-size: 40px; }
.ad-block img { margin: auto; padding: 0; vertical-align: middle; max-height: 100%; max-width: 100%; font-size: 0; }
.ad-block audio, .ad-block video { margin: 0; padding: 0; height: 185px; width: 100%; }

.bonus-image a { display: block; height: 250px; background-color: #eee; background-position: center center; background-size: cover; text-align: center; }
.bonus-left { display: inline-block; margin-top: 190px; font-size: 16px; padding: 8px 20px; }

.autotitle { display: flex; flex-direction: column; height: 85px; padding: 10px; overflow: hidden; justify-content: space-evenly; }
.autotitle a, .autotitle span { text-align: center; }
.autotitle a.title { font-size: 18px; }

a#orderpickup {
	display: block;  margin: 0 0 15px 0; text-decoration: none; text-align: center;
	padding: 13px; font-size: 18px; background: #666; color: #fff;
}
a#orderpickup span { display: block; font-size: 11px; padding: 2px 0; }
a#orderpickup.active { background: #272; }

.ccf-ideawrap { position: relative; z-index: 3000; }
.ccf-idea { background: #fff; position: absolute; width: 100%; }
.ccf-idea a { display: block; padding: 7px; margin: 0; color: #000; text-decoration: none; border-left: solid 1px #ccc; border-right: solid 1px #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccf-idea a:last-child { border-bottom: solid 1px #ccc; }

td.header, th.header { cursor: pointer; }
th.headerSortUp:after, td.headerSortUp:after,th.headerSortDown:after, td.headerSortDown:after
{ display:inline-block; padding-left: 5px; font:normal normal normal 12px/1 FontAwesome;font-size:in!herit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; }
th.headerSortUp:after, td.headerSortUp:after { content: "\f176"; }
th.headerSortDown:after, td.headerSortDown:after { content: "\f175"; }

.main-block.at-home { max-width: 1300px; }
.home-section { padding: 30px 10px 15px 10px; border-top: solid 1px #ddd; }
.home-section:nth-child(even) { background: #eeeff3; }


.hh { display: flex; width: 100%; padding: 0; margin: 15px 0; font-size: 18px; flex-direction: row; align-items: center; justify-content: stretch; }
.hh span { display: block; flex: 0 0 initial; padding: 0 10px 1px 10px; white-space: nowrap; }
.hh:before, .hh:after { display: block; width: 100%; height: 1px; background: #777; content: " "; font-size: 0px; flex: 1 1 auto; }

.wd-item {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wd-item:last-child { margin-bottom: 0; }
.wd-item label {
  display: block;
  padding: 0 14px;
  margin: 0;
  cursor: pointer;
  font-weight: normal;
}
.wd-item span { display: block; }
.wd-item:not(.text-muted):hover { border-color: var(--c-border-strong); }
.wd-item:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.wd-item.text-muted { opacity: 0.5; }
.wd-title { font-size: 1.1em; font-weight: bold; }


.graphcol { font-size: 12px; line-height: 22px !important; padding: 0 !important; text-align: center; }
.graphcol label { display: block; line-height: 22px; width: 100%; margin: 0; padding: 0; }
.graphcol0  { background-color: #4e79a7 !important; }
.graphcol1  { background-color: #f28e2b !important; }
.graphcol2  { background-color: #59a14f !important; }
.graphcol3  { background-color: #e15759 !important; }
.graphcol4  { background-color: #b07aa1 !important; }
.graphcol5  { background-color: #76b7b2 !important; }
.graphcol6  { background-color: #edc948 !important; }
.graphcol7  { background-color: #ff6f61 !important; }
.graphcol8  { background-color: #2f4b7c !important; }
.graphcol9  { background-color: #a05195 !important; }
.graphcol10 { background-color: #d45087 !important; }
.graphcol11 { background-color: #4caf50 !important; }
.graphcol12 { background-color: #f95d6a !important; }
.graphcol13 { background-color: #00a6a6 !important; }
.graphcol14 { background-color: #7a5195 !important; }
.graphcol15 { background-color: #ffa600 !important; }

@media(min-width:768px) {
	.news-entry { display: flex; }
	.news-entry-image { flex: 0 1 300px ; margin-right: 20px; min-width: 250px; }
}

@media(max-width:991px) {
	.form-inline { float: none !important; gap: 0; }
	.form-inline .btn-block + .btn-block { margin-top: -1px; }
	.form-inline-block { padding: 10px 10px 5px 10px; border: solid 1px var(--c-border); border-top: none; background: var(--c-surface-alt); width: 100%; }
	.form-inline-block .form-control, .form-inline .select2-container--default .select2-selection--single, .form-inline .select2-selection .select2-selection--single, .form-inline-block .btn { margin-bottom: 5px; }
	.form-inline-block .margin-hl { margin-left: 0; }
	.form-inline-block .margin-hr { margin-right: 0; }
}
@media(max-width:767px) {
	.news-entry-image { margin-bottom: 15px; }
	.form-inline-block .btn { width: 100%; }
	.form-inline-block .select2-container {  width: 100% !important; }
}
@media(min-width:768px) and (max-width:991px) {
	.form-inline .form-control { width: 49%; display: inline-block !important; }
	.form-inline-block .select2-container {  width: 49% !important; }
	.input-group.short { width: 130px; }
}
@media(min-width:992px) {
	.form-inline.pull-left { padding-right: 10px; }
	.form-inline-block.collapse { display: flex !important; }
	.form-inline .form-control { width: 150px; display: inline-block; }
	.form-control.shorter { width: 95px; max-width: none; display: inline-block; }
	.form-control.short { width: 135px; max-width: none; display: inline-block; }
	.form-control.medium { width: 200px; max-width: none; display: inline-block; }
	.form-control.wide { width: 300px; max-width: none; display: inline-block; }
	.form-control.tiny { width: 65px; display: inline-block; }
	.input-group.short { width: 130px; }
	/* select2 trigger matches the .form-control width above; without this the
	   global .select2-container { width: 100% !important } stretches the wrapper
	   to fill .form-inline-block. */
	.form-inline .select2-container,
	.form-inline-block .select2-container { width: 150px !important; }
}

[class^="flag-"],
[class*=" flag-"] {
	display: inline-block;
	width: 16px;
	height: 11px;
	vertical-align: baseline;
	background-color: #fff;
	background-image: url("../images/flags.png");
	background-position: 0 0;
	background-repeat: no-repeat;
}
.flagicon { margin-right: 4px; }
abbr[title].flagicon { 	text-decoration: none; border-bottom: none; }

.flag-zz { background-position: -176px -110px; width: 16px; height: 11px; }
.flag-ww { background-position: -176px -110px; width: 16px; height: 11px; }
.flag-zw { background-position: 0px 0px; width: 16px; height: 11px; }
.flag-zm { background-position: -16px 0px; width: 16px; height: 11px; }
.flag-za { background-position: 0px -11px; width: 16px; height: 11px; }
.flag-yt { background-position: -16px -11px; width: 16px; height: 11px; }
.flag-ye { background-position: -32px 0px; width: 16px; height: 11px; }
.flag-ws { background-position: -32px -11px; width: 16px; height: 11px; }
.flag-wf { background-position: 0px -22px; width: 16px; height: 11px; }
.flag-vu { background-position: -32px -22px; width: 16px; height: 11px; }
.flag-vn { background-position: 0px -33px; width: 16px; height: 11px; }
.flag-vi { background-position: -16px -33px; width: 16px; height: 11px; }
.flag-vg { background-position: -32px -33px; width: 16px; height: 11px; }
.flag-ve { background-position: -48px 0px; width: 16px; height: 11px; }
.flag-vc { background-position: -48px -11px; width: 16px; height: 11px; }
.flag-va { background-position: -48px -22px; width: 16px; height: 11px; }
.flag-uz { background-position: -48px -33px; width: 16px; height: 11px; }
.flag-uy { background-position: 0px -44px; width: 16px; height: 11px; }
.flag-us { background-position: -16px -44px; width: 16px; height: 11px; }
.flag-um { background-position: -16px -44px; width: 16px; height: 11px; }
.flag-ug { background-position: -32px -44px; width: 16px; height: 11px; }
.flag-ua { background-position: -48px -44px; width: 16px; height: 11px; }
.flag-tz { background-position: -64px 0px; width: 16px; height: 11px; }
.flag-tw { background-position: -64px -11px; width: 16px; height: 11px; }
.flag-tv { background-position: -64px -22px; width: 16px; height: 11px; }
.flag-tt { background-position: -64px -33px; width: 16px; height: 11px; }
.flag-tr { background-position: -64px -44px; width: 16px; height: 11px; }
.flag-to { background-position: 0px -55px; width: 16px; height: 11px; }
.flag-tn { background-position: -16px -55px; width: 16px; height: 11px; }
.flag-tm { background-position: -32px -55px; width: 16px; height: 11px; }
.flag-tl { background-position: -48px -55px; width: 16px; height: 11px; }
.flag-tk { background-position: -64px -55px; width: 16px; height: 11px; }
.flag-tj { background-position: 0px -66px; width: 16px; height: 11px; }
.flag-th { background-position: -16px -66px; width: 16px; height: 11px; }
.flag-tg { background-position: -32px -66px; width: 16px; height: 11px; }
.flag-tf { background-position: -48px -66px; width: 16px; height: 11px; }
.flag-td { background-position: -64px -66px; width: 16px; height: 11px; }
.flag-tc { background-position: -80px 0px; width: 16px; height: 11px; }
.flag-sz { background-position: -80px -11px; width: 16px; height: 11px; }
.flag-sy { background-position: -80px -22px; width: 16px; height: 11px; }
.flag-sx { background-position: -80px -33px; width: 16px; height: 11px; }
.flag-sv { background-position: -80px -44px; width: 16px; height: 11px; }
.flag-st { background-position: -80px -55px; width: 16px; height: 11px; }
.flag-ss { background-position: -80px -66px; width: 16px; height: 11px; }
.flag-sr { background-position: 0px -77px; width: 16px; height: 11px; }
.flag-so { background-position: -16px -77px; width: 16px; height: 11px; }
.flag-sn { background-position: -32px -77px; width: 16px; height: 11px; }
.flag-sm { background-position: -48px -77px; width: 16px; height: 11px; }
.flag-sl { background-position: -64px -77px; width: 16px; height: 11px; }
.flag-sk { background-position: -80px -77px; width: 16px; height: 11px; }
.flag-si { background-position: -96px 0px; width: 16px; height: 11px; }
.flag-sh { background-position: -96px -11px; width: 16px; height: 11px; }
.flag-sg { background-position: -96px -22px; width: 16px; height: 11px; }
.flag-se { background-position: -96px -33px; width: 16px; height: 11px; }
.flag-sd { background-position: -96px -44px; width: 16px; height: 11px; }
.flag-sc { background-position: -96px -66px; width: 16px; height: 11px; }
.flag-sb { background-position: -96px -77px; width: 16px; height: 11px; }
.flag-sa { background-position: 0px -88px; width: 16px; height: 11px; }
.flag-rw { background-position: -16px -88px; width: 16px; height: 11px; }
.flag-ru { background-position: -32px -88px; width: 16px; height: 11px; }
.flag-rs { background-position: -48px -88px; width: 16px; height: 11px; }
.flag-ro { background-position: -64px -88px; width: 16px; height: 11px; }
.flag-qa { background-position: -80px -88px; width: 16px; height: 11px; }
.flag-py { background-position: -96px -88px; width: 16px; height: 11px; }
.flag-pw { background-position: 0px -99px; width: 16px; height: 11px; }
.flag-pt { background-position: -16px -99px; width: 16px; height: 11px; }
.flag-ps { background-position: -32px -99px; width: 16px; height: 11px; }
.flag-pr { background-position: -48px -99px; width: 16px; height: 11px; }
.flag-pn { background-position: -64px -99px; width: 16px; height: 11px; }
.flag-pm { background-position: -80px -99px; width: 16px; height: 11px; }
.flag-pl { background-position: -96px -99px; width: 16px; height: 11px; }
.flag-pk { background-position: -112px 0px; width: 16px; height: 11px; }
.flag-ph { background-position: -112px -11px; width: 16px; height: 11px; }
.flag-pg { background-position: -112px -22px; width: 16px; height: 11px; }
.flag-pf { background-position: -112px -33px; width: 16px; height: 11px; }
.flag-pe { background-position: -112px -44px; width: 16px; height: 11px; }
.flag-pa { background-position: -112px -55px; width: 16px; height: 11px; }
.flag-om { background-position: -112px -66px; width: 16px; height: 11px; }
.flag-nz { background-position: -112px -77px; width: 16px; height: 11px; }
.flag-nu { background-position: -112px -88px; width: 16px; height: 11px; }
.flag-nr { background-position: -112px -99px; width: 16px; height: 11px; }
.flag-no { background-position: 0px -110px; width: 16px; height: 11px; }
.flag-bv { background-position: 0px -110px; width: 16px; height: 11px; }
.flag-sj { background-position: 0px -110px; width: 16px; height: 11px; }
.flag-nl { background-position: -16px -110px; width: 16px; height: 11px; }
.flag-ni { background-position: -32px -110px; width: 16px; height: 11px; }
.flag-ng { background-position: -48px -110px; width: 16px; height: 11px; }
.flag-nf { background-position: -64px -110px; width: 16px; height: 11px; }
.flag-ne { background-position: -80px -110px; width: 16px; height: 11px; }
.flag-nc { background-position: -96px -110px; width: 16px; height: 11px; }
.flag-na { background-position: -112px -110px; width: 16px; height: 11px; }
.flag-mz { background-position: -128px 0px; width: 16px; height: 11px; }
.flag-my { background-position: -128px -11px; width: 16px; height: 11px; }
.flag-mx { background-position: -128px -22px; width: 16px; height: 11px; }
.flag-mw { background-position: -128px -33px; width: 16px; height: 11px; }
.flag-mv { background-position: -128px -44px; width: 16px; height: 11px; }
.flag-mu { background-position: -128px -55px; width: 16px; height: 11px; }
.flag-mt { background-position: -128px -66px; width: 16px; height: 11px; }
.flag-ms { background-position: -128px -77px; width: 16px; height: 11px; }
.flag-mr { background-position: -128px -88px; width: 16px; height: 11px; }
.flag-mq { background-position: -128px -99px; width: 16px; height: 11px; }
.flag-mp { background-position: -128px -110px; width: 16px; height: 11px; }
.flag-mo { background-position: 0px -121px; width: 16px; height: 11px; }
.flag-mn { background-position: -16px -121px; width: 16px; height: 11px; }
.flag-mm { background-position: -32px -121px; width: 16px; height: 11px; }
.flag-ml { background-position: -48px -121px; width: 16px; height: 11px; }
.flag-mk { background-position: -64px -121px; width: 16px; height: 11px; }
.flag-mh { background-position: -80px -121px; width: 16px; height: 11px; }
.flag-mg { background-position: -96px -121px; width: 16px; height: 11px; }
.flag-me { background-position: 0px -132px; width: 16px; height: 12px; }
.flag-md { background-position: -112px -121px; width: 16px; height: 11px; }
.flag-mc { background-position: -128px -121px; width: 16px; height: 11px; }
.flag-ma { background-position: -16px -132px; width: 16px; height: 11px; }
.flag-ly { background-position: -32px -132px; width: 16px; height: 11px; }
.flag-lv { background-position: -48px -132px; width: 16px; height: 11px; }
.flag-lu { background-position: -64px -132px; width: 16px; height: 11px; }
.flag-lt { background-position: -80px -132px; width: 16px; height: 11px; }
.flag-ls { background-position: -96px -132px; width: 16px; height: 11px; }
.flag-lr { background-position: -112px -132px; width: 16px; height: 11px; }
.flag-lk { background-position: -128px -132px; width: 16px; height: 11px; }
.flag-li { background-position: -144px 0px; width: 16px; height: 11px; }
.flag-lc { background-position: -144px -11px; width: 16px; height: 11px; }
.flag-lb { background-position: -144px -22px; width: 16px; height: 11px; }
.flag-la { background-position: -144px -33px; width: 16px; height: 11px; }
.flag-kz { background-position: -144px -44px; width: 16px; height: 11px; }
.flag-ky { background-position: -144px -55px; width: 16px; height: 11px; }
.flag-kw { background-position: -144px -66px; width: 16px; height: 11px; }
.flag-kr { background-position: -144px -77px; width: 16px; height: 11px; }
.flag-kp { background-position: -144px -88px; width: 16px; height: 11px; }
.flag-kn { background-position: -144px -99px; width: 16px; height: 11px; }
.flag-km { background-position: -144px -110px; width: 16px; height: 11px; }
.flag-ki { background-position: -144px -121px; width: 16px; height: 11px; }
.flag-kh { background-position: -144px -132px; width: 16px; height: 11px; }
.flag-kg { background-position: 0px -144px; width: 16px; height: 11px; }
.flag-ke { background-position: -16px -144px; width: 16px; height: 11px; }
.flag-jp { background-position: -32px -144px; width: 16px; height: 11px; }
.flag-jo { background-position: -48px -144px; width: 16px; height: 11px; }
.flag-jm { background-position: -64px -144px; width: 16px; height: 11px; }
.flag-je { background-position: -80px -144px; width: 16px; height: 11px; }
.flag-it { background-position: -96px -144px; width: 16px; height: 11px; }
.flag-is { background-position: -112px -144px; width: 16px; height: 11px; }
.flag-ir { background-position: -128px -144px; width: 16px; height: 11px; }
.flag-iq { background-position: -144px -144px; width: 16px; height: 11px; }
.flag-io { background-position: -160px 0px; width: 16px; height: 11px; }
.flag-in { background-position: -160px -11px; width: 16px; height: 11px; }
.flag-im { background-position: -160px -22px; width: 16px; height: 9px; }
.flag-il { background-position: -160px -31px; width: 16px; height: 11px; }
.flag-ie { background-position: -160px -42px; width: 16px; height: 11px; }
.flag-id { background-position: -160px -53px; width: 16px; height: 11px; }
.flag-hu { background-position: -160px -64px; width: 16px; height: 11px; }
.flag-ht { background-position: -160px -75px; width: 16px; height: 11px; }
.flag-hr { background-position: -160px -86px; width: 16px; height: 11px; }
.flag-hn { background-position: -160px -97px; width: 16px; height: 11px; }
.flag-hk { background-position: -160px -108px; width: 16px; height: 11px; }
.flag-gy { background-position: -160px -119px; width: 16px; height: 11px; }
.flag-gw { background-position: -160px -130px; width: 16px; height: 11px; }
.flag-gu { background-position: -160px -141px; width: 16px; height: 11px; }
.flag-gt { background-position: 0px -155px; width: 16px; height: 11px; }
.flag-gs { background-position: -16px -155px; width: 16px; height: 11px; }
.flag-gr { background-position: -32px -155px; width: 16px; height: 11px; }
.flag-gq { background-position: -48px -155px; width: 16px; height: 11px; }
.flag-gp { background-position: -64px -155px; width: 16px; height: 11px; }
.flag-gn { background-position: -80px -155px; width: 16px; height: 11px; }
.flag-gm { background-position: -96px -155px; width: 16px; height: 11px; }
.flag-gl { background-position: -112px -155px; width: 16px; height: 11px; }
.flag-gi { background-position: -128px -155px; width: 16px; height: 11px; }
.flag-gh { background-position: -144px -155px; width: 16px; height: 11px; }
.flag-gg { background-position: -160px -155px; width: 16px; height: 11px; }
.flag-ge { background-position: -176px 0px; width: 16px; height: 11px; }
.flag-gd { background-position: -176px -11px; width: 16px; height: 11px; }
.flag-gb { background-position: -176px -22px; width: 16px; height: 11px; }
.flag-ga { background-position: -176px -33px; width: 16px; height: 11px; }
.flag-fr { background-position: -176px -44px; width: 16px; height: 11px; }
.flag-gf { background-position: -176px -44px; width: 16px; height: 11px; }
.flag-re { background-position: -176px -44px; width: 16px; height: 11px; }
.flag-mf { background-position: -176px -44px; width: 16px; height: 11px; }
.flag-bl { background-position: -176px -44px; width: 16px; height: 11px; }
.flag-fo { background-position: -176px -55px; width: 16px; height: 11px; }
.flag-fm { background-position: -176px -66px; width: 16px; height: 11px; }
.flag-fk { background-position: -176px -77px; width: 16px; height: 11px; }
.flag-fj { background-position: -176px -88px; width: 16px; height: 11px; }
.flag-fi { background-position: -176px -99px; width: 16px; height: 11px; }
.flag-eu { background-position: -176px -121px; width: 16px; height: 11px; }
.flag-et { background-position: -176px -132px; width: 16px; height: 11px; }
.flag-es { background-position: -176px -143px; width: 16px; height: 11px; }
.flag-er { background-position: -176px -154px; width: 16px; height: 11px; }
.flag-eh { background-position: -16px -166px; width: 16px; height: 11px; }
.flag-eg { background-position: -32px -166px; width: 16px; height: 11px; }
.flag-ee { background-position: -48px -166px; width: 16px; height: 11px; }
.flag-ec { background-position: -64px -166px; width: 16px; height: 11px; }
.flag-dz { background-position: -80px -166px; width: 16px; height: 11px; }
.flag-do { background-position: -96px -166px; width: 16px; height: 11px; }
.flag-dm { background-position: -112px -166px; width: 16px; height: 11px; }
.flag-dk { background-position: -128px -166px; width: 16px; height: 11px; }
.flag-dj { background-position: -144px -166px; width: 16px; height: 11px; }
.flag-de { background-position: -160px -166px; width: 16px; height: 11px; }
.flag-cz { background-position: -176px -166px; width: 16px; height: 11px; }
.flag-cy { background-position: 0px -177px; width: 16px; height: 11px; }
.flag-cx { background-position: -16px -177px; width: 16px; height: 11px; }
.flag-cw { background-position: -32px -177px; width: 16px; height: 11px; }
.flag-cv { background-position: -48px -177px; width: 16px; height: 11px; }
.flag-cu { background-position: -64px -177px; width: 16px; height: 11px; }
.flag-cs { background-position: -80px -177px; width: 16px; height: 11px; }
.flag-cr { background-position: -96px -177px; width: 16px; height: 11px; }
.flag-co { background-position: -112px -177px; width: 16px; height: 11px; }
.flag-cn { background-position: -128px -177px; width: 16px; height: 11px; }
.flag-cm { background-position: -144px -177px; width: 16px; height: 11px; }
.flag-cl { background-position: -160px -177px; width: 16px; height: 11px; }
.flag-ck { background-position: -176px -177px; width: 16px; height: 11px; }
.flag-ci { background-position: -192px 0px; width: 16px; height: 11px; }
.flag-cg { background-position: -192px -11px; width: 16px; height: 11px; }
.flag-cf { background-position: -192px -22px; width: 16px; height: 11px; }
.flag-cd { background-position: -192px -33px; width: 16px; height: 11px; }
.flag-cc { background-position: -192px -44px; width: 16px; height: 11px; }
.flag-ca { background-position: -192px -66px; width: 16px; height: 11px; }
.flag-bz { background-position: -192px -77px; width: 16px; height: 11px; }
.flag-by { background-position: -192px -88px; width: 16px; height: 11px; }
.flag-bw { background-position: -192px -99px; width: 16px; height: 11px; }
.flag-bt { background-position: -192px -110px; width: 16px; height: 11px; }
.flag-bs { background-position: -192px -121px; width: 16px; height: 11px; }
.flag-br { background-position: -192px -132px; width: 16px; height: 11px; }
.flag-bq { background-position: -192px -143px; width: 16px; height: 11px; }
.flag-bo { background-position: -192px -154px; width: 16px; height: 11px; }
.flag-bn { background-position: -192px -165px; width: 16px; height: 11px; }
.flag-bm { background-position: -192px -176px; width: 16px; height: 11px; }
.flag-bj { background-position: 0px -188px; width: 16px; height: 11px; }
.flag-bi { background-position: -16px -188px; width: 16px; height: 11px; }
.flag-bh { background-position: -32px -188px; width: 16px; height: 11px; }
.flag-bg { background-position: -48px -188px; width: 16px; height: 11px; }
.flag-bf { background-position: -64px -188px; width: 16px; height: 11px; }
.flag-be { background-position: -80px -188px; width: 16px; height: 11px; }
.flag-bd { background-position: -96px -188px; width: 16px; height: 11px; }
.flag-bb { background-position: -112px -188px; width: 16px; height: 11px; }
.flag-ba { background-position: -128px -188px; width: 16px; height: 11px; }
.flag-az { background-position: -144px -188px; width: 16px; height: 11px; }
.flag-ax { background-position: -160px -188px; width: 16px; height: 11px; }
.flag-aw { background-position: -176px -188px; width: 16px; height: 11px; }
.flag-au { background-position: -192px -188px; width: 16px; height: 11px; }
.flag-hm { background-position: -192px -188px; width: 16px; height: 11px; }
.flag-at { background-position: -208px 0px; width: 16px; height: 11px; }
.flag-as { background-position: -208px -11px; width: 16px; height: 11px; }
.flag-ar { background-position: -208px -22px; width: 16px; height: 11px; }
.flag-ao { background-position: -208px -33px; width: 16px; height: 11px; }
.flag-an { background-position: -208px -44px; width: 16px; height: 11px; }
.flag-am { background-position: -208px -55px; width: 16px; height: 11px; }
.flag-al { background-position: -208px -66px; width: 16px; height: 11px; }
.flag-ai { background-position: -208px -77px; width: 16px; height: 11px; }
.flag-ag { background-position: -208px -88px; width: 16px; height: 11px; }
.flag-af { background-position: -208px -99px; width: 16px; height: 11px; }
.flag-ae { background-position: -208px -110px; width: 16px; height: 11px; }
.flag-ad { background-position: -208px -121px; width: 16px; height: 11px; }
.flag-np { background-position: -208px -132px; width: 9px; height: 11px; }

tr.active > td,
tr.active > th {
  background: var(--accent-light) !important;
}

body.login-page .box.login-box-body {
  border: none;
  box-shadow: var(--shadow-overlay);
}


/* ============================================================
   SELECT2 OVERRIDES
   ============================================================
   select2.css loads BEFORE theme.css, but app.css loads AFTER.
   Specificity .select2-container.select2-container--default = [0,3,0]
   beats app.css's typical [0,2,0] when both use !important.
   Organized as two blocks: COLORS (theme variables, all sizes) +
   LAYOUT (heights/paddings, all sizes).
   ============================================================ */

/* ---------- COLORS ----------
   Every color/background/border-color from select2.css mapped to theme
   variables. Adapts automatically to dark/light mode and to the active
   accent skin — no separate @media (prefers-color-scheme: dark) block
   required, and the same rules apply at every screen size. */

/* Idle selection (single + multiple) */
.select2-container.select2-container--default .select2-selection--single,
.select2-container.select2-container--default .select2-selection--multiple {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
}

/* Selected text */
.select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--c-text) !important;
}

/* Placeholder (single + multiple) */
.select2-container.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: var(--c-text-subtle) !important;
}

/* Dropdown arrow caret — closed and open */
.select2-container.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--c-text-muted) transparent transparent transparent !important;
}
.select2-container.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--c-text-muted) transparent !important;
}

/* Focus / open border + focus ring */
.select2-container.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container.select2-container--default.select2-container--open  .select2-selection--single,
.select2-container.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container.select2-container--default.select2-container--open  .select2-selection--multiple {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
  outline: none !important;
}

/* Disabled state */
.select2-container.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background: var(--c-surface-alt) !important;
}

/* Multi-select chips */
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-text) !important;
}
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--accent-text) !important;
}
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--accent-text) !important;
}

/* Single-select clear button */
.select2-container.select2-container--default .select2-selection--single .select2-selection__clear {
  color: var(--c-text-muted) !important;
}

/* Dropdown panel — appended to <body> (or dropdownParent), NOT a descendant
   of .select2-container--default, so no --default ancestor here */
.select2-dropdown {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
}

/* Dropdown options */
.select2-results__option {
  color: var(--c-text) !important;
}
.select2-results__option[aria-disabled=true] {
  color: var(--c-text-subtle) !important;
}
.select2-results__option[aria-selected=true] {
  background: var(--c-surface-alt) !important;
  color: var(--c-text) !important;
}
.select2-results__option--highlighted[aria-selected] {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
}

/* Option group header */
.select2-container--default .select2-results__group {
  color: var(--c-text-muted) !important;
}

/* Search field inside dropdown */
.select2-search--dropdown .select2-search__field {
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  border-color: var(--c-border) !important;
}
.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--accent) !important;
  outline: none !important;
}

/* Close-mask backdrop (rarely visible, but select2.css sets it to #fff) */
.select2-close-mask {
  background: transparent !important;
}


/* ---------- LAYOUT ----------
   Heights, paddings, dimensions, font-sizes. Same values applied at
   every screen size so select2 looks identical on mobile and desktop. */
.select2-container { width: 100% !important; }
/* Reset width on the floating dropdown container (appended to <body> or .modal
   when select2 opens). select2 inline-sets its width to match the trigger; our
   100% rule above would otherwise stretch it to body-width and, combined with
   its absolute left offset, push the document past the viewport edge. */
body > .select2-container,
.modal > .select2-container {
  width: auto !important;
}

/* Single */
.select2-container.select2-container--default .select2-selection--single {
  height: 34px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
}
.select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1 !important;
  padding: 0 28px 0 10px !important;
  font-size: 13px !important;
}
.select2-container.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 32px !important;
  width: 26px !important;
  top: 1px !important; right: 1px !important;
}

/* Multiple */
.select2-container.select2-container--default .select2-selection--multiple {
  min-height: 34px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 4px !important;
}
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice {
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
}

/* Small (--h-sm) — explicit variants, always small */
.input-sm ~ .select2-container .select2-selection--single,
.select2-sm .select2-selection--single {
  height: var(--h-sm) !important;
}
/* form-inline / form-inline-block only shrink when actually displayed inline (≥992px) */
@media (min-width: 992px) {
  .form-inline .select2-container.select2-container--default .select2-selection--single,
  .form-inline-block .select2-container.select2-container--default .select2-selection--single {
    height: 30px !important;
  }
  .form-inline .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered,
  .form-inline-block .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 12px !important;
  }
  .form-inline .select2-container.select2-container--default .select2-selection--single .select2-selection__arrow,
  .form-inline-block .select2-container.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 28px !important;
  }
}

/* Dropdown panel */
.select2-dropdown {
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  z-index: 1052 !important;
}
/* select2 appends its dropdown as a direct child of the modal (dropdownParent = .modal,
   which is the overflow:auto scroller). Its top/left are computed as
   trigger.offset() − modal.offset(), i.e. VIEWPORT coordinates — they do not include
   the modal's scrollTop, so an absolutely-positioned wrapper drifts up by scrollTop.
   position:fixed makes those viewport coordinates correct again.
   REQUIRES .modal itself to stay free of backdrop-filter/transform/filter — any of
   those makes .modal the containing block for fixed descendants and silently turns
   this back into position:absolute. That's why the tint+blur live on .modal::before
   (see section 17. MODALS). */
.modal > .select2-container--open {
  position: fixed !important;
  z-index: 1052 !important;
}

/* Dropdown options */
.select2-results__option {
  padding: 7px 10px !important;
  font-size: 13px !important;
}

/* Search field inside dropdown */
.select2-search--dropdown .select2-search__field {
  height: 28px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  padding: 0 8px !important;
}

/* Disabled cursor */
.select2-container.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container.select2-container--default.select2-container--disabled .select2-selection--multiple {
  cursor: not-allowed !important;
}


/* ============================================================
   CODEMIRROR — DARK MODE COLORS
   ============================================================
   codemirror.css loads AFTER theme.css. Prefix every rule with
   `body` to reach [0,1,1] / [0,2,1] specificity, beating
   codemirror.css's plain class selectors ([0,1,0] / [0,2,0])
   regardless of source order — same technique as select2.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  body .CodeMirror {
    background: var(--c-bg);
    color: var(--c-text);
    border-color: var(--c-border);
  }

  body .CodeMirror-scrollbar-filler,
  body .CodeMirror-gutter-filler         { background: var(--c-bg); }

  body .CodeMirror-gutters               { background: var(--c-bg); border-right-color: var(--c-border); }
  body .CodeMirror-linenumber            { color: var(--c-text-subtle); }
  body .CodeMirror-guttermarker          { color: var(--c-text); }
  body .CodeMirror-guttermarker-subtle   { color: var(--c-text-muted); }

  body .CodeMirror div.CodeMirror-cursor { border-left: 1px solid var(--c-text); }

  body .CodeMirror-selected                     { background: rgba(71, 71, 71, .5); }
  body .CodeMirror-focused .CodeMirror-selected { background: rgba(71, 71, 71, .8); }
  body .CodeMirror-line::selection,
  body .CodeMirror-line > span::selection,
  body .CodeMirror-line > span > span::selection        { background: rgba(71, 71, 71, .8); }
  body .CodeMirror-line::-moz-selection,
  body .CodeMirror-line > span::-moz-selection,
  body .CodeMirror-line > span > span::-moz-selection   { background: rgba(71, 71, 71, .8); }

  body .CodeMirror-activeline-background { background: rgba(255, 255, 255, .04); }
  body .cm-searching                     { background: rgba(255, 204, 0, .2); }

  body div.CodeMirror span.CodeMirror-matchingbracket    { color: var(--c-success-fg) !important; }
  body div.CodeMirror span.CodeMirror-nonmatchingbracket { color: var(--c-danger-fg) !important; }

  body .cm-s-default .cm-keyword    { color: #89ddff; }
  body .cm-s-default .cm-atom       { color: #f78c6c; }
  body .cm-s-default .cm-number     { color: #f78c6c; }
  body .cm-s-default .cm-def        { color: #82aaff; }
  body .cm-s-default .cm-variable   { color: #d9d9d9; }
  body .cm-s-default .cm-variable-2 { color: #82aaff; }
  body .cm-s-default .cm-variable-3 { color: #ffcb6b; }
  body .cm-s-default .cm-comment    { color: #545454; font-style: italic; }
  body .cm-s-default .cm-string     { color: #c3e88d; }
  body .cm-s-default .cm-string-2   { color: #f78c6c; }
  body .cm-s-default .cm-meta       { color: var(--c-text-muted); }
  body .cm-s-default .cm-qualifier  { color: var(--c-text-muted); }
  body .cm-s-default .cm-builtin    { color: #c792ea; }
  body .cm-s-default .cm-bracket    { color: var(--c-text); }
  body .cm-s-default .cm-tag        { color: #f07178; }
  body .cm-s-default .cm-attribute  { color: #c792ea; }
  body .cm-s-default .cm-header     { color: var(--c-text); }
  body .cm-s-default .cm-quote      { color: #c3e88d; }
  body .cm-s-default .cm-hr         { color: var(--c-text-muted); }
  body .cm-s-default .cm-link       { color: var(--c-link); }
  body .cm-s-default .cm-error      { background: var(--c-danger-fg); color: #fff; }
  body .cm-invalidchar               { color: var(--c-danger-fg); }
}


/* ============================================================
   SUMMERNOTE OVERRIDES
   ============================================================
   summernote.css is loaded AFTER theme.css (see the load-order note in
   docs/11-gotchas.md), so every rule here has to out-specify it — hence the
   `body` prefix on selectors that collide. summernote ships the *bootstrap3*
   UI: its buttons are `.note-btn.btn.btn-default.btn-sm`, its menus are
   `.note-dropdown-menu.dropdown-menu`, its dialogs are `.modal`, and it expects
   bootstrap.js + bootstrap.css to provide the rest. Neither is loaded, so the
   skin supplies the look here and skin.js supplies the dropdown/tooltip/modal
   behaviour.
   ============================================================ */

/* ---------- Frame ---------- */
/* .note-editor.note-frame also carries .panel.panel-default — drop the panel's
   own bottom margin, the surrounding .form-group already spaces the field. */
body .note-editor.note-frame,
body .note-editor.note-airframe {
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  margin-bottom: 0;
  box-shadow: none;
}
body .note-editor.note-airframe { border: 0; }
body .note-editor.note-frame.fullscreen { z-index: 1055; border-radius: 0; }

/* ---------- Toolbar ---------- */
body .note-editor .note-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
  margin: 0;
  padding: 5px 6px;
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-border);
  border-radius: var(--radius) var(--radius) 0 0;
}
/* Groups nest: the toolbar row holds a .note-btn-group per toolbar section, and a
   button with a menu (paragraph, colour, table, style…) is itself wrapped in one
   more .note-btn-group — that inner one is what skin.js marks `.open`, and it is
   what the absolutely positioned menu must resolve against. So every group in the
   toolbar gets `position: relative`, not just the direct children. */
body .note-editor .note-toolbar .note-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  position: relative;
  margin: 0;
}

/* ---------- Toolbar buttons — flat icon buttons ---------- */
body .note-toolbar .note-btn,
body .note-popover .note-btn {
  height: 28px;
  min-width: 28px;
  padding: 0 6px;
  gap: 3px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  box-shadow: none;
}
body .note-editor .note-btn-group > .note-btn {
  border-radius: var(--radius-sm);   /* beats .btn-group > .btn:first/last-child */
  border-right-width: 1px;
}
body .note-toolbar .note-btn:hover,
body .note-popover .note-btn:hover {
  background: var(--c-border);
  border-color: transparent;
  color: var(--c-text);
  box-shadow: none;
}
body .note-toolbar .note-btn:active,
body .note-popover .note-btn:active { background: var(--c-border-strong); box-shadow: none; }
body .note-toolbar .note-btn.active,
body .note-popover .note-btn.active {
  background: var(--accent-light);
  color: var(--accent);
  box-shadow: none;
}
body .note-toolbar .note-btn[disabled],
body .note-popover .note-btn[disabled] { opacity: .35; }
body .note-toolbar .note-btn .note-icon-caret,
body .note-popover .note-btn .note-icon-caret { font-size: 11px; opacity: .7; margin-left: 1px; }
/* dropdown-toggle glued to the button it belongs to (colour, table, style, …) */
body .note-editor .note-toolbar .note-color .dropdown-toggle {
  width: auto;
  min-width: 18px;
  padding: 0 3px;
}
body .note-toolbar .note-current-fontname,
body .note-toolbar .note-current-fontsize,
body .note-toolbar .note-current-fontsizeunit { font-size: 12px; color: var(--c-text); }
body .note-toolbar .note-current-color-button .note-recent-color { border-radius: 2px; }

/* ---------- Dropdown menus ---------- */
/* .dropdown-menu (theme, section 18) already paints the card — this only fixes
   the bits summernote lays out itself. */
body .note-editor .note-toolbar .note-dropdown-menu,
body .note-popover .popover-content .note-dropdown-menu {
  padding: 4px;
  border-color: var(--c-border);
  color: var(--c-text);
}
body .note-editor .note-toolbar .note-dropdown-menu > li > a,
body .note-popover .popover-content .note-dropdown-menu > li > a {
  border-radius: var(--radius-sm);
  padding: 5px 10px;
}
/* The style menu previews every block level at its real size — cap it so the
   menu stays a menu instead of a full-height column of headings. NB: `.note-style`
   is the bold/italic toolbar section, NOT this menu — key off `.dropdown-style`. */
body .note-editor .note-toolbar .note-dropdown-menu.dropdown-style,
body .note-popover .popover-content .note-dropdown-menu.dropdown-style {
  max-height: 300px;
  overflow-y: auto;
}
body .note-editor .note-toolbar .dropdown-style h1,
body .note-popover .popover-content .dropdown-style h1 { font-size: 21px; line-height: 1.25; }
body .note-editor .note-toolbar .dropdown-style h2,
body .note-popover .popover-content .dropdown-style h2 { font-size: 19px; line-height: 1.25; }
body .note-editor .note-toolbar .dropdown-style h3,
body .note-popover .popover-content .dropdown-style h3 { font-size: 17px; line-height: 1.25; }
body .note-editor .note-toolbar .dropdown-style h4,
body .note-popover .popover-content .dropdown-style h4 { font-size: 15px; line-height: 1.25; }
body .note-editor .note-toolbar .dropdown-style h5,
body .note-popover .popover-content .dropdown-style h5 { font-size: 14px; line-height: 1.25; }
body .note-editor .note-toolbar .dropdown-style h6,
body .note-popover .popover-content .dropdown-style h6 { font-size: 13px; line-height: 1.25; }
body .note-editor .note-toolbar .dropdown-style blockquote,
body .note-popover .popover-content .dropdown-style blockquote {
  border-left: 3px solid var(--c-border-strong);
  padding: 2px 10px;
  color: var(--c-text-muted);
  font-size: 14px;
}
body .note-editor .note-toolbar .dropdown-style pre,
body .note-popover .popover-content .dropdown-style pre {
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 12px;
}

/* Colour palette — background + text palettes side by side (summernote sizes the
   menu with a fixed min-width that no longer fits once our padding changes) */
body .note-editor .note-toolbar .note-color-all.open > .note-dropdown-menu,
body .note-popover .popover-content .note-color-all.open > .note-dropdown-menu {
  display: flex;
  gap: 12px;
  min-width: 0;
  padding: 6px;
}
body .note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette,
body .note-popover .popover-content .note-color .note-dropdown-menu .note-palette { margin: 0; }

/* Colour palette */
body .note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-palette-title,
body .note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-palette-title {
  color: var(--c-text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 4px;
}
body .note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-reset,
body .note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select,
body .note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-reset,
body .note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select {
  height: 26px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: none;
}
body .note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-reset:hover,
body .note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select:hover,
body .note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-reset:hover,
body .note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select:hover {
  background: var(--c-surface-alt);
}
body .note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-holder-custom .note-color-btn,
body .note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-holder-custom .note-color-btn {
  border: 1px solid var(--c-border);
}

/* ---------- Editing area ---------- */
body .note-editor.note-frame .note-editing-area .note-editable,
body .note-editor.note-airframe .note-editing-area .note-editable {
  padding: 12px 14px;
  background: var(--c-surface);
  color: var(--c-text);
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: var(--line-height);
}
body .note-editor.note-airframe .note-editing-area .note-editable { padding: 0; }
body .note-editor .note-editable a { color: var(--c-link); }
body .note-editor .note-editable table td,
body .note-editor .note-editable table th { border: 1px solid var(--c-border-strong); padding: 5px 8px; }
body .note-editor.note-frame .note-editing-area .note-editable[contenteditable="false"] { background: var(--c-surface-alt); }
body .note-editor.note-frame .note-placeholder,
body .note-editor.note-airframe .note-placeholder { padding: 12px 14px; color: var(--c-text-subtle); }
body .note-editor.note-frame .note-editing-area .note-codable {
  padding: 12px 14px;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 13px;
  line-height: 1.6;
}
body .note-editor .note-dropzone {
  background: var(--c-surface);
  color: var(--accent);
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  opacity: .97;
}
body .note-editor .note-dropzone .note-dropzone-message { font-size: 15px; font-weight: 600; }

/* ---------- Status bar / resize grip ---------- */
body .note-editor.note-frame .note-statusbar {
  background: var(--c-surface-alt);
  border-top: 1px solid var(--c-border);
  border-radius: 0 0 var(--radius) var(--radius);
}
body .note-editor.note-frame .note-statusbar .note-resizebar { height: 11px; padding-top: 3px; }
body .note-editor.note-frame .note-statusbar .note-resizebar .note-icon-bar { width: 24px; border-top-color: var(--c-border-strong); }
body .note-editor.note-frame .note-status-output { color: var(--c-text-muted); border-top-color: var(--c-border); }
body .note-editor.note-frame .note-status-output .alert { background: var(--c-surface-alt); color: var(--c-text); }

/* ---------- Popovers (link / image / table / hint) ----------
   summernote's own CSS never gives .popover a position, and it places the
   popover with left/top — a static popover therefore lands in the flow and
   shoves the editor content around. */
body .popover {
  position: absolute;
  top: 0; left: 0;
  z-index: 1060;
  display: none;
  padding: 0;
  font-family: var(--font);
  font-size: 13px;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
body .popover > .arrow, body .popover > .arrow:after { display: none; }
body .note-popover .popover-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
  margin: 0;
  padding: 5px 6px;
}
body .note-popover .popover-content > .note-btn-group { position: relative; margin: 0; display: inline-flex; gap: 1px; }
body .note-popover.popover .popover-content a { color: var(--c-link); padding: 0 4px; }
body .note-hint-popover .popover-content .note-hint-group .note-hint-item.active,
body .note-hint-popover .popover-content .note-hint-group .note-hint-item:hover {
  background: var(--accent);
  color: var(--accent-text);
  border-radius: var(--radius-sm);
}

/* Image resize handles */
body .note-control-selection .note-control-handle,
body .note-control-selection .note-control-sizing { border-color: var(--accent); }
body .note-control-selection .note-control-selection-bg { background: var(--accent); opacity: .18; }
body .note-control-selection .note-control-selection-info { background: var(--tooltip-bg); color: var(--tooltip-text); border-radius: var(--radius-sm); }

/* ---------- Dialogs ---------- */
body .note-modal .modal-dialog {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
}
body .note-modal .note-modal-form { margin: 0; }
body .note-modal .form-group { margin-left: 0; margin-right: 0; }
body .note-modal .note-form-label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 12px; color: var(--c-text-muted); }
body .note-modal .note-image-input {
  height: auto;
  padding: 6px 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 13px;
  color: var(--c-text);
}
body .note-modal .note-image-dialog .note-dropzone {
  min-height: 100px;
  font-size: 22px;
  line-height: 4.5;
  color: var(--c-text-subtle);
  border: 2px dashed var(--c-border-strong);
  border-radius: var(--radius);
  text-align: center;
  margin-bottom: 12px;
}

/* ---------- Narrow screens: one sideways-scrolling toolbar row ----------
   Wrapping the toolbar over three lines eats the screen on a phone — and on a
   tablet, where the sidebar still takes its width, the full toolbar wraps too —
   so it scrolls instead. A scroll container clips its own absolutely positioned
   children, so skin.js (ddFloat) lifts an open menu into a viewport-fixed layer
   — see docs/11-gotchas.md → "summernote toolbar scrolls on narrow screens". */
@media (max-width: 991px) {
  body .note-editor .note-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body .note-editor .note-toolbar::-webkit-scrollbar { height: 0; }
  body .note-editor .note-toolbar > .note-btn-group { flex: 0 0 auto; }
  body .note-editor .note-toolbar .note-dropdown-menu.note-menu-float { z-index: 1065; }
  body .note-editor .note-toolbar .note-color-all.open > .note-dropdown-menu { gap: 6px; padding: 5px; }
  body .note-editor.note-frame .note-editing-area .note-editable,
  body .note-editor.note-frame .note-editing-area .note-codable { padding: 10px 11px; }
}


/* ============================================================
   GRAPHENE DARK — legacy hardcoded surfaces
   ============================================================
   A handful of older app-specific rules above paint fixed light
   fills (#fff / #eee / #f7f8f9 / #ccc / #ddd) that were written
   before the theme had a dark mode. They are left untouched in
   light mode; here they are mapped onto the Graphene ramp so the
   dark UI stays one surface family.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  #offerprices .placeholder { border-color: var(--c-border-strong); background: var(--c-surface); }

  .ad-block, .ad-block a    { background: var(--c-surface-alt); }
  .bonus-image a            { background-color: var(--c-surface-alt); }

  .ccf-idea                 { background: var(--c-surface); }
  .ccf-idea a               { color: var(--c-text); border-left-color: var(--c-border); border-right-color: var(--c-border); }
  .ccf-idea a:last-child    { border-bottom-color: var(--c-border); }

  a#orderpickup             { background: #4a4a4a; color: var(--c-text); }
  a#orderpickup.active      { background: #476e31; }

  .home-section             { border-top-color: var(--c-border); }
  .home-section:nth-child(even) { background: var(--c-surface); }

  .hh:before, .hh:after     { background: var(--c-border-strong); }
}