/*
 * A small, hand-maintained CSS layer that gives Blade views an Ant-Design-
 * style look (tokens, form controls, buttons, cards) without pulling in
 * React or the antd package itself. Alpine.js supplies the interactivity
 * that used to come from jQuery/iCheck/Bootstrap JS.
 *
 * Start here: the auth pages (login, register, password reset, verify).
 * Extend this file as more of the app is rewritten in the same language,
 * rather than starting a second theme file.
 */

:root {
    /* Brand: yellow/gold, using AntD's own gold palette so the shades
       (hover/active/tint) stay consistent with the rest of the language
       rather than being invented ad hoc. --c-on-primary is the text color
       for anything painted with --c-primary: gold is too light for white
       text to pass contrast, so filled buttons use dark text instead. */
    --c-primary: #faad14;
    --c-primary-hover: #ffc53d;
    --c-primary-active: #d48806;
    --c-primary-bg: #fffbe6;
    --c-on-primary: #1f1f1f;

    /* Text links stay a darker gold shade rather than the raw --c-primary:
       #faad14 on white fails contrast for small text (it's tuned to sit on
       a filled button, not to be read as text). */
    --c-link: #ad6800;
    --c-link-hover: #874d00;

    --c-success: #52c41a;
    --c-success-bg: #f6ffed;
    --c-error: #ff4d4f;
    --c-error-bg: #fff2f0;

    --c-text: #1f1f1f;
    --c-text-secondary: #595959;
    --c-text-tertiary: #8c8c8c;
    --c-border: #d9d9d9;
    /* Muted gold, not the full-brightness --c-primary: a bright #faad14
       outline on the #f0f0f0 field background read as too vivid. */
    --c-border-hover: #d48806;
    --c-bg-layout: #f5f5f5;
    --c-white: #ffffff;
    /* AntD's gray-3: used for surfaces that read as "white" (card, inputs,
       default button) per request, distinct from true --c-white. */
    --c-gray-3: #f0f0f0;
    --c-gray-2: #fafafa;

    --radius-sm: 6px;
    --radius-md: 8px;

    --shadow-card: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12);

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.antd * {
    box-sizing: border-box;
}

.antd {
    font-family: var(--font-sans);
    color: var(--c-text);
}

[x-cloak] {
    display: none !important;
}

/* ---- Auth page: centered card over a full-bleed photo ---- */

.auth-page {
    position: relative;
    min-height: 100vh;
    margin: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.auth-page__scrim {
    /* Dims and evens out the photo so the centered card reads clearly,
       without flattening it into a plain color like the old bg image did. */
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 30, 66, 0.55) 0%, rgba(9, 30, 66, 0.72) 100%);
}

.auth-center {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--c-gray-3);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 40px 32px;
}

@media (max-width: 480px) {
    .auth-card {
        padding: 32px 24px;
    }
}

.auth-card__logo {
    display: block;
    width: 160px;
    margin: 0 auto 20px;
}

.auth-card__title {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text-secondary);
    margin-bottom: 24px;
    letter-spacing: 0.2px;
}

.auth-card h2 {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--c-text);
}

.auth-card__subtitle {
    font-size: 14px;
    color: var(--c-text-secondary);
    margin: 0 0 28px;
}

/* ---- Form controls ---- */

.form-item {
    margin-bottom: 20px;
}

.form-item:last-of-type {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text);
    margin-bottom: 6px;
}

.input-affix {
    position: relative;
    display: flex;
    align-items: center;
}

.input-affix__icon {
    position: absolute;
    left: 12px;
    display: inline-flex;
    color: var(--c-text-tertiary);
    pointer-events: none;
}

/* .form-control is also Bootstrap 3's own class name, used on every
   not-yet-rewritten page site-wide. Scoped under .antd so it only applies
   inside markup that opts in, instead of silently reskinning every legacy
   form the moment this stylesheet is loaded outside the auth pages. */
.antd .form-control {
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-text);
    background: var(--c-gray-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Native <select> keeps the browser/OS's own arrow and rendering quirks
   otherwise (visible in the payment method/network dropdowns), clashing
   with the flat AntD look every other input has. */
.antd select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c8c8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
    /* Chrome/Safari still clip a native <select>'s text (the descender-
       clipping bug: "Money" rendering as "Monev", "AIRTEL" as "AIRTFI")
       even after appearance:none - and line-height has no reliable effect
       on that internal text rendering in Chromium, so tuning it didn't
       help. An explicit height does: selects vertically-center their text
       within it even with appearance:none, so a height comfortably larger
       than one line avoids the clip regardless of line-height quirks. */
    height: 42px;
    padding-top: 0;
    padding-bottom: 0;
}

.antd .input-affix .form-control {
    padding-left: 38px;
}

.antd .input-affix--suffix .form-control {
    padding-right: 38px;
}

.input-affix__suffix {
    position: absolute;
    right: 4px;
    display: inline-flex;
}

.antd .form-control::placeholder {
    color: var(--c-text-tertiary);
}

.antd .form-control:hover {
    border-color: var(--c-border-hover);
}

.antd .form-control:focus {
    outline: none;
    border-color: var(--c-primary-active);
}

.antd .form-item--error .form-control {
    border-color: var(--c-error);
}

.form-error {
    display: block;
    font-size: 13px;
    color: var(--c-error);
    margin-top: 4px;
}

/* Icon-only button sitting inside an input (password show/hide). */
.input-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--c-text-tertiary);
    cursor: pointer;
}

.input-icon-btn:hover {
    color: var(--c-text-secondary);
    background: rgba(0, 0, 0, 0.04);
}

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

/* .btn/.btn-block/.btn-default/.btn-primary/.btn-link are also Bootstrap
   3's own class names, used everywhere on not-yet-rewritten pages. Scoped
   under .antd for the same reason as .form-control above. */
.antd .btn svg {
    /* Explicit, rather than trusting the icon's own width/height
       attributes: something upstream (Bootstrap/AdminLTE/img resets)
       was inflating the plus icon on the subscriptions "Add New" button
       well past its intended 16px. */
    width: 14px;
    height: 14px;
    display: block;
    flex-shrink: 0;
}

.antd .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}

.antd .btn-block {
    width: 100%;
}

.antd .btn-default {
    background: var(--c-gray-3);
    border-color: var(--c-border);
    color: var(--c-text);
}

.antd .btn-default:hover {
    border-color: var(--c-primary);
    color: var(--c-text);
}

.antd .btn-primary {
    background: var(--c-primary);
    color: var(--c-on-primary);
}

.antd .btn-primary:hover {
    background: var(--c-primary-hover);
}

.antd .btn-primary:active {
    background: var(--c-primary-active);
}

.antd .btn-primary[disabled],
.antd .btn-primary.is-loading {
    opacity: 0.65;
    cursor: default;
}

.antd .btn-link {
    background: transparent;
    border: none;
    color: var(--c-link);
    padding: 0;
    font-weight: 400;
}

.antd .btn-link:hover {
    color: var(--c-link-hover);
}

.btn-spinner {
    /* Sits on the gold button, so it's tinted dark (like the button's own
       text) rather than the white spinner that suited the old blue button. */
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(31, 31, 31, 0.25);
    border-top-color: var(--c-on-primary);
    animation: antd-spin 0.7s linear infinite;
}

@keyframes antd-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---- Checkbox (native input, styled; no iCheck) ---- */

.antd-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--c-text);
    cursor: pointer;
}

.antd-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.antd-checkbox input[type="checkbox"]:hover {
    border-color: var(--c-primary);
}

.antd-checkbox input[type="checkbox"]:checked {
    background: var(--c-primary);
    border-color: var(--c-primary);
}

.antd-checkbox input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 8px;
    /* Dark checkmark, not white: matches --c-on-primary since the checkbox
       fill is now gold. */
    border: solid var(--c-on-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ---- Radio group (gender, etc.) ---- */

.radio-group {
    display: flex;
    gap: 24px;
}

.antd-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--c-text);
    cursor: pointer;
}

.antd-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--c-border);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.antd-radio input[type="radio"]:hover {
    border-color: var(--c-primary-active);
}

.antd-radio input[type="radio"]:checked {
    border-color: var(--c-primary-active);
}

.antd-radio input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-primary);
    transform: translate(-50%, -50%);
}

/* ---- Alerts ---- */
/* .alert/.alert-success are also Bootstrap 3's own class names; scoped
   under .antd for the same reason as .form-control/.btn above. */

.antd .alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 20px;
}

.antd .alert-success {
    background: var(--c-success-bg);
    border: 1px solid #b7eb8f;
    color: #237804;
}

.antd .alert-error {
    background: var(--c-error-bg);
    border: 1px solid #ffccc7;
    color: #a8071a;
}

.antd .alert-warning {
    background: var(--c-primary-bg);
    border: 1px solid #ffe58f;
    color: #874d00;
}

/* ---- Footer links ---- */

.auth-footer {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.auth-footer--center {
    justify-content: center;
}

.auth-footer a {
    color: var(--c-link);
    text-decoration: none;
}

.auth-footer a:hover {
    color: var(--c-link-hover);
    text-decoration: underline;
}

/* Fallback for stray links in the card body (e.g. "Forgot password?")
   that aren't inside .auth-footer. */
.auth-card a {
    color: var(--c-link);
}

.auth-card a:hover {
    color: var(--c-link-hover);
}

.row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ---- Multi-step form (register) ---- */

.steps-indicator {
    margin-bottom: 24px;
}

.steps-indicator span {
    font-size: 13px;
    color: var(--c-text-secondary);
}

.steps-indicator__bar {
    margin-top: 6px;
    height: 4px;
    border-radius: 2px;
    background: var(--c-bg-layout);
    overflow: hidden;
}

.steps-indicator__fill {
    height: 100%;
    background: var(--c-primary);
    border-radius: 2px;
    transition: width 0.2s ease;
}

.steps-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.steps-nav .btn-default {
    flex: 0 0 auto;
}

/* ---- App shell: header + sidebar ----
 * These reskin AdminLTE's existing structural elements (.main-header,
 * .main-sidebar, .sidebar-menu, .treeview) rather than replacing them:
 * dozens of not-yet-rewritten pages still depend on AdminLTE/Bootstrap 3
 * for their own content, and on the sidebar push-menu/treeview JS wired
 * to these exact class names.
 *
 * Unlike .form-control/.btn/.alert (scoped under .antd elsewhere in this
 * file - see that comment for why), these selectors are NOT prefixed with
 * .antd. .main-header/.main-sidebar/.sidebar-menu/.treeview-menu are
 * AdminLTE's own structural class names, unique to the shell markup in
 * layouts/app.blade.php and layouts/sidebar.blade.php - they never appear
 * on ordinary page content, so there's no page-content collision to guard
 * against, and no need to gate them behind an ancestor class.
 * (.antd WAS briefly added to <body> so these could double as a scoping
 * boundary, but that put .antd .btn/.form-control/.alert - the genuinely
 * dangerous ones - back in scope for every legacy Bootstrap button and
 * form on every page again, which is exactly what scoping was meant to
 * prevent. Removed from <body>; each page that wants the new .btn/
 * .form-control/.alert look now wraps just its own markup in .antd,
 * the way the auth pages and the home dashboard do.)
 *
 * The strong gold header band itself (--docu_primary/--docu_accent_primary
 * in digidocu-custom.css) is left as-is - it's already the brand color
 * this rewrite is matching. This section flattens shadows, cleans up
 * spacing, and restyles the parts digidocu-custom.css doesn't touch.
 */

.main-header {
    box-shadow: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.main-header .logo {
    font-weight: 600;
    box-shadow: none;
}

.main-header .sidebar-toggle {
    color: rgba(0, 0, 0, 0.65);
}

.main-header .sidebar-toggle:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* AdminLTE positions .navbar-custom-menu with position:absolute; top:0.
   A top:50%/translateY(-50%) fix didn't hold up - .navbar-static-top
   strips .navbar's position:relative, so the absolute box's real
   containing block wasn't what it looked like it should be, and
   centering moved the wrong way. Sidestepping the guesswork: drop the
   absolute positioning and let flexbox on .navbar itself center every
   child (toggle button, mobile title, custom menu), pushing the custom
   menu right with margin-left:auto instead of position:absolute/right. */
.main-header .navbar {
    display: flex;
    align-items: center;
    min-height: 50px;
}

.main-header .navbar-custom-menu {
    position: static;
    margin-left: auto;
}

.main-header .navbar-custom-menu .user-menu > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 0;
    padding-bottom: 0;
}

.main-header .navbar-custom-menu .user-menu .user-image {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.main-header .navbar-custom-menu .dropdown-menu {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.main-header .navbar-custom-menu .user-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 10px;
}

.main-header .navbar-custom-menu .user-header img {
    width: 56px;
    height: 56px;
}

.main-header .navbar-custom-menu .user-footer {
    border-top: 1px solid var(--c-border);
    padding: 10px;
}

.main-sidebar {
    box-shadow: none;
    border-right: 1px solid var(--c-border);
}

.main-sidebar .user-panel {
    border-bottom: 1px solid var(--c-border);
    padding: 16px;
}

.main-sidebar .user-panel .image img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.main-sidebar .user-panel .info {
    padding-left: 10px;
}

.main-sidebar .user-panel .info p {
    font-weight: 600;
    /* The sidebar background here is light, not dark - white text was
       illegible. */
    color: var(--c-text);
}

.main-sidebar .user-panel .info a {
    font-size: 12px;
    color: var(--c-text-secondary);
}

.sidebar-menu > li > a {
    font-size: 14px;
    padding: 12px 16px;
    border-left: 3px solid transparent;
}

.sidebar-menu > li.active > a {
    border-left-color: var(--c-primary);
    background: rgba(0, 0, 0, 0.18);
    font-weight: 500;
}

.sidebar-menu > li > a > i {
    width: 20px;
    text-align: center;
}

.treeview-menu > li > a {
    font-size: 13.5px;
    padding: 8px 16px 8px 40px;
}

/* ---- Dashboard (home) ---- */

.dash-hero {
    padding: 32px 8px 8px;
}

.dash-hero h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 4px;
}

.dash-hero p {
    color: var(--c-text-secondary);
    margin: 0;
    font-size: 14px;
}

/* Google-style centered search bar; sits between the hero and the cards. */
.dash-search {
    display: flex;
    justify-content: center;
    padding: 8px 8px 28px;
}

/* The <form> wrapping the search box has no width of its own, so as a flex
   item it shrinks to fit its content - which then means .dash-search__affix
   inside it (percentage-width) has an undetermined containing block and
   its width computes as auto (shrinks to the placeholder text), not
   66.6667%. display:contents removes the form from the box tree so
   .dash-search__affix becomes .dash-search's direct flex item instead,
   letting its percentage width resolve against .dash-search itself. */
.dash-search form {
    display: contents;
}

.dash-search__affix {
    width: 50%;
}

@media (max-width: 700px) {
    .dash-search__affix {
        width: 100%;
    }
}

.dash-search__affix .input-affix__icon {
    left: 18px;
    color: var(--c-text-tertiary);
}

.antd .dash-search__input {
    height: 48px;
    padding-left: 46px;
    border-radius: 24px;
    font-size: 15px;
    background: var(--c-gray-2);
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.08);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.antd .dash-search__input:hover {
    box-shadow: 0 1px 8px rgba(32, 33, 36, 0.14);
}

.antd .dash-search__input:focus {
    box-shadow: 0 1px 8px rgba(32, 33, 36, 0.14);
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 8px;
}

@media (max-width: 900px) {
    .dash-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .dash-grid {
        grid-template-columns: 1fr;
    }
}

.dash-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.dash-card:hover {
    box-shadow: var(--shadow-card);
    border-color: var(--c-border-hover);
}

.dash-card__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--c-primary-bg);
    color: var(--c-primary-active);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.dash-card__icon svg {
    width: 20px;
    height: 20px;
}

.dash-card h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text);
}

.dash-card p {
    margin: 0;
    font-size: 13.5px;
    color: var(--c-text-secondary);
    flex: 1;
}

.dash-card .btn {
    align-self: flex-start;
}

.dash-card form {
    display: flex;
}

.dash-card form .input-affix {
    flex: 1;
}

/* Explicit matching height on both, rather than relying on flex stretch:
   .input-affix's align-items:center was centering the actual <input>
   (its own auto height) inside a taller stretched wrapper, so the input's
   visible border stayed shorter than the button next to it even with
   align-self:stretch on the wrapper. */
.dash-card form .form-control,
.dash-card form .btn {
    height: 42px;
}

.dash-card form .form-control {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.dash-card form .btn {
    /* Overrides the .dash-card .btn align-self:flex-start above, which
       also (unintentionally) matched this button. */
    align-self: stretch;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ---- Subscriptions (pricing-card style, like a NYT/streaming subscribe
   page) ---- */

.sub-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 8px 48px;
}

.sub-hero {
    text-align: center;
    margin-bottom: 32px;
}

.sub-hero h1 {
    font-size: 26px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 8px;
}

.sub-hero p {
    color: var(--c-text-secondary);
    margin: 0;
    font-size: 14px;
}

.sub-plans {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

@media (max-width: 700px) {
    .sub-plans {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sub-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 20px 12px;
    background: var(--c-white);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sub-plan:hover {
    border-color: var(--c-primary-active);
}

.sub-plan.is-selected {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 1px var(--c-primary);
}

.sub-plan.is-selected::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--c-primary);
}

.sub-plan.is-selected::before {
    content: "";
    position: absolute;
    top: 15px;
    right: 15px;
    width: 6px;
    height: 3px;
    border: solid var(--c-on-primary);
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
    z-index: 1;
}

.sub-plan__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sub-plan__name {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--c-text-secondary);
}

.sub-plan__price {
    font-size: 20px;
    font-weight: 700;
    color: var(--c-text);
    margin-top: 4px;
}

.sub-plan__period {
    font-size: 12px;
    color: var(--c-text-tertiary);
}

.sub-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-bottom: 16px;
}

.sub-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 14px;
}

.sub-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: var(--c-text-secondary);
    border-bottom: 1px solid var(--c-bg-layout);
}

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

.sub-summary-row--total {
    font-weight: 600;
    color: var(--c-text);
    font-size: 16px;
}

.sub-submit {
    font-size: 16px;
    padding: 13px 16px;
}

/* ---- Tag (status pill), AntD-style ---- */

.tag {
    display: inline-block;
    padding: 1px 8px;
    font-size: 12px;
    line-height: 1.8;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    white-space: nowrap;
}

.tag-success {
    color: #237804;
    background: var(--c-success-bg);
    border-color: #b7eb8f;
}

.tag-warning {
    color: #874d00;
    background: var(--c-primary-bg);
    border-color: #ffe58f;
}

.tag-error {
    color: #a8071a;
    background: var(--c-error-bg);
    border-color: #ffccc7;
}

.tag-default {
    color: var(--c-text-secondary);
    background: var(--c-bg-layout);
    border-color: var(--c-border);
}

/* ---- Table, AntD-style: light header, row rules only (no vertical
   borders), hover highlight - replaces Bootstrap's table-bordered look
   on pages rewritten to use it. Scoped under .antd, same reasoning as
   .btn/.form-control/.alert (dozens of other pages still use plain
   Bootstrap .table). ---- */

.antd .table {
    width: 100%;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.antd .table > thead > tr > th {
    background: var(--c-bg-layout);
    color: var(--c-text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--c-border);
    border-top: none;
    padding: 12px 16px;
}

.antd .table > tbody > tr > td {
    padding: 12px 16px;
    border-top: 1px solid var(--c-border);
    font-size: 14px;
    color: var(--c-text);
    vertical-align: middle;
}

.antd .table > tbody > tr:hover > td {
    background: var(--c-bg-layout);
}

.antd .table > tbody > tr:first-child > td {
    border-top: none;
}

/* ---- Toolbar (filters above a table) ---- */

.antd-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.antd-toolbar__filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.antd-toolbar__filters .form-control {
    width: auto;
    min-width: 160px;
}

.antd-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 20px;
    padding-top: 28px;
}

.antd-page-header h1 {
    font-size: 22px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0;
}

/* Bootstrap's classic paginator (Illuminate\Pagination's default view),
   restyled to sit flush with the rest of the AntD-ish page instead of
   Bootstrap 3's boxy joined-button look. */
.antd .pagination {
    margin: 20px 0 0;
}

.antd .pagination > li > a,
.antd .pagination > li > span {
    border: 1px solid var(--c-border);
    color: var(--c-text-secondary);
    margin: 0 2px;
    border-radius: var(--radius-sm) !important;
}

.antd .pagination > li > a:hover {
    border-color: var(--c-primary-active);
    color: var(--c-text);
    background: var(--c-white);
}

.antd .pagination > .active > a,
.antd .pagination > .active > span {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-on-primary);
}

/* ---- Subscription detail page: side details + main panel ---- */

.sub-detail {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    align-items: start;
    padding-bottom: 40px;
}

@media (max-width: 800px) {
    .sub-detail {
        grid-template-columns: 1fr;
    }
}