/* =====================================================================
   ShikshaAdmin - the only place a colour may live.
   ---------------------------------------------------------------------
   Paces ships no SCSS sources, so there is nothing to recompile and no
   theme file to edit. This sheet loads AFTER app.min.css and redefines the
   handful of custom properties everything else is built on.

   THE RULE, and it has bitten this codebase family before: no view carries a
   hex. Not a badge, not a chart series, not an inline style attribute. When a
   palette is reworked nothing errors - screens simply stop being painted, and
   the only way to find them is to grep for '#'. Add a token here instead.
   ===================================================================== */

:root {
    /* brand */
    --sa-indigo:        #4F46E5;
    --sa-indigo-dark:   #4338CA;
    --sa-indigo-light:  #818CF8;
    --sa-gold:          #F59E0B;
    --sa-gold-dark:     #D97706;

    /* the primary gradient, on buttons and on the brand strip */
    --sa-gradient:      linear-gradient(135deg, #4F46E5 0%, #6366F1 55%, #818CF8 100%);
    --sa-gradient-gold: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);

    /* state colours, used by the status badges in panel_helper.php */
    --sa-success:       #10B981;
    --sa-warning:       #F59E0B;
    --sa-danger:        #EF4444;
    --sa-info:          #0EA5E9;
    --sa-neutral:       #64748B;

    /* Paces' own tokens, repointed. Everything the theme draws with primary -
       buttons, links, active menu items, focus rings, chart series - follows
       from these three lines. */
    --theme-primary:     var(--sa-indigo);
    --theme-primary-rgb: 79, 70, 229;
    --theme-chart-primary: var(--sa-indigo);
    --theme-chart-primary-rgb: 79, 70, 229;

    --bs-primary:     var(--sa-indigo);
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color:  var(--sa-indigo);
    --bs-link-hover-color: var(--sa-indigo-dark);

    /* Typography.
       The 23 remote font @imports have been removed from app.min.css - the
       original is kept as install/app.min.css.with-google-fonts, which is not
       web-served. They were twenty-three blocking requests to third parties on
       every page load, of which the default skin used one; a college LAN
       without internet stalls for seconds on them, and this panel is the
       screen somebody opens when something is already wrong.

       So the stack is local and explicit rather than accidental. If the exact
       Paces typeface is ever wanted, self-host it and point these two lines at
       it - do not put the @imports back. */
    --theme-font-sans-serif: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
                             "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --theme-font-family-secondary: var(--theme-font-sans-serif);
    --bs-body-font-family: var(--theme-font-sans-serif);
}

/* ---------------------------------------------------------------------
   Brand
   --------------------------------------------------------------------- */

.sa-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--sa-gradient);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -0.02em;
    flex: 0 0 auto;
}

.sa-brand-word {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.sa-brand-word .sa-brand-accent { color: var(--sa-gold); }

/* The sidebar collapses to icons at ≤1140px; the word has to go with it or it
   overflows the rail rather than wrapping. */
[data-sidenav-size="condensed"] .sa-brand-word,
[data-sidenav-size="condensed"] .sa-user-card-text { display: none; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */

.btn-primary,
.btn-primary:focus {
    background: var(--sa-gradient);
    border-color: var(--sa-indigo-dark);
}

.btn-primary:hover,
.btn-primary:active {
    background: linear-gradient(135deg, #4338CA 0%, #4F46E5 55%, #6366F1 100%);
    border-color: var(--sa-indigo-dark);
}

.btn-gold {
    background: var(--sa-gradient-gold);
    border-color: var(--sa-gold-dark);
    color: #1f2937;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   Login
   --------------------------------------------------------------------- */

.sa-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(79, 70, 229, 0.16), transparent 60%),
        radial-gradient(900px 500px at 100% 110%, rgba(245, 158, 11, 0.14), transparent 60%);
}

.sa-auth-card {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
}

.sa-auth-strip {
    height: 5px;
    border-radius: 18px 18px 0 0;
    background: var(--sa-gradient);
}

/* ---------------------------------------------------------------------
   Sidebar
   --------------------------------------------------------------------- */

.sa-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
}

.sa-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--sa-gradient);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    flex: 0 0 auto;
}

.sa-user-card-text { min-width: 0; }
.sa-user-card-name { font-weight: 700; font-size: 13px; line-height: 1.2; }
.sa-user-card-role { font-size: 11px; opacity: 0.7; line-height: 1.2; }

/* ---------------------------------------------------------------------
   Empty state - what a screen with no rows says before its module exists
   --------------------------------------------------------------------- */

.sa-empty {
    border: 1px dashed rgba(100, 116, 139, 0.35);
    border-radius: 14px;
    padding: 44px 24px;
    text-align: center;
}

.sa-empty-icon {
    font-size: 34px;
    color: var(--sa-indigo);
    opacity: 0.7;
}

/* ---------------------------------------------------------------------
   Stat tiles. App.initCounter() animates anything carrying data-target, so a
   tile renders its number into that attribute and leaves the text at 0. Never
   use data-target for anything else.
   --------------------------------------------------------------------- */

.sa-stat-value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.sa-stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
}

.sa-stat-note { font-size: 11px; opacity: 0.6; }

/* Module tab strip
   Where the sidebar's third level went. Daily screens on the left, setup
   pushed right past a divider. Scrolls sideways rather than wrapping, so a
   module with many screens keeps one predictable row. */
.sa-module-tabs {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .3rem;
  margin-bottom: 1rem;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: .5rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.sa-module-tabs::-webkit-scrollbar { height: 4px; }
.sa-module-tabs::-webkit-scrollbar-thumb { background: var(--bs-border-color, #e5e7eb); border-radius: 2px; }

.sa-module-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border-radius: .375rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--bs-secondary-color, #6b7280);
  text-decoration: none;
  white-space: nowrap;
  transition: all .18s ease;
}
.sa-module-tab i { font-size: .95rem; line-height: 1; }
.sa-module-tab:hover { background: var(--bs-tertiary-bg, #f3f4f6); color: var(--bs-primary, #4f46e5); }
.sa-module-tab.active { background: var(--bs-primary, #4f46e5); color: #fff; }
.sa-module-tab.active:hover { color: #fff; }

/* everything after this is setup, not daily work */
.sa-module-tabs-split {
  flex: 1 0 auto;
  min-width: .75rem;
  border-left: 1px solid var(--bs-border-color, #e5e7eb);
  align-self: stretch;
  margin: 0 .35rem;
}

@media (max-width: 767px) {
  .sa-module-tab span { display: none; }
  .sa-module-tab i { font-size: 1.05rem; }
  .sa-module-tabs-split { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------------
   Vendor banner preview - messaging/broadcast
   ---------------------------------------------------------------------
   What a broadcast will look like inside a SCHOOL's dashboard, drawn here so
   nobody finds out from a support ticket. It is a mock of the tenant's own
   .event-banner-bar strip, not the strip itself: the two applications share no
   file and never will, so these five variants exist on both sides and the wire
   carries the severity NUMBER between them - never a colour.

   The one exception is severity 6, and it is deliberate. --vb-bg / --vb-fg are
   set from an operator-typed hex that both ends validate with the same
   /^#[0-9A-Fa-f]{6}$/ before it is applied; anything that fails re-validation
   falls back to --info. That is a custom property set from data, not a hex
   written into a view, and it is the only place a colour crosses.
   --------------------------------------------------------------------- */

.sa-vb-frame {
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: .6rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    padding: .85rem;
}

.sa-vb-frame-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .55;
    margin-bottom: .6rem;
}

.sa-vb-strip { display: flex; flex-direction: column; gap: .5rem; }

.sa-vb-bar {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .65rem .85rem;
    border-radius: .5rem;
    border-left: 4px solid transparent;
    font-size: .8125rem;
    line-height: 1.45;
}

.sa-vb-icon { font-size: 1.05rem; line-height: 1.35; flex: 0 0 auto; }
.sa-vb-text { min-width: 0; flex: 1 1 auto; }
.sa-vb-title { font-weight: 700; margin-bottom: .1rem; }
.sa-vb-body { opacity: .92; word-break: break-word; }
.sa-vb-body ul { margin: .25rem 0 0 1rem; padding: 0; }

.sa-vb-btn {
    display: inline-block;
    margin-top: .45rem;
    padding: .2rem .6rem;
    border-radius: .3rem;
    font-size: .75rem;
    font-weight: 600;
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(15, 23, 42, .15);
    color: inherit;
    text-decoration: none;
}

.sa-vb-close { flex: 0 0 auto; opacity: .5; font-size: .9rem; }

.sa-vb-bar--info    { background: rgba(14, 165, 233, .12); border-left-color: var(--sa-info);    color: #075985; }
.sa-vb-bar--success { background: rgba(16, 185, 129, .12); border-left-color: var(--sa-success); color: #065f46; }
.sa-vb-bar--warning { background: rgba(245, 158, 11, .14); border-left-color: var(--sa-warning); color: #78350f; }
.sa-vb-bar--danger  { background: rgba(239, 68, 68, .12);  border-left-color: var(--sa-danger);  color: #7f1d1d; }
.sa-vb-bar--neutral { background: rgba(100, 116, 139, .12); border-left-color: var(--sa-neutral); color: #334155; }

.sa-vb-bar--custom {
    background: var(--vb-bg, rgba(14, 165, 233, .12));
    color: var(--vb-fg, #075985);
    border-left-color: rgba(15, 23, 42, .25);
}

/* The modal variant of the same message, so "Banner + modal" is not something
   an operator has to imagine. */
.sa-vb-modal {
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: .6rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
    background: var(--bs-body-bg, #fff);
    overflow: hidden;
}

.sa-vb-modal-head { padding: .7rem .9rem; font-weight: 700; font-size: .875rem; }
.sa-vb-modal-body { padding: .8rem .9rem; font-size: .8125rem; line-height: 1.5; }

/* The hand-picked school list on the compose screen. A scroll box rather than
   a plugin: three hundred checkboxes with a filter above them needs no
   library, and a library is one more thing to load on a college LAN with no
   internet. */
.sa-picklist {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: .375rem;
    padding: .5rem .65rem;
}

/* Soft badges
   The panel's helpers return badge-soft-<variant> for every status in the
   product - 67 call sites - but the theme ships only badge-soft-primary. The
   other six rendered as an unstyled pill: no fill, no colour, no error
   anywhere. Same shape as the theme's own rule so a theme upgrade cannot
   disagree with these. */
.badge-soft-secondary { --theme-badge-color: var(--theme-secondary); background-color: var(--theme-secondary-bg-subtle); }
.badge-soft-success   { --theme-badge-color: var(--theme-success);   background-color: var(--theme-success-bg-subtle); }
.badge-soft-danger    { --theme-badge-color: var(--theme-danger);    background-color: var(--theme-danger-bg-subtle); }
.badge-soft-warning   { --theme-badge-color: var(--theme-warning);   background-color: var(--theme-warning-bg-subtle); }
.badge-soft-info      { --theme-badge-color: var(--theme-info);      background-color: var(--theme-info-bg-subtle); }
.badge-soft-dark      { --theme-badge-color: var(--theme-dark);      background-color: var(--theme-dark-bg-subtle); }


/* =====================================================================
   THE NAVIGATION SHELL
   ---------------------------------------------------------------------
   The module is chosen once, in Tools, and the rail then belongs to that
   module alone. Three consequences, and all three are why this exists:

     - the rail is short, so it can afford to draw a module's groups as
       headings instead of flattening them into a strip on every page
     - the dashboard has no module, so it has no rail and takes the full
       width
     - nothing in the topbar grows when a ninth module is added

   Sizes are the theme's own custom properties where there is one, so a
   skin change still moves this with it.
   ===================================================================== */

:root {
    --sa-rail-w: 250px;
    --sa-topbar-h: 70px;
    --sa-hairline: rgba(100, 116, 139, .18);
}

/* ---- the two top level entries ---- */
.sa-topnav { display: flex; align-items: center; gap: .15rem; }

.sa-topnav-item {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .8rem; border: 0; background: transparent;
    border-radius: 8px; font-size: .875rem; font-weight: 500;
    color: var(--theme-secondary-color, #64748b); text-decoration: none; cursor: pointer;
    white-space: nowrap; transition: background-color .15s, color .15s;
}
.sa-topnav-item:hover { background: rgba(var(--theme-primary-rgb), .08); color: var(--sa-indigo); }
.sa-topnav-item.active { background: rgba(var(--theme-primary-rgb), .1); color: var(--sa-indigo); font-weight: 600; }
.sa-topnav-item i { font-size: 1.05rem; }
.sa-topnav-caret { font-size: .75rem; opacity: .6; }

/* ---- which module you are inside ---- */
.sa-module-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    margin-left: .35rem; padding: .3rem .45rem .3rem .7rem;
    border: 1px solid var(--sa-hairline); border-radius: 999px;
    font-size: .78rem; font-weight: 600; color: var(--theme-emphasis-color, #1e293b);
    background: var(--theme-tertiary-bg, #f1f5f9);
}
.sa-module-chip > i { color: var(--sa-indigo); font-size: .95rem; }
.sa-module-chip a {
    display: inline-flex; padding: 2px; border-radius: 50%;
    color: var(--theme-secondary-color, #64748b); line-height: 1;
}
.sa-module-chip a:hover { background: rgba(239, 68, 68, .12); color: var(--sa-danger); }

/* ---- the launcher ---- */
.sa-scrim {
    position: fixed; inset: var(--sa-topbar-h) 0 0 0; z-index: 1034;
    background: rgba(15, 23, 42, .35);
    opacity: 0; visibility: hidden; transition: opacity .18s;
}
.sa-scrim.show { opacity: 1; visibility: visible; }

.sa-launcher {
    position: fixed; top: var(--sa-topbar-h); left: 0; right: 0; z-index: 1036;
    background: var(--theme-secondary-bg, #fff);
    border-bottom: 1px solid var(--sa-hairline);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
    max-height: calc(100vh - var(--sa-topbar-h)); overflow-y: auto;
    transform: translateY(-14px); opacity: 0; visibility: hidden;
    transition: transform .2s ease, opacity .2s ease;
}
.sa-launcher.show { transform: translateY(0); opacity: 1; visibility: visible; }
.sa-launcher-inner { max-width: 1180px; margin: 0 auto; padding: 1.4rem 1.5rem 1.6rem; }
.sa-launcher-title {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--theme-secondary-color, #64748b); font-weight: 700; margin: 0 0 .9rem;
}

.sa-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .75rem; }

.sa-tile {
    display: flex; gap: .8rem; align-items: flex-start; padding: .95rem;
    border: 1px solid var(--sa-hairline); border-radius: 12px;
    background: var(--theme-secondary-bg, #fff); text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sa-tile:hover {
    border-color: var(--sa-indigo-light);
    box-shadow: 0 8px 20px rgba(var(--theme-primary-rgb), .12);
    transform: translateY(-2px);
}
.sa-tile-here { border-color: var(--sa-indigo); box-shadow: 0 0 0 1px var(--sa-indigo) inset; }
.sa-tile-icon {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.sa-tile-text { display: block; min-width: 0; }
.sa-tile-name { display: block; font-size: .9rem; font-weight: 600; color: var(--theme-emphasis-color, #1e293b); }
.sa-tile-sub { display: block; font-size: .74rem; color: var(--theme-secondary-color, #64748b); line-height: 1.35; margin-top: .15rem; }
.sa-tile-count { display: inline-block; font-size: .68rem; font-weight: 600; color: var(--sa-indigo); margin-top: .35rem; }

.sa-a-indigo  { background: rgba(79, 70, 229, .1);   color: var(--sa-indigo); }
.sa-a-gold    { background: rgba(245, 158, 11, .13); color: var(--sa-gold-dark); }
.sa-a-info    { background: rgba(14, 165, 233, .12); color: var(--sa-info); }
.sa-a-success { background: rgba(16, 185, 129, .12); color: var(--sa-success); }
.sa-a-neutral { background: rgba(100, 116, 139, .12); color: var(--sa-neutral); }

/* ---- the rail ---- */
.sa-rail { background: var(--theme-secondary-bg, #fff); border-right: 1px solid var(--sa-hairline); }

.sa-rail-head {
    display: flex; align-items: center; gap: .6rem;
    padding: 1rem 1rem .8rem; border-bottom: 1px solid var(--sa-hairline);
}
.sa-rail-head-icon {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem; background: rgba(var(--theme-primary-rgb), .1); color: var(--sa-indigo);
}
.sa-rail-head-text { min-width: 0; }
.sa-rail-head-text strong { display: block; font-size: .95rem; color: var(--theme-emphasis-color, #1e293b); }
.sa-rail-head-text small { display: block; font-size: .72rem; color: var(--theme-secondary-color, #64748b); line-height: 1.3; }

.sa-rail-close { display: none; }

.sa-rail-nav { padding: .6rem .55rem .5rem; }
.sa-rail-title {
    font-size: .67rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--theme-secondary-color, #64748b); font-weight: 700; padding: .85rem .6rem .35rem;
}
.sa-rail-link {
    display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem;
    margin-bottom: 1px; border-radius: 8px;
    font-size: .845rem; color: var(--theme-secondary-color, #64748b); text-decoration: none;
}
.sa-rail-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; opacity: .8; }
.sa-rail-link:hover { background: rgba(100, 116, 139, .09); color: var(--theme-emphasis-color, #1e293b); }
.sa-rail-link.active { background: rgba(var(--theme-primary-rgb), .1); color: var(--sa-indigo); font-weight: 600; }
.sa-rail-link.active i { opacity: 1; }

.sa-rail-back {
    display: flex; align-items: center; gap: .5rem;
    margin: .2rem .6rem 1.5rem; padding: .5rem .6rem; border-radius: 8px;
    font-size: .8rem; color: var(--theme-secondary-color, #64748b); text-decoration: none;
}
.sa-rail-back:hover { background: rgba(100, 116, 139, .09); color: var(--theme-emphasis-color, #1e293b); }

/* ---- no module, no rail ----
   The theme indents .content-page by the rail's width from several
   selectors, so the override is on the body class and marked important -
   the alternative is chasing a minified stylesheet's specificity every
   time the theme is updated. */
body.sa-no-rail .sidenav-menu { display: none !important; }
body.sa-no-rail .content-page { margin-left: 0 !important; }

@media (max-width: 991.98px) {
    .sa-topnav-label { display: none; }
    .sa-rail-close { display: inline-flex; }
}
/* ---- corrections found by measuring, not by assuming ----------------
   1. .app-topbar carries margin-inline-start: calc(20px + sidenav-width)
      from the theme, so hiding the rail leaves the header itself pushed
      right with an empty column beside it. It has to move too.
   2. There is no --theme-topbar-height in the theme at all; the 70px
      below is only a first paint value and the launcher script replaces
      it with the header's measured bottom edge, so the panel opens flush
      under it at any skin or zoom. */
body.sa-no-rail .app-topbar {
    -webkit-margin-start: 0 !important;
    margin-inline-start: 0 !important;
}

/* =====================================================================
   THE COLUMN CHOOSER
   ---------------------------------------------------------------------
   views/gridsettings.php was written against grid-col-card, -label,
   -tools, -eye, -drag, .is-off and .is-dragging, and NOT ONE of them was
   ever defined - in this sheet or in the theme. So the modal rendered
   its labels as loose text with two icons jammed against them, and
   nothing looked switchable or draggable because nothing said it was.

   Everything below is layout and state. The colours are the same tokens
   the rest of this sheet uses.
   ===================================================================== */

.grid-col-card {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .65rem;
    border: 1px solid var(--sa-hairline);
    border-radius: 8px;
    background: var(--theme-secondary-bg, #fff);
    transition: border-color .15s, background-color .15s, opacity .15s;
}
.grid-col-card:hover { border-color: var(--sa-indigo-light); }

/* Switched off: dimmed and dashed, so "off" is legible at a glance across
   twelve of them rather than needing each eye to be read. */
.grid-col-card.is-off {
    border-style: dashed;
    background: transparent;
    opacity: .55;
}

.grid-col-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .85rem;
    font-weight: 500;
    color: var(--theme-emphasis-color, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-col-tools {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}

.grid-col-eye,
.grid-col-drag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 1rem;
    color: var(--theme-secondary-color, #64748b);
}

.grid-col-eye { cursor: pointer; }
.grid-col-eye:hover { background: rgba(var(--theme-primary-rgb), .1); color: var(--sa-indigo); }
.grid-col-card:not(.is-off) .grid-col-eye:not(.is-locked) { color: var(--sa-indigo); }

/* A locked column cannot be switched off, so its eye must not invite the
   click - no hover, and a cursor that says so. */
.grid-col-eye.is-locked { cursor: not-allowed; opacity: .45; }
.grid-col-eye.is-locked:hover { background: transparent; color: var(--theme-secondary-color, #64748b); }

.grid-col-drag { cursor: grab; }
.grid-col-drag:active { cursor: grabbing; }
.grid-col-drag:hover { background: rgba(100, 116, 139, .12); }

.grid-col-item.is-dragging .grid-col-card {
    border-color: var(--sa-indigo);
    border-style: solid;
    box-shadow: 0 6px 16px rgba(var(--theme-primary-rgb), .18);
    opacity: .9;
}