/* ==========================================================================
   Moviegoers CMS — design layer
   Loaded after style.css. Purely additive: the vendor theme is never edited,
   so it can still be replaced wholesale later.

   PALETTE SOURCE
   Every brand value below was sampled directly from the Moviegoers Pass app
   screenshot rather than picked by eye, so the CMS and the customer-facing
   product read as one product:

       #414141  app top bar               -> CMS top bar
       #2a2b2c  app bottom nav            -> CMS sidebar
       #f9fafb  app page background       -> CMS page background
       #212121  app heading text          -> CMS body text
       #a1a6ad  app secondary text        -> CMS muted text
       #883ae2  app VIP badge / selected  -> CMS primary action
       #f9d952  app NEW badge             -> CMS brand highlight
       #efb958  app highlighted title     -> CMS brand accent (nav active)

   Role split mirrors the app: violet is the interactive/premium accent
   (buttons, current page, focus), amber is the brand marker (active nav,
   highlights). Two accents, each with one job.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Violet — primary interactive. From the app's VIP badge. */
    --mg-violet: #883ae2;
    --mg-violet-strong: #7229cc;
    --mg-violet-soft: rgba(136, 58, 226, 0.1);
    --mg-violet-ring: rgba(136, 58, 226, 0.32);
    --mg-violet-ink: #5f21ab;     /* text-safe violet on light surfaces */

    /* Amber — brand marker. From the app's NEW badge and highlighted titles. */
    --mg-amber: #f9d952;
    --mg-amber-warm: #efb958;
    --mg-amber-strong: #d9a12f;
    --mg-amber-soft: rgba(239, 185, 88, 0.16);
    --mg-amber-ring: rgba(249, 217, 82, 0.4);
    --mg-amber-ink: #7a5300;      /* text-safe amber on light surfaces */

    /* Neutral ramp, anchored to the app's charcoals and near-white. */
    --mg-900: #212121;            /* app heading text */
    --mg-850: #2a2b2c;            /* app bottom nav  -> sidebar */
    --mg-800: #333435;
    --mg-700: #414141;            /* app top bar     -> top bar */
    --mg-600: #55585c;
    --mg-500: #6d7278;
    --mg-400: #a1a6ad;            /* app secondary text */
    --mg-300: #c8ccd2;
    --mg-200: #e3e6ea;
    --mg-100: #eff1f4;
    --mg-050: #f9fafb;            /* app page background */
    --mg-000: #ffffff;

    /* Semantic.
       Pill text sits at 11.5px/650, which is below the WCAG "large text"
       threshold, so each of these has to clear 4.5:1 against its own soft
       background — not just against white. These values are the checked ones. */
    --mg-success: #0f6e49;        /* 5.54:1 on --mg-success-soft */
    --mg-success-soft: #e3f5ec;
    --mg-warning: #8a5800;        /* 5.37:1 on --mg-warning-soft */
    --mg-warning-soft: #fdf0da;
    --mg-danger: #c02a37;         /* 5.01:1 on --mg-danger-soft */
    --mg-danger-soft: #fdeaec;
    --mg-info: #1f6ea8;
    --mg-info-soft: #e6f1f9;
    --mg-pill-neutral-text: #55585c;

    /* Surface + text */
    --mg-bg: var(--mg-050);
    --mg-surface: var(--mg-000);
    --mg-border: var(--mg-200);
    --mg-text: var(--mg-900);
    --mg-text-muted: var(--mg-500);

    /* Shape + depth. Shadows are layered and low-alpha; a single hard shadow
       is the fastest way to make an admin look dated. */
    --mg-radius-sm: 8px;
    --mg-radius: 12px;
    --mg-radius-lg: 16px;
    --mg-shadow-xs: 0 1px 2px rgba(16, 20, 30, 0.04);
    --mg-shadow-sm: 0 1px 2px rgba(16, 20, 30, 0.05), 0 2px 6px rgba(16, 20, 30, 0.04);
    --mg-shadow: 0 1px 3px rgba(16, 20, 30, 0.06), 0 8px 24px rgba(16, 20, 30, 0.06);
    --mg-shadow-lg: 0 2px 6px rgba(16, 20, 30, 0.07), 0 18px 44px rgba(16, 20, 30, 0.1);

    --mg-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

body {
    background: var(--mg-bg) !important;
    color: var(--mg-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.006em;
}

.content-body {
    background: var(--mg-bg);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--mg-text);
    letter-spacing: -0.018em;
}

a {
    transition: color var(--mg-transition);
}

/* --------------------------------------------------------------------------
   3. Topbar
   The stock header was a saturated yellow-to-orange gradient spanning the full
   width, which fought the amber accent everywhere else on the page.
   -------------------------------------------------------------------------- */

.header,
.header .top-head,
.top-head.container-fluid {
    /* #414141 — the app's top bar, matched exactly. */
    background: var(--mg-700) !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: none !important;
}

/* Single flex row, everything centred on one axis.
   height:100% keeps this filling the theme's 6rem .header rather than
   introducing a second, conflicting height. */
.header .top-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px;
    padding: 0 24px !important;
    height: 100%;
}

/* The logo block is a separate 300px element beside the top bar. The theme
   paints it white, which left a bright slab next to the dark chrome. */
.nav-header {
    background-color: var(--mg-850) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: none !important;
}

.nav-header .brand-logo {
    display: flex;
    align-items: center;
    height: 100%;
}

.header .top-head .nav-control {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.header .top-head .nav-control .hamburger {
    display: flex;
    align-items: center;
}

.header .nav-control .hamburger .line {
    background: var(--mg-300) !important;
}

.header .left-header .nav-link.btn {
    background: transparent !important;
    padding: 0 !important;
    margin: 0;
    display: flex;
    align-items: center;
}

.header .left-header ul {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.header .left-header .nav-link.btn > a,
.header .left-header .nav-link.btn button,
.mg-topbar__btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    color: var(--mg-300) !important;
    border-radius: var(--mg-radius-sm);
    padding: 8px 14px !important;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: background var(--mg-transition), color var(--mg-transition),
        border-color var(--mg-transition);
}

.header .left-header .nav-link.btn > a:hover,
.header .left-header .nav-link.btn button:hover,
.mg-topbar__btn:hover {
    background: var(--mg-amber-soft);
    border-color: var(--mg-amber-ring);
    color: var(--mg-amber) !important;
}

/* --------------------------------------------------------------------------
   3a. Right cluster: fullscreen + account
   The theme floats these ("header-right > div { float: right }") inside a flex
   parent, which is why they never sat on the vertical centre line.
   -------------------------------------------------------------------------- */

.header .top-head .header-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
}

.header .top-head .header-right > div {
    float: none !important;
    margin-left: 0 !important;
    display: flex;
    align-items: center;
}

/* widget-5 / widget-7 both ship a striped dark gradient + heavy shadow. */
.header .widget-5,
.header .widget-7,
.header .mg-topbar__tool,
.header .mg-account {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
}

.header .fullscreen .full {
    display: flex;
    align-items: center;
}

.mg-topbar__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--mg-radius-sm);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--mg-300) !important;
    font-size: 14px;
    text-decoration: none;
    transition: background var(--mg-transition), color var(--mg-transition),
        border-color var(--mg-transition);
}

.mg-topbar__icon-btn:hover,
.mg-topbar__icon-btn:focus-visible {
    background: var(--mg-amber-soft);
    border-color: var(--mg-amber-ring);
    color: var(--mg-amber) !important;
    text-decoration: none;
}

/* Account chip */
.mg-account .account-wrapper,
.mg-account .account-control {
    position: relative;
    display: flex;
    align-items: center;
}

.mg-account__chip {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 10px 0 6px !important;
    border-radius: var(--mg-radius-sm);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transition: background var(--mg-transition), border-color var(--mg-transition);
}

.mg-account__chip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.16);
    text-decoration: none;
}

.mg-account__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--mg-amber);
    color: var(--mg-900);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
}

.mg-account__meta {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.25;
    min-width: 0;
}

.mg-account__name {
    color: var(--mg-100) !important;
    font-weight: 550;
    font-size: 13px;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mg-account__role {
    color: var(--mg-400) !important;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mg-account__caret {
    color: var(--mg-400);
    font-size: 10px;
    margin-left: 2px;
    transition: transform var(--mg-transition);
}

.mg-account .account-control:hover .mg-account__caret {
    transform: rotate(180deg);
}

/* Dropdown panel. The theme's version relies on a ::before pseudo-element for
   its background and a 36px top pad; both are replaced with a real surface. */
.mg-account__menu {
    /* The panel opens on :hover of .account-control (theme rule). The outer
       element stays transparent and carries a 8px top pad, which doubles as a
       hover bridge — without it the cursor crosses dead space between the chip
       and the menu and the menu closes. */
    top: 38px !important;
    right: 0 !important;
    min-width: 232px !important;
    min-height: 0 !important;
    padding: 8px 0 0 !important;
    border-radius: var(--mg-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mg-account__menu:before {
    display: none !important;
}

.mg-account__menu-inner {
    background: var(--mg-surface) !important;
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
    box-shadow: var(--mg-shadow-lg) !important;
    overflow: hidden;
    padding: 0 !important;
    text-align: left;
}

.mg-account__identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mg-border);
}

.mg-account__identity-name {
    font-size: 13px;
    font-weight: 650;
    color: var(--mg-text);
    word-break: break-word;
}

.mg-account__identity-mail {
    font-size: 12px;
    color: var(--mg-text-muted);
    word-break: break-word;
}

.mg-account__logout-form {
    margin: 0;
    padding: 6px;
}

.mg-account__logout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--mg-radius-sm);
    background: transparent;
    color: var(--mg-danger);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background var(--mg-transition);
}

.mg-account__logout i {
    font-size: 13px;
    width: 16px;
    text-align: center;
}

.mg-account__logout:hover {
    background: var(--mg-danger-soft);
}

/* --------------------------------------------------------------------------
   4. Sidebar
   -------------------------------------------------------------------------- */

.left-panel {
    /* #2a2b2c — the app's bottom nav bar. Sits a step darker than the top
       bar so the two pieces of chrome read as distinct planes. */
    background: var(--mg-850) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.left-panel .main-menu > li > a {
    border-radius: var(--mg-radius-sm);
    margin: 2px 12px;
    color: var(--mg-300) !important;
    font-weight: 500;
    transition: background var(--mg-transition), color var(--mg-transition);
}

.left-panel .main-menu > li > a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--mg-000) !important;
}

/* The active item was a solid amber slab. A soft tint with an amber rail
   reads as a selection rather than a highlighter stripe. */
.left-panel .main-menu > li.active > a {
    background: var(--mg-amber-soft) !important;
    background-image: none !important;
    color: var(--mg-amber) !important;
    position: relative;
}

.left-panel .main-menu > li.active > a::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--mg-amber);
}

.left-panel .main-menu > li.active > a i,
.left-panel .main-menu > li > a:hover i {
    color: var(--mg-amber) !important;
}

.left-panel .mm-collapse a {
    color: var(--mg-400) !important;
    font-size: 13.5px;
    border-radius: 6px;
    transition: color var(--mg-transition), background var(--mg-transition);
}

.left-panel .mm-collapse a:hover {
    color: var(--mg-100) !important;
    background: rgba(255, 255, 255, 0.04);
}

.left-panel .mm-collapse a.text-yellow {
    color: var(--mg-amber) !important;
    font-weight: 600;
}

.sidebar-widgets .copyright p {
    color: var(--mg-500) !important;
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */

.card {
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-lg);
    box-shadow: var(--mg-shadow-sm) !important;
    transition: box-shadow var(--mg-transition);
}

.card.shadow,
.card.shadow-sm {
    box-shadow: var(--mg-shadow-sm) !important;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--mg-border);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.card-title {
    font-size: 15.5px;
    font-weight: 650;
    margin: 0;
    color: var(--mg-text);
}

.card-body {
    padding: 22px;
}

/* KPI widgets on the dashboard */
.widget.card .card-body {
    padding: 22px 20px;
}

.widget.card .card-body i {
    color: var(--mg-amber);
    opacity: 0.9;
}

.widget.card .card-body span.d-block {
    color: var(--mg-text-muted);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.widget.card .card-body h3 {
    font-size: 26px;
    font-weight: 680;
    margin-top: 8px;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.widget.card .card-body h3 small {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--mg-text-muted);
    letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   6. Page header
   The breadcrumb used to sit under the primary action button because both were
   floated into the same column with no wrapping rules.
   -------------------------------------------------------------------------- */

.mg-page-header {
    padding: 4px 0 22px;
}

/* Breadcrumb gets its own row, flush right. Sharing a half-width column with
   the action button made it read as centred. */
.mg-page-header__crumbs {
    background: transparent;
    padding: 0;
    margin: 0 0 10px;
    font-size: 12.5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.mg-page-header__crumbs .breadcrumb-item,
.mg-page-header__crumbs .breadcrumb-item a {
    color: var(--mg-text-muted);
}

.mg-page-header__crumbs .breadcrumb-item a:hover {
    color: var(--mg-violet-ink);
}

.mg-page-header__crumbs .breadcrumb-item.active span {
    color: var(--mg-600);
    font-weight: 600;
}

.mg-page-header__main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.mg-page-header__titles {
    min-width: 0;
}

.mg-page-header__title {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.028em;
    margin: 0;
    color: var(--mg-text);
}

.mg-page-header__subtitle {
    font-size: 13px;
    color: var(--mg-text-muted);
    margin: 5px 0 0;
}

.mg-page-header__action {
    white-space: nowrap;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* --------------------------------------------------------------------------
   7. Buttons
   Primary is amber; secondary is a neutral slate outline. The stock indigo
   primary is overridden so nothing renders purple against the amber brand.
   -------------------------------------------------------------------------- */

.btn {
    border-radius: var(--mg-radius-sm);
    font-weight: 600;
    font-size: 13.5px;
    padding: 9px 16px;
    letter-spacing: -0.005em;
    border: 1px solid transparent;
    box-shadow: var(--mg-shadow-xs);
    transition: background var(--mg-transition), border-color var(--mg-transition),
        color var(--mg-transition), box-shadow var(--mg-transition),
        transform var(--mg-transition);
}

.btn:active {
    transform: translateY(1px);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12.5px;
}

/* Violet primary, matching the app's VIP badge and selected-card ring.
   The theme's stock indigo (#7366ff) is a different, bluer hue — this is the
   sampled #883ae2. */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background: var(--mg-violet) !important;
    border-color: var(--mg-violet) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--mg-violet-strong) !important;
    border-color: var(--mg-violet-strong) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px var(--mg-violet-ring);
}

.btn-secondary,
.btn-outline-secondary {
    background: var(--mg-surface) !important;
    border-color: var(--mg-border) !important;
    color: var(--mg-600) !important;
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
    background: var(--mg-050) !important;
    border-color: var(--mg-300) !important;
    color: var(--mg-text) !important;
}

.btn-danger {
    background: var(--mg-danger) !important;
    border-color: var(--mg-danger) !important;
    color: #fff !important;
}

.btn-danger:hover {
    background: #a52029 !important;
    border-color: #a52029 !important;
}

.btn-danger:disabled {
    opacity: 0.5;
}

.btn-outline-dark {
    border-color: var(--mg-border) !important;
    color: var(--mg-600) !important;
    background: var(--mg-surface) !important;
}

.btn-outline-dark:hover {
    background: var(--mg-050) !important;
    color: var(--mg-text) !important;
}

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */

label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mg-600);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.form-control,
.form-select,
select.form-control {
    border-radius: var(--mg-radius-sm);
    border: 1px solid var(--mg-border);
    background: var(--mg-surface);
    color: var(--mg-text);
    font-size: 14px;
    padding: 10px 13px;
    min-height: 42px;
    box-shadow: var(--mg-shadow-xs);
    transition: border-color var(--mg-transition), box-shadow var(--mg-transition);
}

.form-control::placeholder {
    color: var(--mg-400);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mg-violet) !important;
    box-shadow: 0 0 0 3px var(--mg-violet-ring) !important;
    outline: none;
}

.form-group {
    margin-bottom: 18px;
}

.mg-req::after {
    content: " *";
    color: var(--mg-danger);
}

.mg-field-error {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--mg-danger);
    font-weight: 500;
}

.form-control.is-invalid,
.mg-input-invalid {
    border-color: var(--mg-danger) !important;
    box-shadow: 0 0 0 3px var(--mg-danger-soft) !important;
}

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */

table.dataTable,
.card table {
    font-size: 13.5px;
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100% !important;
}

table.dataTable thead tr,
.card table thead tr {
    background: var(--mg-050) !important;
}

table.dataTable thead th,
.card table thead th {
    color: var(--mg-500) !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 13px 14px !important;
    border-top: 1px solid var(--mg-border) !important;
    border-bottom: 1px solid var(--mg-border) !important;
    white-space: nowrap;
    vertical-align: middle;
}

table.dataTable thead th:first-child,
.card table thead th:first-child {
    border-top-left-radius: var(--mg-radius-sm);
    border-bottom-left-radius: var(--mg-radius-sm);
    border-left: 1px solid var(--mg-border) !important;
}

table.dataTable thead th:last-child,
.card table thead th:last-child {
    border-top-right-radius: var(--mg-radius-sm);
    border-bottom-right-radius: var(--mg-radius-sm);
    border-right: 1px solid var(--mg-border) !important;
}

table.dataTable tbody td,
.card table tbody td {
    padding: 13px 14px !important;
    border-bottom: 1px solid var(--mg-border) !important;
    color: var(--mg-text) !important;
    vertical-align: middle !important;
}

table.dataTable tbody tr:last-child td,
.card table tbody tr:last-child td {
    border-bottom: 0 !important;
}

table.dataTable tbody tr,
.card table tbody tr {
    transition: background var(--mg-transition);
}

table.dataTable tbody tr:hover,
.card table tbody tr:hover {
    background: var(--mg-050);
}

/* Numeric columns line up when the digits are tabular. */
table.dataTable td.mg-num,
table.dataTable td.mg-nowrap,
.mg-num {
    font-variant-numeric: tabular-nums;
}

.mg-nowrap {
    white-space: nowrap;
}

.mg-muted {
    color: var(--mg-text-muted) !important;
    font-size: 12.5px;
}

/* Sort indicators: the theme's PNG arrows are replaced with a crisper
   CSS caret that inherits colour. */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none !important;
    position: relative;
    padding-right: 26px !important;
    cursor: pointer;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    display: block !important;
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.28;
    transform: translateY(-70%) rotate(45deg);
    transition: opacity var(--mg-transition), transform var(--mg-transition);
}

table.dataTable thead .sorting_asc::after {
    transform: translateY(-25%) rotate(-135deg);
    opacity: 1;
    color: var(--mg-violet);
}

table.dataTable thead .sorting_desc::after {
    opacity: 1;
    color: var(--mg-violet);
}

table.dataTable thead th:hover::after {
    opacity: 0.6;
}

/* DataTables chrome */
.dataTables_wrapper {
    padding-top: 2px;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 16px;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--mg-text-muted) !important;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.dataTables_wrapper .dataTables_filter input {
    border-radius: var(--mg-radius-sm);
    border: 1px solid var(--mg-border);
    background: var(--mg-surface);
    padding: 8px 12px 8px 34px;
    min-width: 240px;
    font-size: 13.5px;
    box-shadow: var(--mg-shadow-xs);
    /* Inline magnifier so no icon font dependency */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 15px 15px;
    transition: border-color var(--mg-transition), box-shadow var(--mg-transition);
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--mg-violet);
    box-shadow: 0 0 0 3px var(--mg-violet-ring);
    outline: none;
}

.dataTables_wrapper .dataTables_length select {
    border-radius: 7px;
    border: 1px solid var(--mg-border);
    background: var(--mg-surface);
    padding: 6px 26px 6px 10px;
    font-size: 13px;
    color: var(--mg-text);
}

.dataTables_wrapper .dataTables_info {
    color: var(--mg-text-muted) !important;
    font-size: 12.5px;
    padding-top: 18px !important;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 14px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 7px !important;
    border: 1px solid transparent !important;
    padding: 6px 12px !important;
    margin: 0 2px;
    font-size: 13px;
    color: var(--mg-600) !important;
    background: transparent !important;
    transition: background var(--mg-transition), color var(--mg-transition),
        border-color var(--mg-transition);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--mg-100) !important;
    color: var(--mg-text) !important;
    border-color: var(--mg-border) !important;
    box-shadow: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--mg-violet) !important;
    border-color: var(--mg-violet) !important;
    color: #ffffff !important;
    font-weight: 650;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--mg-300) !important;
    background: transparent !important;
    border-color: transparent !important;
    cursor: default;
}

/* --------------------------------------------------------------------------
   10. Row actions
   -------------------------------------------------------------------------- */

.mg-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.mg-inline-form {
    display: inline-flex;
    margin: 0;
}

.mg-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--mg-400);
    cursor: pointer;
    text-decoration: none;
    font-size: 13px;
    transition: background var(--mg-transition), color var(--mg-transition);
}

.mg-icon-btn:hover,
.mg-icon-btn:focus-visible {
    background: var(--mg-100);
    color: var(--mg-text);
    text-decoration: none;
}

.mg-icon-btn--danger:hover,
.mg-icon-btn--danger:focus-visible {
    background: var(--mg-danger-soft);
    color: var(--mg-danger);
}

.mg-icon-btn--success:hover,
.mg-icon-btn--success:focus-visible {
    background: var(--mg-success-soft);
    color: var(--mg-success);
}

/* --------------------------------------------------------------------------
   11. Status pills — muted tint + darker text
   -------------------------------------------------------------------------- */

.mg-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: 0.015em;
    text-transform: capitalize;
    white-space: nowrap;
    border: 1px solid transparent;
}

.mg-pill--paid,
.mg-pill--success {
    background: var(--mg-success-soft);
    color: var(--mg-success);
    border-color: rgba(20, 135, 90, 0.16);
}

.mg-pill--pending {
    background: var(--mg-warning-soft);
    color: var(--mg-warning);
    border-color: rgba(167, 106, 0, 0.16);
}

.mg-pill--failed,
.mg-pill--cancelled {
    background: var(--mg-danger-soft);
    color: var(--mg-danger);
    border-color: rgba(192, 42, 55, 0.16);
}

.mg-pill--neutral {
    background: var(--mg-100);
    color: var(--mg-pill-neutral-text);
    border-color: var(--mg-border);
}

/* Legacy theme badges, aligned to the same language */
.badge {
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 650;
    padding: 3px 9px;
    letter-spacing: 0.015em;
}

.badge-success {
    background: var(--mg-success-soft) !important;
    color: var(--mg-success) !important;
}

.badge-danger {
    background: var(--mg-danger-soft) !important;
    color: var(--mg-danger) !important;
}

.badge-primary {
    background: var(--mg-violet-soft) !important;
    color: var(--mg-violet-ink) !important;
}

/* --------------------------------------------------------------------------
   12. Alerts
   -------------------------------------------------------------------------- */

.mg-alert-stack {
    padding: 20px 24px 0;
}

.mg-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border-radius: var(--mg-radius);
    border: 1px solid transparent;
    font-size: 13.5px;
    line-height: 1.55;
    box-shadow: var(--mg-shadow-xs);
    animation: mg-alert-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mg-alert-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.mg-alert__icon {
    font-size: 15px;
    margin-top: 2px;
    flex: 0 0 auto;
}

.mg-alert__body { flex: 1 1 auto; min-width: 0; }

.mg-alert__list {
    margin: 6px 0 0;
    padding-left: 18px;
}

.mg-alert__list li + li { margin-top: 3px; }

.mg-alert__close {
    flex: 0 0 auto;
    background: none;
    border: 0;
    font-size: 19px;
    line-height: 1;
    opacity: 0.5;
    cursor: pointer;
    color: inherit;
    padding: 0 2px;
    transition: opacity var(--mg-transition);
}

.mg-alert__close:hover { opacity: 1; }

.mg-alert--success {
    background: var(--mg-success-soft);
    border-color: rgba(20, 135, 90, 0.2);
    color: var(--mg-success);
}

.mg-alert--danger {
    background: var(--mg-danger-soft);
    border-color: rgba(192, 42, 55, 0.2);
    color: var(--mg-danger);
}

.mg-alert--warning {
    background: var(--mg-warning-soft);
    border-color: rgba(167, 106, 0, 0.2);
    color: var(--mg-warning);
}

/* --------------------------------------------------------------------------
   13. Empty states
   -------------------------------------------------------------------------- */

.mg-empty {
    text-align: center;
    padding: 56px 20px;
    color: var(--mg-text-muted);
}

.mg-empty__icon {
    font-size: 26px;
    color: var(--mg-400);
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--mg-100);
}

.mg-empty__title {
    font-size: 15px;
    font-weight: 650;
    color: var(--mg-text);
    margin-bottom: 5px;
}

.mg-empty__text {
    font-size: 13.5px;
    margin-bottom: 18px;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   14. Thumbnails
   -------------------------------------------------------------------------- */

.mg-thumb {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 50%;
    background: var(--mg-100);
    border: 1px solid var(--mg-border);
    flex: 0 0 auto;
}

.mg-thumb--square {
    border-radius: 6px;
    width: 34px;
    height: 48px;
}

/* --------------------------------------------------------------------------
   15. Footer + focus
   -------------------------------------------------------------------------- */

.footer {
    background: transparent;
    border-top: 1px solid var(--mg-border);
}

.footer .copyright p {
    color: var(--mg-text-muted);
    font-size: 12.5px;
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 2px solid var(--mg-violet);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .dataTables_wrapper .dataTables_filter input {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 767px) {
    /* On narrow screens a right-aligned breadcrumb above a left-aligned title
       looks disconnected, so both sit left. */
    .mg-page-header__crumbs {
        justify-content: flex-start;
    }

    .mg-page-header__main {
        align-items: flex-start;
    }

    .mg-page-header__action {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .card-body { padding: 16px; }
    .mg-alert-stack { padding: 16px 16px 0; }
    .mg-page-header__title { font-size: 19px; }
}