/*!
 * TeamCloud Modern — Core Design System (tc-core.css)
 * Shared by: templates/teamcloudmodern (System Theme)
 *            templates/orderforms/teamcloudmodern (Order Form)
 * SOURCE OF TRUTH: teamcloudmodern-release/source/tc-core.css
 * Do not edit the copies inside the theme folders — edit the source and run
 * `node source/build.js` (or copy the file) so both packages stay in sync.
 */

/* ==========================================================================
   1. Typography — Campton (self-hosted, packaged with each theme)
   ========================================================================== */
@font-face { font-family: "Campton"; font-weight: 300; font-style: normal; font-display: swap;
    src: url("../assets/fonts/CamptonLight.woff2") format("woff2"), url("../assets/fonts/CamptonLight.otf") format("opentype"); }
@font-face { font-family: "Campton"; font-weight: 400; font-style: normal; font-display: swap;
    src: url("../assets/fonts/CamptonBook.woff2") format("woff2"), url("../assets/fonts/CamptonBook.otf") format("opentype"); }
@font-face { font-family: "Campton"; font-weight: 400; font-style: italic; font-display: swap;
    src: url("../assets/fonts/CamptonBookItalic.woff2") format("woff2"), url("../assets/fonts/CamptonBookItalic.otf") format("opentype"); }
@font-face { font-family: "Campton"; font-weight: 500; font-style: normal; font-display: swap;
    src: url("../assets/fonts/CamptonMedium.woff2") format("woff2"), url("../assets/fonts/CamptonMedium.otf") format("opentype"); }
@font-face { font-family: "Campton"; font-weight: 600; font-style: normal; font-display: swap;
    src: url("../assets/fonts/CamptonSemiBold.woff2") format("woff2"), url("../assets/fonts/CamptonSemiBold.otf") format("opentype"); }
@font-face { font-family: "Campton"; font-weight: 700; font-style: normal; font-display: swap;
    src: url("../assets/fonts/CamptonBold.woff2") format("woff2"), url("../assets/fonts/CamptonBold.otf") format("opentype"); }

/* ==========================================================================
   2. Design tokens
   ========================================================================== */
:root {
    /* Brand */
    --tc-primary: #004F96;
    --tc-primary-hover: #003D75;
    --tc-primary-light: #E6F0F8;
    --tc-primary-text: #004F96;          /* primary used as text/link colour */
    --tc-on-primary: #FFFFFF;

    /* Background */
    --tc-bg: #FFFFFF;
    --tc-bg-secondary: #F7F9FC;
    --tc-surface: #FFFFFF;
    --tc-surface-raised: #FFFFFF;
    --tc-surface-sunken: #F7F9FC;
    --tc-hover: #F3F6FA;
    --tc-header-bg: rgba(255, 255, 255, .86);
    --tc-overlay: rgba(15, 23, 42, .38);

    /* Typography */
    --tc-text-primary: #1F2937;
    --tc-text-secondary: #6B7280;
    --tc-text-muted: #9CA3AF;
    --tc-font: "Campton", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --tc-font-mono: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* Borders */
    --tc-outline: #ADADAD;
    --tc-divider: #E5E7EB;
    --tc-focus: #004F96;
    --tc-focus-ring: 0 0 0 3px rgba(0, 79, 150, .18);

    /* Status */
    --tc-success: #16A34A;
    --tc-warning: #D97706;
    --tc-danger: #DC2626;
    --tc-info: #004F96;
    --tc-neutral: #6B7280;
    --tc-success-light: #ECFDF3;
    --tc-warning-light: #FFF7E8;
    --tc-danger-light: #FEF1F1;
    --tc-info-light: #E6F0F8;
    --tc-neutral-light: #F3F4F6;

    /* Border Radius */
    --tc-radius-sm: 8px;
    --tc-radius-md: 14px;
    --tc-radius-lg: 20px;
    --tc-radius-xl: 28px;
    --tc-radius-pill: 999px;

    /* Shadows */
    --tc-shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
    --tc-shadow-md: 0 8px 24px rgba(0,0,0,0.06);
    --tc-shadow-lg: 0 16px 40px rgba(0,0,0,0.08);

    /* Spacing */
    --tc-spacing-xs: 4px;
    --tc-spacing-sm: 8px;
    --tc-spacing-md: 16px;
    --tc-spacing-lg: 24px;
    --tc-spacing-xl: 32px;
    --tc-spacing-2xl: 48px;

    /* Layout */
    --tc-container: 1240px;
    --tc-header-h: 72px;

    /* Transitions */
    --tc-transition: 180ms ease;

    color-scheme: light;
}

/* Dark mode — same language, adjusted surfaces/contrast.
   Activated by <html data-theme="dark"> (set by tc-theme.js; light is default). */
[data-theme="dark"] {
    --tc-primary: #004F96;
    --tc-primary-hover: #0A62B3;
    --tc-primary-light: rgba(64, 140, 214, .16);
    --tc-primary-text: #7DB3E8;
    --tc-on-primary: #FFFFFF;

    --tc-bg: #0B111C;
    --tc-bg-secondary: #0B111C;
    --tc-surface: #131B29;
    --tc-surface-raised: #182233;
    --tc-surface-sunken: #0F1622;
    --tc-hover: #1B2638;
    --tc-header-bg: rgba(15, 22, 34, .86);
    --tc-overlay: rgba(0, 0, 0, .6);

    --tc-text-primary: #E8ECF2;
    --tc-text-secondary: #A3ACBA;
    --tc-text-muted: #6F7A8B;

    --tc-outline: #4A5568;
    --tc-divider: #243044;
    --tc-focus: #5A9BDB;
    --tc-focus-ring: 0 0 0 3px rgba(90, 155, 219, .28);

    --tc-success: #34C46A;
    --tc-warning: #F0A33A;
    --tc-danger: #F26464;
    --tc-info: #7DB3E8;
    --tc-neutral: #A3ACBA;
    --tc-success-light: rgba(52, 196, 106, .14);
    --tc-warning-light: rgba(240, 163, 58, .14);
    --tc-danger-light: rgba(242, 100, 100, .14);
    --tc-info-light: rgba(125, 179, 232, .14);
    --tc-neutral-light: rgba(163, 172, 186, .12);

    --tc-shadow-sm: 0 2px 8px rgba(0,0,0,0.30);
    --tc-shadow-md: 0 8px 24px rgba(0,0,0,0.36);
    --tc-shadow-lg: 0 16px 40px rgba(0,0,0,0.45);

    color-scheme: dark;
}

/* ==========================================================================
   3. Base
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--tc-font);
    font-weight: 400;
    color: var(--tc-text-primary);
    background-color: var(--tc-bg-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: .005em;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--tc-font);
    color: var(--tc-text-primary);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.25;
}
h1, .h1 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 700; }
h2, .h2 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.65rem); }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.1rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .9rem; }
p { color: inherit; }
a { color: var(--tc-primary-text); transition: color var(--tc-transition); }
a:hover { color: var(--tc-primary-hover); }
[data-theme="dark"] a:hover { color: #A9CCF0; }
small, .small { font-size: .82rem; }
strong, b { font-weight: 600; }
hr { border-top-color: var(--tc-divider); }
code, pre, kbd { font-family: var(--tc-font-mono); }
pre { background: var(--tc-surface-sunken); color: var(--tc-text-primary); border-radius: var(--tc-radius-md); padding: var(--tc-spacing-md); border: 1px solid var(--tc-divider); }
::selection { background: rgba(0, 79, 150, .18); }
.text-muted { color: var(--tc-text-secondary) !important; }
.text-secondary { color: var(--tc-text-secondary) !important; }
.text-primary { color: var(--tc-primary-text) !important; }
.text-success { color: var(--tc-success) !important; }
.text-warning { color: var(--tc-warning) !important; }
.text-danger { color: var(--tc-danger) !important; }
.text-info { color: var(--tc-info) !important; }
.text-dark, .text-body { color: var(--tc-text-primary) !important; }
.bg-white { background-color: var(--tc-surface) !important; }
.bg-light { background-color: var(--tc-bg-secondary) !important; }
.bg-primary { background-color: var(--tc-primary) !important; }
.border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--tc-divider) !important; }
/* WHMCS "hidden until JS shows it" helper. No !important (jQuery .show() must be able to override it with an
   inline style), but boosted specificity via :not(#id) so component rules such as .btn { display: inline-flex }
   or #order-teamcloudmodern .x { display: flex } cannot accidentally reveal hidden elements. */
.w-hidden, .hidden,
.w-hidden:not(#tc-a):not(#tc-b), .hidden:not(#tc-a):not(#tc-b) { display: none; }
.tc-sr-only, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.font-weight-light { font-weight: 300 !important; }
.font-weight-bold { font-weight: 600 !important; }
.tc-text-xs { font-size: .75rem; }
.tc-text-sm { font-size: .85rem; }
.tc-text-lg { font-size: 1.1rem; }
.tc-eyebrow { font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--tc-text-secondary); }
.tc-mono { font-family: var(--tc-font-mono); font-size: .85em; }
.tc-muted { color: var(--tc-text-secondary); }
.tc-faint { color: var(--tc-text-muted); }
:focus-visible { outline: 2px solid var(--tc-focus); outline-offset: 2px; }

/* ==========================================================================
   4. Floating cards
   ========================================================================== */
.tc-card, .card {
    position: relative;
    background: var(--tc-surface);
    color: var(--tc-text-primary);
    border: 1px solid transparent;
    border-radius: var(--tc-radius-lg);
    box-shadow: var(--tc-shadow-md);
    transition: box-shadow var(--tc-transition), transform var(--tc-transition), border-color var(--tc-transition);
}
[data-theme="dark"] .tc-card, [data-theme="dark"] .card { border-color: var(--tc-divider); }
.card { margin-bottom: var(--tc-spacing-lg); }
.card .card { box-shadow: none; border-color: var(--tc-divider); }
.tc-card { padding: var(--tc-spacing-lg); margin-bottom: var(--tc-spacing-lg); }
.tc-card--flush { padding: 0; }
.tc-card--xl { border-radius: var(--tc-radius-xl); }
.tc-card--tint { background: var(--tc-primary-light); box-shadow: none; }
.tc-card--sunken { background: var(--tc-surface-sunken); box-shadow: none; border-color: var(--tc-divider); }
.tc-card--hover:hover, a.tc-card:hover, .card-hover:hover { box-shadow: var(--tc-shadow-lg); transform: translateY(-2px); }
a.tc-card { display: block; color: inherit; text-decoration: none; }
.tc-card__header, .card-header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--tc-spacing-md);
    background: transparent; border-bottom: 1px solid var(--tc-divider);
    padding: var(--tc-spacing-md) var(--tc-spacing-lg);
}
.card-header { display: block; }
.card-header:first-child { border-radius: var(--tc-radius-lg) var(--tc-radius-lg) 0 0; }
.tc-card > .tc-card__header { margin: calc(var(--tc-spacing-lg) * -1) calc(var(--tc-spacing-lg) * -1) var(--tc-spacing-lg); }
.tc-card--flush > .tc-card__header { margin: 0; }
.tc-card__title, .card-title, .card-header h3, .card-header .card-title {
    font-size: 1.02rem; font-weight: 600; margin: 0; color: var(--tc-text-primary); letter-spacing: -.005em;
}
.tc-card__subtitle { font-size: .85rem; color: var(--tc-text-secondary); margin: 2px 0 0; }
.tc-card__body, .card-body { padding: var(--tc-spacing-lg); }
.tc-card__footer, .card-footer {
    background: transparent; border-top: 1px solid var(--tc-divider);
    padding: var(--tc-spacing-md) var(--tc-spacing-lg);
}
.card-footer:last-child { border-radius: 0 0 var(--tc-radius-lg) var(--tc-radius-lg); }
.card-footer:empty { display: none; }
.tc-card > .tc-card__footer { margin: var(--tc-spacing-lg) calc(var(--tc-spacing-lg) * -1) calc(var(--tc-spacing-lg) * -1); }
.tc-card--flush > .tc-card__footer { margin: 0; }
.card > .list-group:last-child, .card > .list-group:last-child .list-group-item:last-child { border-bottom-left-radius: var(--tc-radius-lg); border-bottom-right-radius: var(--tc-radius-lg); }

/* Accent cards (WHMCS homepage panels use card-accent-{colour}) — rendered as a subtle top accent */
[class*="card-accent-"] { border-top: 0; }
[class*="card-accent-"] > .card-header .card-title > i:first-child { color: var(--tc-primary-text); }
.card-accent-green > .card-header .card-title > i:first-child, .card-accent-emerald > .card-header .card-title > i:first-child, .card-accent-lime > .card-header .card-title > i:first-child { color: var(--tc-success); }
.card-accent-gold > .card-header .card-title > i:first-child, .card-accent-orange > .card-header .card-title > i:first-child, .card-accent-sun-flower > .card-header .card-title > i:first-child { color: var(--tc-warning); }
.card-accent-red > .card-header .card-title > i:first-child, .card-accent-pomegranate > .card-header .card-title > i:first-child, .card-accent-pink > .card-header .card-title > i:first-child, .card-accent-magenta > .card-header .card-title > i:first-child { color: var(--tc-danger); }
.card-accent-silver > .card-header .card-title > i:first-child, .card-accent-asbestos > .card-header .card-title > i:first-child, .card-accent-midnight-blue > .card-header .card-title > i:first-child, .card-accent-wet-asphalt > .card-header .card-title > i:first-child { color: var(--tc-text-secondary); }
/* WHMCS bg-color-* helpers used by hooks & panels — mapped to the brand palette */
.bg-color-blue, .bg-color-teal, .bg-color-turquoise, .bg-color-amethyst, .bg-color-purple, .bg-color-midnight-blue { background-color: var(--tc-primary) !important; color: #fff !important; }
.bg-color-green, .bg-color-emerald, .bg-color-lime { background-color: var(--tc-success) !important; color: #fff !important; }
.bg-color-gold, .bg-color-orange, .bg-color-sun-flower { background-color: var(--tc-warning) !important; color: #fff !important; }
.bg-color-red, .bg-color-pomegranate, .bg-color-pink, .bg-color-magenta { background-color: var(--tc-danger) !important; color: #fff !important; }
.bg-color-silver, .bg-color-asbestos, .bg-color-wet-asphalt { background-color: var(--tc-neutral) !important; color: #fff !important; }

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn {
    font-family: var(--tc-font);
    font-weight: 500;
    font-size: .925rem;
    line-height: 1.45;
    border-radius: var(--tc-radius-md);
    padding: .6rem 1.15rem;
    border: 1px solid transparent;
    transition: background-color var(--tc-transition), border-color var(--tc-transition), color var(--tc-transition), box-shadow var(--tc-transition), transform var(--tc-transition);
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    white-space: nowrap;
}
.btn.btn-block { display: flex; }
.btn:focus, .btn.focus { box-shadow: var(--tc-focus-ring); }
.btn:active { transform: translateY(1px); }
.btn i, .btn .fa, .btn .fas, .btn .far, .btn .fal, .btn .fad { line-height: 1; }
.btn-primary, .tc-btn--primary {
    background: var(--tc-primary); border-color: var(--tc-primary); color: var(--tc-on-primary);
    box-shadow: 0 6px 16px rgba(0, 79, 150, .18);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
    background: var(--tc-primary-hover); border-color: var(--tc-primary-hover); color: var(--tc-on-primary);
}
.btn-primary.disabled, .btn-primary:disabled { background: var(--tc-primary); border-color: var(--tc-primary); opacity: .55; box-shadow: none; }
.btn-default, .btn-secondary, .btn-outline-primary, .btn-light, .tc-btn--secondary {
    background: var(--tc-surface); border-color: var(--tc-outline); color: var(--tc-primary-text);
}
.btn-default:hover, .btn-secondary:hover, .btn-outline-primary:hover, .btn-light:hover, .tc-btn--secondary:hover,
.btn-default:focus, .btn-secondary:focus, .btn-light:focus,
.btn-default:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-default.active, .btn-secondary.active, .btn-outline-primary.active, .show > .btn-default.dropdown-toggle, .show > .btn-secondary.dropdown-toggle {
    background: var(--tc-primary-light); border-color: var(--tc-primary); color: var(--tc-primary-text);
}
.btn-outline-secondary { background: transparent; border-color: var(--tc-outline); color: var(--tc-text-secondary); }
.btn-outline-secondary:hover { background: var(--tc-hover); color: var(--tc-text-primary); border-color: var(--tc-outline); }
.btn-success { background: var(--tc-success); border-color: var(--tc-success); color: #fff; }
.btn-success:hover, .btn-success:focus { background: #12863D; border-color: #12863D; color: #fff; }
.btn-danger { background: var(--tc-danger); border-color: var(--tc-danger); color: #fff; }
.btn-danger:hover, .btn-danger:focus { background: #B91C1C; border-color: #B91C1C; color: #fff; }
.btn-warning { background: var(--tc-warning); border-color: var(--tc-warning); color: #fff; }
.btn-warning:hover, .btn-warning:focus { background: #B45309; border-color: #B45309; color: #fff; }
.btn-info { background: var(--tc-primary); border-color: var(--tc-primary); color: #fff; }
.btn-info:hover { background: var(--tc-primary-hover); border-color: var(--tc-primary-hover); color: #fff; }
.btn-outline-danger { color: var(--tc-danger); border-color: var(--tc-danger); background: transparent; }
.btn-outline-danger:hover { background: var(--tc-danger-light); color: var(--tc-danger); border-color: var(--tc-danger); }
.btn-outline-success { color: var(--tc-success); border-color: var(--tc-success); }
.btn-outline-success:hover { background: var(--tc-success-light); color: var(--tc-success); }
.btn-link, .tc-btn--ghost { background: transparent; border-color: transparent; color: var(--tc-primary-text); box-shadow: none; }
.btn-link:hover, .tc-btn--ghost:hover { background: var(--tc-primary-light); color: var(--tc-primary-text); text-decoration: none; }
.btn-lg { padding: .8rem 1.5rem; font-size: 1rem; border-radius: var(--tc-radius-md); }
.btn-sm { padding: .4rem .8rem; font-size: .84rem; border-radius: var(--tc-radius-sm); }
.btn-xs, .btn-group-xs > .btn { padding: .2rem .55rem; font-size: .78rem; border-radius: var(--tc-radius-sm); }
.tc-btn--icon { width: 40px; height: 40px; padding: 0; border-radius: var(--tc-radius-md); }
.tc-btn--icon.btn-sm { width: 32px; height: 32px; }
.tc-btn--pill { border-radius: var(--tc-radius-pill); }
.btn-group > .btn { box-shadow: none; }
.btn-group > .btn:not(:first-child) { margin-left: -1px; }

/* ==========================================================================
   6. Forms
   ========================================================================== */
label, .control-label, .col-form-label { font-weight: 500; font-size: .875rem; color: var(--tc-text-primary); margin-bottom: .4rem; }
.form-group { margin-bottom: 1.15rem; }
.form-control, .custom-select, .tc-input, select.form-control, .dataTables_filter input, .dataTables_length select {
    font-family: var(--tc-font);
    font-size: .935rem;
    color: var(--tc-text-primary);
    background-color: var(--tc-surface);
    border: 1px solid var(--tc-outline);
    border-radius: var(--tc-radius-md);
    min-height: 44px;
    padding: .55rem .9rem;
    transition: border-color var(--tc-transition), box-shadow var(--tc-transition), background-color var(--tc-transition);
}
.form-control-sm, .input-sm { min-height: 34px; padding: .3rem .65rem; font-size: .85rem; border-radius: var(--tc-radius-sm); }
.form-control-lg, .input-lg { min-height: 52px; font-size: 1rem; }
textarea.form-control { min-height: 110px; }
.form-control::placeholder { color: var(--tc-text-muted); opacity: 1; }
.form-control:focus, .custom-select:focus, .tc-input:focus {
    border-color: var(--tc-focus); box-shadow: var(--tc-focus-ring); background-color: var(--tc-surface); color: var(--tc-text-primary); outline: 0;
}
.form-control:disabled, .form-control[readonly], .custom-select:disabled { background-color: var(--tc-surface-sunken); color: var(--tc-text-secondary); opacity: 1; }
.form-control-plaintext { color: var(--tc-text-primary); }
select.form-control, .custom-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 12 12'%3e%3cpath d='M3 4.5l3 3 3-3'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px;
}
select.form-control[multiple], select.form-control[size]:not([size="1"]) { background-image: none; padding-right: .9rem; }
.form-text, .help-block { color: var(--tc-text-secondary); font-size: .8rem; margin-top: .35rem; }
.input-group > .form-control, .input-group > .custom-select { min-height: 44px; height: auto; align-self: stretch; }
.input-group-append > .btn, .input-group-prepend > .btn, .input-group-append > input.btn, .input-group-prepend > input.btn { min-height: 44px; display: inline-flex; align-items: center; margin-top: 0; margin-bottom: 0; line-height: 1.2; }
.input-group-append, .input-group-prepend { align-items: stretch; }
.input-group-text {
    background: var(--tc-surface-sunken); border: 1px solid var(--tc-outline); color: var(--tc-text-secondary);
    border-radius: var(--tc-radius-md); font-size: .9rem;
}
.input-group > .input-group-append > .btn, .input-group > .input-group-prepend > .btn { box-shadow: none; }
.is-invalid, .has-error .form-control, .form-control.is-invalid { border-color: var(--tc-danger) !important; }
.is-invalid:focus, .has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important; }
.is-valid, .form-control.is-valid { border-color: var(--tc-success) !important; }
.invalid-feedback, .has-error .help-block, .field-error-msg { color: var(--tc-danger); font-size: .8rem; }
.has-error label, .has-error .control-label { color: var(--tc-danger); }
.field-error-msg { display: none; }
.has-error .field-error-msg { display: block; }

/* Checkboxes / radios (native + Bootstrap custom-control) */
input[type="checkbox"], input[type="radio"] { accent-color: var(--tc-primary); }
.form-check-input { width: 1.05rem; height: 1.05rem; margin-top: .22rem; }
.form-check-label { font-weight: 400; }
.custom-control-label { font-weight: 400; cursor: pointer; }
.custom-control-label::before { border: 1px solid var(--tc-outline); background-color: var(--tc-surface); }
.custom-checkbox .custom-control-label::before { border-radius: 6px; }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--tc-primary); border-color: var(--tc-primary); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--tc-focus-ring); }
.custom-switch .custom-control-label::before { border-radius: 1rem; }
/* iCheck skin compatibility (WHMCS order/checkout & some module output) */
.icheckbox_square-blue, .iradio_square-blue {
    display: inline-block; vertical-align: middle; position: relative; margin: 0 .45rem 0 0;
    width: 20px; height: 20px; background: var(--tc-surface) !important; border: 1.5px solid var(--tc-outline);
    cursor: pointer; transition: border-color var(--tc-transition), box-shadow var(--tc-transition), background-color var(--tc-transition);
}
.icheckbox_square-blue { border-radius: 6px; }
.iradio_square-blue { border-radius: 50%; }
.icheckbox_square-blue.hover, .iradio_square-blue.hover { border-color: var(--tc-primary); }
.icheckbox_square-blue.focus, .iradio_square-blue.focus { box-shadow: var(--tc-focus-ring); }
.iradio_square-blue.checked { border-color: var(--tc-primary); box-shadow: inset 0 0 0 4.5px var(--tc-surface); background: var(--tc-primary) !important; }
.icheckbox_square-blue.checked { border-color: var(--tc-primary); background: var(--tc-primary) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2l2.3 2.3 4.7-4.9'/%3e%3c/svg%3e") center/12px no-repeat !important; }
.icheckbox_square-blue.disabled, .iradio_square-blue.disabled { opacity: .45; cursor: not-allowed; }
.icheckbox_square-blue.checked.focus, .iradio_square-blue.checked.focus { box-shadow: var(--tc-focus-ring); }
.iradio_square-blue.checked.focus { box-shadow: inset 0 0 0 4.5px var(--tc-surface), var(--tc-focus-ring); }

/* Search field */
.tc-search { position: relative; }
.tc-search > i, .tc-search > .tc-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tc-text-muted); pointer-events: none; }
.tc-search .form-control { padding-left: 2.5rem; border-radius: var(--tc-radius-pill); background: var(--tc-surface-sunken); border-color: transparent; }
.tc-search .form-control:focus { background: var(--tc-surface); border-color: var(--tc-focus); }

/* Fieldset / form sections */
.tc-form-section { padding-bottom: var(--tc-spacing-lg); margin-bottom: var(--tc-spacing-lg); border-bottom: 1px solid var(--tc-divider); }
.tc-form-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.tc-form-section__title { font-size: 1rem; font-weight: 600; margin-bottom: var(--tc-spacing-md); display: flex; align-items: center; gap: .6rem; }
.tc-form-section__title i { color: var(--tc-primary-text); }
.tc-form-actions { display: flex; flex-wrap: wrap; gap: var(--tc-spacing-sm); align-items: center; margin-top: var(--tc-spacing-lg); }
.tc-form-actions--end { justify-content: flex-end; }

/* Password strength */
.password-strength-meter .progress { height: 6px; border-radius: 6px; background: var(--tc-divider); }
.progress { background: var(--tc-divider); border-radius: var(--tc-radius-pill); height: 8px; }
.progress-bar { background-color: var(--tc-primary); }

/* ==========================================================================
   7. Floating dropdowns
   ========================================================================== */
.dropdown-menu {
    background: var(--tc-surface-raised);
    border: 1px solid var(--tc-divider);
    border-radius: 18px;
    box-shadow: var(--tc-shadow-lg);
    padding: 8px;
    min-width: 230px;
    margin-top: 10px;
    font-size: .92rem;
    color: var(--tc-text-primary);
    animation: tc-pop 160ms ease;
}
.dropdown-menu > li { list-style: none; }
.dropdown-item, .dropdown-menu > li > a {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem .8rem; border-radius: 12px;
    color: var(--tc-text-primary); font-weight: 400; white-space: normal;
    transition: background-color var(--tc-transition), color var(--tc-transition);
}
.dropdown-menu > li.dropdown-item { padding: 0; background: none !important; }
.dropdown-menu > li.dropdown-item > a { width: 100%; }
.dropdown-item i, .dropdown-menu > li > a i { width: 18px; text-align: center; color: var(--tc-text-secondary); }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-menu > li > a:hover { background: var(--tc-hover); color: var(--tc-text-primary); text-decoration: none; }
.dropdown-item.active, .dropdown-item:active, .dropdown-menu > li.active > a { background: var(--tc-primary-light); color: var(--tc-primary-text); }
.dropdown-item.active i, .dropdown-item:active i { color: var(--tc-primary-text); }
.dropdown-divider, .dropdown-menu .nav-divider { border-top: 1px solid var(--tc-divider); margin: 6px 4px; height: 0; }
.dropdown-header { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tc-text-muted); padding: .5rem .8rem .3rem; }
.dropdown-toggle::after { border: 0; content: "\f107"; font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 300; vertical-align: 0; margin-left: .35rem; font-size: .8em; transition: transform var(--tc-transition); }
.show > .dropdown-toggle::after, .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.tc-no-caret::after, .tc-no-caret.dropdown-toggle::after { display: none !important; }
/* Opacity-only: Popper.js positions menus with an inline transform, so the animation must not touch transform (prevents flicker/jump). */
@keyframes tc-pop { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   8. Tables
   ========================================================================== */
.tc-table-card, .table-container, .listtable {
    background: var(--tc-surface); border-radius: var(--tc-radius-lg); box-shadow: var(--tc-shadow-md);
    overflow: hidden; margin-bottom: var(--tc-spacing-lg);
}
[data-theme="dark"] .tc-table-card, [data-theme="dark"] .table-container { border: 1px solid var(--tc-divider); }
.tc-table-scroll, .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { color: var(--tc-text-primary); margin-bottom: 0; background: transparent; }
.table th, .table td { border-top: 1px solid var(--tc-divider); padding: .95rem 1.1rem; vertical-align: middle; }
.table thead th {
    border-bottom: 1px solid var(--tc-divider); border-top: 0;
    font-size: .74rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
    color: var(--tc-text-secondary); background: var(--tc-surface-sunken); white-space: nowrap;
}
.table tbody tr:first-child td { border-top: 0; }
.table-hover tbody tr, .table-list tbody tr { transition: background-color var(--tc-transition); }
.table-hover tbody tr:hover, .table-list tbody tr:hover { background: var(--tc-hover); color: var(--tc-text-primary); }
.table-striped tbody tr:nth-of-type(odd) { background: var(--tc-surface-sunken); }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--tc-divider); }
.table-sm th, .table-sm td { padding: .55rem .75rem; }
.table-list { width: 100% !important; border-collapse: separate; border-spacing: 0; }
.table-list > tbody > tr { cursor: pointer; }
.table-list > tbody > tr > td { font-size: .925rem; }
.table-list .text-domain, .table-list strong { font-weight: 500; }
.table-active, .table-active > td, .table-active > th { background: var(--tc-primary-light); }
table.dataTable { margin: 0 !important; }
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { cursor: pointer; position: relative; padding-right: 1.8rem; }
table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after {
    position: absolute; right: .8rem; font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 300; opacity: .55; content: "\f0dc";
}
table.dataTable thead .sorting_asc::after { content: "\f0de"; opacity: 1; color: var(--tc-primary-text); }
table.dataTable thead .sorting_desc::after { content: "\f0dd"; opacity: 1; color: var(--tc-primary-text); }
table.dataTable thead .sorting::before, table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_desc::before { display: none; }
/* WHMCS DataTables toolbar (dom: '<"listtable"fit>pl') */
.dataTables_wrapper { position: relative; }
.dataTables_wrapper .listtable { box-shadow: none; border-radius: 0; margin: 0; overflow: visible; background: transparent; }
.dataTables_wrapper .dataTables_filter { padding: var(--tc-spacing-md) var(--tc-spacing-lg); text-align: left; float: none; }
.dataTables_wrapper .dataTables_filter label { width: 100%; max-width: 360px; margin: 0; position: relative; }
.dataTables_wrapper .dataTables_filter label::before { content: "\f002"; font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 300; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tc-text-muted); }
.dataTables_wrapper .dataTables_filter input { width: 100% !important; margin: 0 !important; padding-left: 2.4rem; border-radius: var(--tc-radius-pill); background: var(--tc-surface-sunken); border-color: transparent; min-height: 40px; }
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--tc-focus); background: var(--tc-surface); }
.dataTables_wrapper .dataTables_info { padding: var(--tc-spacing-md) var(--tc-spacing-lg); font-size: .82rem; color: var(--tc-text-secondary); float: left; }
.dataTables_wrapper .dataTables_paginate { padding: var(--tc-spacing-md) var(--tc-spacing-lg); float: right; }
.dataTables_wrapper .dataTables_length { padding: var(--tc-spacing-md) var(--tc-spacing-lg); float: right; font-size: .82rem; color: var(--tc-text-secondary); }
.dataTables_wrapper .dataTables_length label { font-weight: 400; color: var(--tc-text-secondary); font-size: .82rem; margin: 0; }
.dataTables_wrapper .dataTables_length select { min-height: 34px; padding: .25rem 2rem .25rem .7rem; display: inline-block; width: auto; margin: 0 .3rem; }
.dataTables_wrapper::after { content: ""; display: table; clear: both; }
.dataTables_wrapper .dataTables_processing { background: var(--tc-surface); border-radius: var(--tc-radius-md); box-shadow: var(--tc-shadow-md); color: var(--tc-text-primary); }
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before { background: var(--tc-primary) !important; box-shadow: none !important; border: 0 !important; top: 50% !important; transform: translateY(-50%); }
table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom: 1px solid var(--tc-divider); padding: .45rem 0; }
.table .sorting_1 { background: transparent !important; }

/* ==========================================================================
   9. Pagination
   ========================================================================== */
.pagination { gap: 4px; flex-wrap: wrap; margin: 0; }
.page-link, .pagination > li > a, .pagination > li > span {
    border: 1px solid transparent; border-radius: 10px !important; color: var(--tc-text-secondary);
    background: transparent; padding: .38rem .75rem; font-size: .86rem; min-width: 36px; text-align: center; margin: 0;
}
.page-link:hover { background: var(--tc-hover); color: var(--tc-text-primary); border-color: transparent; }
.page-link:focus { box-shadow: var(--tc-focus-ring); }
.page-item.active .page-link, .pagination > .active > a { background: var(--tc-primary); color: #fff; border-color: var(--tc-primary); }
.page-item.disabled .page-link { background: transparent; color: var(--tc-text-muted); border-color: transparent; }

/* ==========================================================================
   10. Status badges (services, domains, invoices, tickets, quotes)
   ========================================================================== */
.badge {
    font-family: var(--tc-font); font-weight: 500; font-size: .74rem; letter-spacing: .01em;
    padding: .32em .7em; border-radius: var(--tc-radius-pill);
    background: var(--tc-neutral-light); color: var(--tc-text-secondary);
}
.badge-primary, .badge-info { background: var(--tc-primary-light); color: var(--tc-primary-text); }
.badge-success { background: var(--tc-success-light); color: var(--tc-success); }
.badge-warning { background: var(--tc-warning-light); color: var(--tc-warning); }
.badge-danger { background: var(--tc-danger-light); color: var(--tc-danger); }
.badge-secondary, .badge-light, .badge-default { background: var(--tc-neutral-light); color: var(--tc-text-secondary); }
.badge-dark { background: var(--tc-text-primary); color: var(--tc-bg); }
.tc-badge, .label, .status {
    display: inline-flex; align-items: center; gap: .4em;
    font-size: .74rem; font-weight: 500; line-height: 1.2;
    padding: .32em .7em; border-radius: 7px;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    background: var(--tc-neutral-light); color: var(--tc-text-secondary); white-space: nowrap;
}
.tc-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.label-success, .tc-badge--success,
.status-active, .status-paid, .status-completed, .status-accepted, .status-open, .status-delivered, .status-answered { background: var(--tc-success-light); color: var(--tc-success); }
.label-warning, .tc-badge--warning,
.status-pending, .status-unpaid, .status-payment-pending, .status-pending-registration, .status-pending-transfer, .status-grace, .status-inprogress, .status-in-progress, .status-onhold, .status-on-hold, .status-customer-reply, .status-draft, .status-redemption { background: var(--tc-warning-light); color: var(--tc-warning); }
.label-danger, .tc-badge--danger,
.status-suspended, .status-terminated, .status-cancelled, .status-fraud, .status-overdue, .status-expired, .status-dead, .status-lost, .status-collections, .status-refunded { background: var(--tc-danger-light); color: var(--tc-danger); }
.label-info, .label-primary, .tc-badge--info, .status-transferred-away, .status-sent { background: var(--tc-info-light); color: var(--tc-info); }
.label-default, .tc-badge--neutral, .status-closed, .status-inactive { background: var(--tc-neutral-light); color: var(--tc-text-secondary); }
.status-answered { background: var(--tc-info-light); color: var(--tc-info); }
.status-open { background: var(--tc-success-light); color: var(--tc-success); }

/* ==========================================================================
   11. Tabs & pills
   ========================================================================== */
.nav-tabs, .tc-tabs {
    border: 0; gap: 4px; padding: 4px; display: inline-flex; flex-wrap: wrap;
    background: var(--tc-surface-sunken); border-radius: var(--tc-radius-md);
    margin-bottom: var(--tc-spacing-lg);
}
[data-theme="dark"] .nav-tabs { border: 1px solid var(--tc-divider); }
.nav-tabs .nav-link, .tc-tabs .nav-link, .nav-tabs > li > a {
    border: 0; border-radius: 11px; color: var(--tc-text-secondary); font-weight: 500; font-size: .9rem;
    padding: .5rem 1rem; margin: 0; background: transparent; transition: all var(--tc-transition);
}
.nav-tabs .nav-link:hover { color: var(--tc-text-primary); background: var(--tc-hover); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link, .nav-tabs > li.active > a {
    background: var(--tc-surface); color: var(--tc-primary-text); box-shadow: var(--tc-shadow-sm);
}
.nav-tabs .nav-item { margin: 0; }
.tc-tabs--block { display: flex; width: 100%; }
.nav-pills .nav-link { border-radius: var(--tc-radius-pill); color: var(--tc-text-secondary); font-weight: 500; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--tc-primary); color: #fff; }
.tab-content > .tab-pane { animation: tc-fade 200ms ease; }
@keyframes tc-fade { from { opacity: 0; } to { opacity: 1; } }

/* List groups */
.list-group-item {
    background: transparent; color: var(--tc-text-primary); border-color: var(--tc-divider);
    padding: .75rem 1.25rem;
}
.list-group-flush > .list-group-item { border-left: 0; border-right: 0; }
.list-group-item-action:hover, .list-group-item-action:focus { background: var(--tc-hover); color: var(--tc-text-primary); }
.list-group-item.active { background: var(--tc-primary-light); color: var(--tc-primary-text); border-color: var(--tc-divider); font-weight: 500; }
.list-group-item.disabled { color: var(--tc-text-muted); background: transparent; }

/* ==========================================================================
   12. Modals & confirmation dialogs
   ========================================================================== */
.modal-backdrop { background: rgba(10, 18, 32, 1); }
.modal-backdrop.show { opacity: .45; }
.modal-content {
    background: var(--tc-surface-raised); color: var(--tc-text-primary);
    border: 1px solid var(--tc-divider); border-radius: 24px; box-shadow: var(--tc-shadow-lg); overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--tc-divider); padding: 1.15rem 1.5rem; align-items: center; }
.modal-title { font-size: 1.08rem; font-weight: 600; }
.modal-body { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--tc-divider); padding: 1rem 1.5rem; gap: .5rem; }
.modal-footer > * { margin: 0; }
.modal .close, .close {
    color: var(--tc-text-secondary); opacity: 1; text-shadow: none; font-weight: 300; font-size: 1.5rem;
    width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; margin: 0 0 0 auto !important;
}
.close:hover { background: var(--tc-hover); color: var(--tc-text-primary); opacity: 1; }
.modal.fade .modal-dialog { transform: translateY(16px) scale(.98); transition: transform 220ms ease; }
.modal.show .modal-dialog { transform: none; }
.tc-dialog-icon { width: 56px; height: 56px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: var(--tc-spacing-md); background: var(--tc-primary-light); color: var(--tc-primary-text); }
.tc-dialog-icon--danger { background: var(--tc-danger-light); color: var(--tc-danger); }
.tc-dialog-icon--warning { background: var(--tc-warning-light); color: var(--tc-warning); }
.tc-dialog-icon--success { background: var(--tc-success-light); color: var(--tc-success); }

/* ==========================================================================
   13. Alerts
   ========================================================================== */
.alert {
    border: 1px solid transparent; border-radius: var(--tc-radius-md);
    padding: .9rem 1.1rem; font-size: .925rem; line-height: 1.55;
    background: var(--tc-info-light); color: var(--tc-text-primary);
    position: relative;
}
.alert a:not(.btn), .alert .alert-link { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.alert-info, .alert-primary { background: var(--tc-info-light); border-color: rgba(0, 79, 150, .18); }
.alert-success { background: var(--tc-success-light); border-color: rgba(22, 163, 74, .22); }
.alert-warning { background: var(--tc-warning-light); border-color: rgba(217, 119, 6, .24); }
.alert-danger { background: var(--tc-danger-light); border-color: rgba(220, 38, 38, .22); }
.alert-secondary, .alert-light { background: var(--tc-surface-sunken); border-color: var(--tc-divider); }
.alert-info { border-left: 3px solid var(--tc-info); }
.alert-success { border-left: 3px solid var(--tc-success); }
.alert-warning { border-left: 3px solid var(--tc-warning); }
.alert-danger { border-left: 3px solid var(--tc-danger); }
.alert h2, .alert h4, .alert .alert-heading { font-size: 1rem; font-weight: 600; margin-bottom: .35rem; }
.alert ul { margin: .4rem 0 0; padding-left: 1.15rem; }
.alert .close { position: absolute; top: .45rem; right: .5rem; width: 30px; height: 30px; font-size: 1.2rem; }
.tc-alert { display: flex; gap: .85rem; align-items: flex-start; }
.tc-alert > i { font-size: 1.1rem; margin-top: .15rem; }
.alert-info .tc-alert > i, .alert-info.tc-alert > i { color: var(--tc-info); }
.alert-success.tc-alert > i { color: var(--tc-success); }
.alert-warning.tc-alert > i { color: var(--tc-warning); }
.alert-danger.tc-alert > i { color: var(--tc-danger); }

/* ==========================================================================
   14. Tooltips / popovers
   ========================================================================== */
.tooltip { font-family: var(--tc-font); font-size: .8rem; }
.tooltip-inner { background: #111827; color: #fff; border-radius: 10px; padding: .45rem .7rem; box-shadow: var(--tc-shadow-md); max-width: 260px; }
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: #111827; }
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: #111827; }
.bs-tooltip-left .arrow::before { border-left-color: #111827; }
.bs-tooltip-right .arrow::before { border-right-color: #111827; }
.popover { font-family: var(--tc-font); background: var(--tc-surface-raised); border: 1px solid var(--tc-divider); border-radius: 18px; box-shadow: var(--tc-shadow-lg); color: var(--tc-text-primary); }
.popover-header { background: transparent; border-bottom: 1px solid var(--tc-divider); font-weight: 600; color: var(--tc-text-primary); }
.popover-body { color: var(--tc-text-primary); padding: .75rem 1rem; }
.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after { border-bottom-color: var(--tc-surface-raised); }
.bs-popover-bottom > .arrow::before { border-bottom-color: var(--tc-divider); }
.bs-popover-top > .arrow::after { border-top-color: var(--tc-surface-raised); }

/* ==========================================================================
   15. Breadcrumbs
   ========================================================================== */
.breadcrumb { background: transparent; padding: 0; margin: 0; font-size: .84rem; flex-wrap: wrap; }
.breadcrumb-item, .breadcrumb-item a { color: var(--tc-text-secondary); }
.breadcrumb-item a:hover { color: var(--tc-primary-text); text-decoration: none; }
.breadcrumb-item.active { color: var(--tc-text-primary); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before { content: "\f105"; font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 300; color: var(--tc-text-muted); padding: 0 .55rem; }

/* ==========================================================================
   16. Loading indicators
   ========================================================================== */
.tc-spinner { display: inline-block; width: 22px; height: 22px; border: 2.5px solid var(--tc-primary-light); border-top-color: var(--tc-primary); border-radius: 50%; animation: tc-spin .8s linear infinite; vertical-align: middle; }
.tc-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.tc-spinner--lg { width: 40px; height: 40px; border-width: 3px; }
@keyframes tc-spin { to { transform: rotate(360deg); } }
.tc-skeleton { background: linear-gradient(90deg, var(--tc-divider) 25%, var(--tc-hover) 50%, var(--tc-divider) 75%); background-size: 200% 100%; animation: tc-shimmer 1.3s infinite; border-radius: var(--tc-radius-sm); min-height: 12px; }
@keyframes tc-shimmer { to { background-position: -200% 0; } }
.btn.tc-loading { pointer-events: none; opacity: .8; }
#fullpage-overlay { position: fixed; inset: 0; z-index: 2000; background: var(--tc-overlay); backdrop-filter: blur(3px); }
#fullpage-overlay .outer-wrapper { display: table; width: 100%; height: 100%; }
#fullpage-overlay .inner-wrapper { display: table-cell; vertical-align: middle; text-align: center; color: #fff; }
#fullpage-overlay .msg { display: inline-block; margin-top: .75rem; font-weight: 500; }

/* ==========================================================================
   17. Empty states
   ========================================================================== */
.tc-empty { text-align: center; padding: var(--tc-spacing-2xl) var(--tc-spacing-lg); color: var(--tc-text-secondary); }
.tc-empty__icon { width: 64px; height: 64px; margin: 0 auto var(--tc-spacing-md); border-radius: 20px; background: var(--tc-primary-light); color: var(--tc-primary-text); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.tc-empty__title { font-size: 1.05rem; font-weight: 600; color: var(--tc-text-primary); margin-bottom: .35rem; }
.tc-empty__text { max-width: 420px; margin: 0 auto var(--tc-spacing-md); font-size: .92rem; }

/* ==========================================================================
   18. Utility components
   ========================================================================== */
.tc-icon-tile { width: 44px; height: 44px; flex: none; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; background: var(--tc-primary-light); color: var(--tc-primary-text); }
.tc-icon-tile--sm { width: 34px; height: 34px; border-radius: 10px; font-size: .95rem; }
.tc-icon-tile--lg { width: 56px; height: 56px; border-radius: 18px; font-size: 1.35rem; }
.tc-icon-tile--success { background: var(--tc-success-light); color: var(--tc-success); }
.tc-icon-tile--warning { background: var(--tc-warning-light); color: var(--tc-warning); }
.tc-icon-tile--danger { background: var(--tc-danger-light); color: var(--tc-danger); }
.tc-icon-tile--neutral { background: var(--tc-neutral-light); color: var(--tc-text-secondary); }
.tc-divider { height: 1px; background: var(--tc-divider); margin: var(--tc-spacing-lg) 0; border: 0; }
.tc-stack > * + * { margin-top: var(--tc-spacing-md); }
.tc-row { display: flex; align-items: center; gap: var(--tc-spacing-md); }
.tc-row--between { justify-content: space-between; }
.tc-row--wrap { flex-wrap: wrap; }
.tc-grow { flex: 1 1 auto; min-width: 0; }
.tc-truncate, .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-kv { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: .65rem 1rem; margin: 0; }
.tc-kv dt { font-weight: 400; color: var(--tc-text-secondary); font-size: .88rem; }
.tc-kv dd { margin: 0; font-weight: 500; font-size: .92rem; word-break: break-word; }
@media (max-width: 575.98px) { .tc-kv { grid-template-columns: 1fr; gap: .15rem; } .tc-kv dd { margin-bottom: .6rem; } }
.tc-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: var(--tc-radius-pill); background: var(--tc-surface-sunken); border: 1px solid var(--tc-divider); font-size: .82rem; color: var(--tc-text-secondary); }
.tc-chip.active, .tc-chip:hover { border-color: var(--tc-primary); color: var(--tc-primary-text); background: var(--tc-primary-light); text-decoration: none; }
.tc-price { font-weight: 600; letter-spacing: -.02em; color: var(--tc-text-primary); }
.tc-price small { font-weight: 400; color: var(--tc-text-secondary); font-size: .8rem; letter-spacing: 0; }
.tc-list-plain { list-style: none; padding: 0; margin: 0; }
.tc-check-list { list-style: none; padding: 0; margin: 0; }
.tc-check-list li { position: relative; padding-left: 1.6rem; margin-bottom: .45rem; font-size: .9rem; color: var(--tc-text-secondary); }
.tc-check-list li::before { content: "\f00c"; font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 400; position: absolute; left: 0; top: .05rem; color: var(--tc-success); font-size: .85rem; }
img { max-width: 100%; }
.img-thumbnail { background: var(--tc-surface); border-color: var(--tc-divider); border-radius: var(--tc-radius-md); }
.jumbotron { background: var(--tc-surface); border-radius: var(--tc-radius-xl); box-shadow: var(--tc-shadow-md); }
.well { background: var(--tc-surface-sunken); border: 1px solid var(--tc-divider); border-radius: var(--tc-radius-md); padding: var(--tc-spacing-md); box-shadow: none; }
.panel { background: var(--tc-surface); border: 1px solid var(--tc-divider); border-radius: var(--tc-radius-lg); box-shadow: var(--tc-shadow-sm); margin-bottom: var(--tc-spacing-lg); }
.panel-heading { padding: var(--tc-spacing-md) var(--tc-spacing-lg); border-bottom: 1px solid var(--tc-divider); background: transparent !important; color: var(--tc-text-primary) !important; border-radius: var(--tc-radius-lg) var(--tc-radius-lg) 0 0; }
.panel-title { font-size: 1rem; font-weight: 600; margin: 0; }
.panel-body { padding: var(--tc-spacing-lg); }
.panel-footer { padding: var(--tc-spacing-md) var(--tc-spacing-lg); border-top: 1px solid var(--tc-divider); background: transparent; }

/* intl-tel-input (phone fields) */
.intl-tel-input { width: 100%; }
.intl-tel-input .country-list { background: var(--tc-surface-raised); border: 1px solid var(--tc-divider); border-radius: var(--tc-radius-md); box-shadow: var(--tc-shadow-lg); color: var(--tc-text-primary); }
.intl-tel-input .country-list .country.highlight { background: var(--tc-hover); }
.intl-tel-input .flag-container .selected-flag { border-radius: var(--tc-radius-md) 0 0 var(--tc-radius-md); }

/* Bootstrap-markdown editor (ticket replies) */
.md-editor { border-radius: var(--tc-radius-md); border-color: var(--tc-outline) !important; overflow: hidden; background: var(--tc-surface); }
.md-editor > .md-header { background: var(--tc-surface-sunken); border-bottom: 1px solid var(--tc-divider); padding: 6px; }
.md-editor > textarea { background: var(--tc-surface) !important; color: var(--tc-text-primary) !important; border: 0 !important; font-family: var(--tc-font); padding: 1rem !important; }
.md-editor > .md-header .btn { box-shadow: none; padding: .3rem .55rem; background: transparent; border: 0; color: var(--tc-text-secondary); }
.md-editor > .md-header .btn:hover { background: var(--tc-hover); color: var(--tc-text-primary); }
.md-editor.active { border-color: var(--tc-focus) !important; box-shadow: var(--tc-focus-ring); }
.markdown-editor-status { background: var(--tc-surface-sunken); color: var(--tc-text-secondary); font-size: .78rem; padding: .35rem .75rem; border-top: 1px solid var(--tc-divider); }
.md-preview { background: var(--tc-surface) !important; color: var(--tc-text-primary); padding: 1rem !important; }

/* Lightbox */
.lightboxOverlay { background: #0b1220; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}