/* *****************************************************

    ** Custom Stylesheet — Modern UI Polish **

    Layered on top of WHMCS Six theme defaults. Only
    refines visuals (typography, spacing, color, motion,
    elevation, focus states). No structural changes,
    no class renames, fully reversible by emptying
    this file.

***************************************************** */

/* =====================================================
   1. Design Tokens
   ===================================================== */
:root {
    /* Brand palette — kept aligned with existing #058 / #006687 / #0e5077 */
    --rsh-brand-50:  #eaf4f9;
    --rsh-brand-100: #cfe5ee;
    --rsh-brand-200: #9fcadd;
    --rsh-brand-300: #5fa6c4;
    --rsh-brand-400: #2a86ab;
    --rsh-brand-500: #006687;
    --rsh-brand-600: #0e5077;
    --rsh-brand-700: #093f5e;
    --rsh-brand-800: #062e44;
    --rsh-brand-900: #04202f;

    /* Neutrals — refined, slightly cooler greys */
    --rsh-ink-900: #0f172a;
    --rsh-ink-800: #1e293b;
    --rsh-ink-700: #334155;
    --rsh-ink-600: #475569;
    --rsh-ink-500: #64748b;
    --rsh-ink-400: #94a3b8;
    --rsh-ink-300: #cbd5e1;
    --rsh-ink-200: #e2e8f0;
    --rsh-ink-100: #f1f5f9;
    --rsh-ink-50:  #f8fafc;

    /* Surfaces */
    --rsh-surface:        #ffffff;
    --rsh-surface-muted:  #fafbfc;
    --rsh-surface-sunk:   #f5f7fa;

    /* Borders */
    --rsh-border:         #e6eaf0;
    --rsh-border-strong:  #d4dae3;

    /* Status */
    --rsh-success: #16a34a;
    --rsh-warning: #d97706;
    --rsh-danger:  #dc2626;
    --rsh-info:    #0284c7;

    /* Elevation — soft, modern, multi-layer shadows */
    --rsh-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --rsh-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --rsh-shadow-md: 0 4px 6px -2px rgba(15, 23, 42, 0.05), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
    --rsh-shadow-lg: 0 12px 24px -6px rgba(15, 23, 42, 0.08), 0 4px 8px -2px rgba(15, 23, 42, 0.04);
    --rsh-shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.12);

    /* Radii */
    --rsh-radius-xs: 4px;
    --rsh-radius-sm: 6px;
    --rsh-radius-md: 10px;
    --rsh-radius-lg: 14px;
    --rsh-radius-xl: 18px;

    /* Motion */
    --rsh-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --rsh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --rsh-dur-fast: 120ms;
    --rsh-dur:      200ms;
    --rsh-dur-slow: 320ms;

    /* Typography */
    --rsh-font-body: "Inter", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --rsh-font-display: "Plus Jakarta Sans", "Inter", "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --rsh-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* =====================================================
   2. Base Typography
   ===================================================== */
html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body,
input,
button,
select,
textarea {
    font-family: var(--rsh-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01", "ss03";
    letter-spacing: -0.005em;
    color: var(--rsh-ink-800);
}

body {
    background-color: var(--rsh-surface-sunk);
    line-height: 1.55;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--rsh-font-display);
    font-weight: 700;
    letter-spacing: -0.018em;
    color: var(--rsh-ink-900);
    line-height: 1.25;
}

h1, .h1 { font-weight: 800; letter-spacing: -0.024em; }
h2, .h2 { font-weight: 700; letter-spacing: -0.02em; }
h3, .h3 { font-weight: 700; }

p { line-height: 1.65; }

small, .small { color: var(--rsh-ink-500); }

a {
    color: var(--rsh-brand-500);
    text-decoration: none;
    transition: color var(--rsh-dur) var(--rsh-ease);
}
a:hover,
a:focus {
    color: var(--rsh-brand-700);
    text-decoration: none;
}

::selection {
    background: var(--rsh-brand-200);
    color: var(--rsh-brand-900);
}

/* Accessible focus rings (only for keyboard nav) */
:focus-visible {
    outline: 2px solid var(--rsh-brand-400);
    outline-offset: 2px;
    border-radius: var(--rsh-radius-xs);
}
.btn:focus,
.form-control:focus,
.list-group-item:focus {
    outline: none;
}

/* =====================================================
   3. Header / Top Bar
   ===================================================== */
section#header {
    padding: 14px 0;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border-bottom: 1px solid var(--rsh-border);
    border-radius: 0;
}

section#header .logo img {
    max-height: 52px;
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.06));
}

section#header .logo-text {
    font-family: var(--rsh-font-display);
    font-weight: 800;
    font-size: 1.85em;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--rsh-brand-600) 0%, var(--rsh-brand-400) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.top-nav {
    margin-top: 6px;
}

.top-nav > li > a {
    color: var(--rsh-ink-600);
    font-weight: 500;
    font-size: 13.5px;
    padding: 6px 12px;
    border-radius: var(--rsh-radius-sm);
    transition: background-color var(--rsh-dur) var(--rsh-ease), color var(--rsh-dur) var(--rsh-ease);
}
.top-nav > li > a:hover,
.top-nav > li > a:focus {
    background-color: var(--rsh-ink-100);
    color: var(--rsh-brand-600);
}

.top-nav > li.primary-action > a.btn,
.top-nav > li.primary-action .btn {
    background: linear-gradient(135deg, var(--rsh-brand-500) 0%, var(--rsh-brand-600) 100%);
    color: #fff;
    border: 0;
    padding: 7px 18px;
    font-weight: 600;
    border-radius: var(--rsh-radius-sm);
    box-shadow: 0 1px 2px rgba(0, 102, 135, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform var(--rsh-dur) var(--rsh-ease), box-shadow var(--rsh-dur) var(--rsh-ease), filter var(--rsh-dur) var(--rsh-ease);
}
.top-nav > li.primary-action > a.btn:hover {
    background: linear-gradient(135deg, var(--rsh-brand-600) 0%, var(--rsh-brand-700) 100%);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -2px rgba(0, 102, 135, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* =====================================================
   4. Main Navigation
   ===================================================== */
.navbar-main {
    background: linear-gradient(180deg, var(--rsh-brand-600) 0%, var(--rsh-brand-700) 100%);
    border: 0;
    min-height: 44px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 1px 3px rgba(0, 0, 0, 0.12);
    font-family: var(--rsh-font-display);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
}

.navbar-main .navbar-nav > li > a {
    color: rgba(255, 255, 255, 0.88);
    padding: 11px 18px;
    transition: background-color var(--rsh-dur) var(--rsh-ease), color var(--rsh-dur) var(--rsh-ease);
    position: relative;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > .open > a:focus {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.18);
}
.navbar-main .navbar-nav > .active > a::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--rsh-brand-200), #fff);
    border-radius: 2px 2px 0 0;
}

.navbar-main li.account {
    background-color: var(--rsh-brand-800);
}

.navbar-main .dropdown-menu {
    border: 1px solid var(--rsh-border);
    border-radius: var(--rsh-radius-md);
    padding: 6px;
    margin-top: 6px;
    box-shadow: var(--rsh-shadow-lg);
    overflow: hidden;
}
.navbar-main .dropdown-menu > li > a {
    padding: 8px 12px;
    border-radius: var(--rsh-radius-sm);
    font-size: 14px;
    color: var(--rsh-ink-700);
    transition: background-color var(--rsh-dur-fast) var(--rsh-ease), color var(--rsh-dur-fast) var(--rsh-ease);
}
.navbar-main .dropdown-menu > li > a:hover,
.navbar-main .dropdown-menu > li > a:focus,
.navbar-main .navbar-nav .dropdown-menu > li > a:hover,
.navbar-main .navbar-nav .dropdown-menu > li > a:focus {
    background-color: var(--rsh-brand-50);
    color: var(--rsh-brand-700);
}

/* =====================================================
   5. Home Banner / Hero
   ===================================================== */
section#home-banner {
    background:
        radial-gradient(1200px 400px at 10% -10%, rgba(42, 134, 171, 0.18), transparent 60%),
        radial-gradient(900px 400px at 95% 110%, rgba(14, 80, 119, 0.22), transparent 60%),
        linear-gradient(135deg, var(--rsh-brand-700) 0%, var(--rsh-brand-500) 100%);
    padding: 64px 0 72px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
section#home-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    pointer-events: none;
}
section#home-banner > .container { position: relative; z-index: 1; }

section#home-banner h2 {
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: 28px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

section#home-banner .form-control {
    height: 54px;
    font-size: 16px;
    border: 0;
    border-radius: var(--rsh-radius-md);
    padding-left: 18px;
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.25);
}
section#home-banner .input-group {
    border-radius: var(--rsh-radius-md);
    overflow: hidden;
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.35);
}
section#home-banner .btn {
    height: 54px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 0;
    padding: 0 22px;
    transition: filter var(--rsh-dur) var(--rsh-ease), transform var(--rsh-dur) var(--rsh-ease);
}
section#home-banner .btn.search {
    background: var(--rsh-brand-800);
    color: #fff;
}
section#home-banner .btn.search:hover {
    filter: brightness(1.15);
}
section#home-banner .btn.transfer {
    background: #ffffff;
    color: var(--rsh-brand-700);
}
section#home-banner .btn.transfer:hover {
    background: var(--rsh-brand-50);
}

/* =====================================================
   6. Home Shortcuts
   ===================================================== */
.home-shortcuts {
    background: var(--rsh-surface);
    border-bottom: 1px solid var(--rsh-border);
    padding: 18px 0;
}
.home-shortcuts .lead {
    color: var(--rsh-ink-700);
    font-weight: 500;
    font-family: var(--rsh-font-display);
}
.home-shortcuts li a {
    display: block;
    padding: 14px 10px;
    border-radius: var(--rsh-radius-md);
    color: var(--rsh-ink-700);
    transition: background-color var(--rsh-dur) var(--rsh-ease), transform var(--rsh-dur) var(--rsh-ease), color var(--rsh-dur) var(--rsh-ease);
}
.home-shortcuts li a:hover {
    background-color: var(--rsh-brand-50);
    color: var(--rsh-brand-700);
    transform: translateY(-2px);
}
.home-shortcuts li i {
    color: var(--rsh-brand-500);
    transition: transform var(--rsh-dur) var(--rsh-ease);
}
.home-shortcuts li a:hover i {
    transform: scale(1.08);
}

/* =====================================================
   7. Main Body
   ===================================================== */
section#main-body {
    background-color: var(--rsh-surface);
    padding: 32px 0;
}

div.header-lined h1 {
    font-family: var(--rsh-font-display);
    font-weight: 700;
    color: var(--rsh-ink-900);
    border-bottom: 1px solid var(--rsh-border);
    padding-bottom: 14px;
    margin-bottom: 22px;
    letter-spacing: -0.02em;
}

div.header-lined .breadcrumb {
    background: transparent;
    padding: 0;
    margin-top: -10px;
    font-size: 12.5px;
    color: var(--rsh-ink-500);
}
.breadcrumb > li + li::before {
    color: var(--rsh-ink-300);
}

/* =====================================================
   8. Buttons
   ===================================================== */
.btn {
    border-radius: var(--rsh-radius-sm);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.005em;
    padding: 7px 16px;
    border-width: 1px;
    transition:
        background-color var(--rsh-dur) var(--rsh-ease),
        border-color var(--rsh-dur) var(--rsh-ease),
        color var(--rsh-dur) var(--rsh-ease),
        box-shadow var(--rsh-dur) var(--rsh-ease),
        transform var(--rsh-dur) var(--rsh-ease),
        filter var(--rsh-dur) var(--rsh-ease);
    will-change: transform;
}
.btn:active {
    transform: translateY(1px);
}
.btn-lg {
    padding: 11px 22px;
    font-size: 16px;
    border-radius: var(--rsh-radius-md);
}
.btn-sm {
    padding: 4px 11px;
    font-size: 12.5px;
    border-radius: var(--rsh-radius-xs);
}
.btn-xs {
    padding: 2px 8px;
    font-size: 11.5px;
    border-radius: var(--rsh-radius-xs);
}

.btn-primary {
    background: linear-gradient(180deg, var(--rsh-brand-500) 0%, var(--rsh-brand-600) 100%);
    border-color: var(--rsh-brand-700);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 102, 135, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(180deg, var(--rsh-brand-600) 0%, var(--rsh-brand-700) 100%);
    border-color: var(--rsh-brand-800);
    color: #fff;
    box-shadow: 0 4px 12px -2px rgba(0, 102, 135, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn-primary:active {
    background: var(--rsh-brand-700);
    border-color: var(--rsh-brand-800);
}

.btn-default {
    background-color: #fff;
    border-color: var(--rsh-border-strong);
    color: var(--rsh-ink-700);
    box-shadow: var(--rsh-shadow-xs);
}
.btn-default:hover,
.btn-default:focus {
    background-color: var(--rsh-ink-50);
    border-color: var(--rsh-ink-300);
    color: var(--rsh-ink-900);
    box-shadow: var(--rsh-shadow-sm);
}

.btn-success {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    border-color: #15803d;
    color: #fff;
}
.btn-success:hover { background: linear-gradient(180deg, #16a34a 0%, #15803d 100%); border-color: #166534; color: #fff; }

.btn-danger {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    border-color: #b91c1c;
    color: #fff;
}
.btn-danger:hover { background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%); border-color: #991b1b; color: #fff; }

.btn-warning {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
    border-color: #b45309;
    color: #fff;
}
.btn-warning:hover { background: linear-gradient(180deg, #d97706 0%, #b45309 100%); border-color: #92400e; color: #fff; }

.btn-info {
    background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
    border-color: #0369a1;
    color: #fff;
}
.btn-info:hover { background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%); border-color: #075985; color: #fff; }

.btn-link {
    color: var(--rsh-brand-500);
    font-weight: 500;
}
.btn-link:hover {
    color: var(--rsh-brand-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* =====================================================
   9. Forms
   ===================================================== */
.form-control {
    border: 1px solid var(--rsh-border-strong);
    border-radius: var(--rsh-radius-sm);
    box-shadow: var(--rsh-shadow-xs);
    color: var(--rsh-ink-800);
    transition:
        border-color var(--rsh-dur) var(--rsh-ease),
        box-shadow var(--rsh-dur) var(--rsh-ease),
        background-color var(--rsh-dur) var(--rsh-ease);
    padding: 8px 12px;
    height: 38px;
}
.form-control:hover:not(:disabled):not([readonly]) {
    border-color: var(--rsh-ink-300);
}
.form-control:focus {
    border-color: var(--rsh-brand-400);
    box-shadow: 0 0 0 3px rgba(42, 134, 171, 0.18);
    outline: none;
}
.form-control::placeholder {
    color: var(--rsh-ink-400);
}
.input-lg,
.form-control.input-lg {
    height: 48px;
    font-size: 16px;
    border-radius: var(--rsh-radius-md);
    padding: 10px 16px;
}
.input-sm,
.form-control.input-sm {
    height: 32px;
    font-size: 13px;
    border-radius: var(--rsh-radius-xs);
}

label {
    font-weight: 600;
    color: var(--rsh-ink-700);
    font-size: 13.5px;
    margin-bottom: 6px;
    letter-spacing: -0.005em;
}

.has-error .form-control { border-color: var(--rsh-danger); }
.has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); }
.has-success .form-control { border-color: var(--rsh-success); }
.has-success .form-control:focus { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }

.input-group-addon {
    background-color: var(--rsh-ink-50);
    border-color: var(--rsh-border-strong);
    color: var(--rsh-ink-600);
    font-weight: 500;
}

/* =====================================================
   10. Panels / Cards
   ===================================================== */
.panel {
    border: 1px solid var(--rsh-border);
    border-radius: var(--rsh-radius-md);
    box-shadow: var(--rsh-shadow-sm);
    background-color: var(--rsh-surface);
    overflow: hidden;
    transition: box-shadow var(--rsh-dur) var(--rsh-ease), transform var(--rsh-dur) var(--rsh-ease);
}

.panel-heading {
    background-color: var(--rsh-surface-muted);
    border-bottom: 1px solid var(--rsh-border);
    padding: 12px 16px;
    font-family: var(--rsh-font-display);
}
.panel-title {
    font-weight: 700;
    color: var(--rsh-ink-900);
    letter-spacing: -0.01em;
    font-size: 14.5px;
}
.panel-title > i {
    color: var(--rsh-brand-500);
    margin-right: 4px;
}
.panel-body {
    padding: 16px;
}
.panel-footer {
    background-color: var(--rsh-surface-muted);
    border-top: 1px solid var(--rsh-border);
    padding: 12px 16px;
    color: var(--rsh-ink-600);
    font-size: 13px;
}

.panel-default > .panel-heading {
    background-color: var(--rsh-surface-muted);
    color: var(--rsh-ink-800);
}

.panel-primary {
    border-color: var(--rsh-brand-200);
}
.panel-primary > .panel-heading {
    background: linear-gradient(180deg, var(--rsh-brand-500) 0%, var(--rsh-brand-600) 100%);
    border-color: var(--rsh-brand-700);
    color: #fff;
}
.panel-primary > .panel-heading .panel-title { color: #fff; }
.panel-primary > .panel-heading .panel-title > i { color: rgba(255, 255, 255, 0.85); }

/* Sidebar panels */
.panel-sidebar {
    border-radius: var(--rsh-radius-md);
}
.panel-sidebar .panel-heading {
    background: var(--rsh-surface);
    border-bottom: 1px solid var(--rsh-border);
}
.panel-sidebar .panel-title {
    color: var(--rsh-ink-700);
    font-size: 13.5px;
    text-transform: none;
    letter-spacing: -0.005em;
}

/* Accent strip (panel-accent-*) — keep colors, refine appearance */
.panel[class*="panel-accent-"] {
    position: relative;
}
.panel[class*="panel-accent-"] > .panel-heading {
    border-top: 0;
}
.panel[class*="panel-accent-"]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: var(--rsh-radius-md) var(--rsh-radius-md) 0 0;
    background: currentColor;
    opacity: 0.85;
}
.panel.panel-accent-blue::before        { color: var(--rsh-brand-500); }
.panel.panel-accent-green::before       { color: #16a34a; }
.panel.panel-accent-red::before         { color: #dc2626; }
.panel.panel-accent-gold::before,
.panel.panel-accent-sun-flower::before  { color: #d97706; }
.panel.panel-accent-orange::before      { color: #ea580c; }
.panel.panel-accent-pink::before        { color: #ec4899; }
.panel.panel-accent-purple::before,
.panel.panel-accent-amethyst::before    { color: #9333ea; }
.panel.panel-accent-lime::before        { color: #65a30d; }
.panel.panel-accent-magenta::before     { color: #db2777; }
.panel.panel-accent-teal::before        { color: #0d9488; }
.panel.panel-accent-turquoise::before   { color: #06b6d4; }
.panel.panel-accent-emerald::before     { color: #059669; }
.panel.panel-accent-wet-asphalt::before,
.panel.panel-accent-midnight-blue::before { color: var(--rsh-ink-800); }
.panel.panel-accent-pomegranate::before { color: #b91c1c; }
.panel.panel-accent-silver::before,
.panel.panel-accent-asbestos::before    { color: var(--rsh-ink-500); }

/* =====================================================
   11. Client Home — Tiles
   ===================================================== */
.tiles .tile {
    background-color: var(--rsh-surface);
    border: 1px solid var(--rsh-border);
    border-radius: var(--rsh-radius-md);
    box-shadow: var(--rsh-shadow-sm);
    margin-bottom: 16px;
    transition:
        box-shadow var(--rsh-dur) var(--rsh-ease),
        transform var(--rsh-dur) var(--rsh-ease),
        border-color var(--rsh-dur) var(--rsh-ease);
    overflow: hidden;
    position: relative;
}
.tiles .tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--rsh-shadow-lg);
    border-color: var(--rsh-border-strong);
}
.tiles .tile a {
    color: var(--rsh-ink-800);
}
.tile .icon {
    color: var(--rsh-ink-400);
    transition: color var(--rsh-dur) var(--rsh-ease), transform var(--rsh-dur) var(--rsh-ease);
}
.tiles .tile:hover .icon {
    color: var(--rsh-brand-500);
    transform: scale(1.06);
}
.tile .stat {
    font-family: var(--rsh-font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--rsh-ink-900);
}
.tile .title {
    font-weight: 600;
    color: var(--rsh-ink-600);
    letter-spacing: 0.01em;
}

/* =====================================================
   12. Client Home — KB Search
   ===================================================== */
.home-kb-search {
    position: relative;
    margin: 24px 0;
}
.home-kb-search .form-control {
    height: 56px;
    padding-left: 52px;
    border-radius: var(--rsh-radius-lg);
    background-color: var(--rsh-surface);
    border: 1px solid var(--rsh-border);
    box-shadow: var(--rsh-shadow-sm);
    font-size: 15px;
    transition: box-shadow var(--rsh-dur) var(--rsh-ease), border-color var(--rsh-dur) var(--rsh-ease);
}
.home-kb-search .form-control:focus {
    border-color: var(--rsh-brand-400);
    box-shadow: 0 0 0 4px rgba(42, 134, 171, 0.15), var(--rsh-shadow-md);
}
.home-kb-search i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rsh-ink-400);
    font-size: 16px;
}

/* =====================================================
   13. List Groups
   ===================================================== */
.list-group {
    border-radius: var(--rsh-radius-md);
    overflow: hidden;
}
.list-group-item {
    border-color: var(--rsh-border);
    padding: 10px 16px;
    color: var(--rsh-ink-700);
    transition: background-color var(--rsh-dur-fast) var(--rsh-ease), color var(--rsh-dur-fast) var(--rsh-ease), padding-left var(--rsh-dur) var(--rsh-ease);
}
a.list-group-item:hover {
    background-color: var(--rsh-brand-50);
    color: var(--rsh-brand-700);
    padding-left: 20px;
}
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
    background: linear-gradient(180deg, var(--rsh-brand-500) 0%, var(--rsh-brand-600) 100%);
    border-color: var(--rsh-brand-700);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
a.list-group-item.active .badge {
    background-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* =====================================================
   14. Tables
   ===================================================== */
.table {
    background-color: var(--rsh-surface);
}
.table > thead > tr > th {
    border-bottom: 1px solid var(--rsh-border);
    background-color: var(--rsh-surface-muted);
    color: var(--rsh-ink-600);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 12px 14px;
    vertical-align: middle;
}
.table > tbody > tr > td {
    border-color: var(--rsh-border);
    padding: 12px 14px;
    color: var(--rsh-ink-700);
    vertical-align: middle;
}
.table-hover > tbody > tr:hover > td {
    background-color: var(--rsh-brand-50);
}
.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: var(--rsh-surface-muted);
}
.table-bordered {
    border-color: var(--rsh-border);
    border-radius: var(--rsh-radius-md);
    overflow: hidden;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border-color: var(--rsh-border);
}

/* =====================================================
   15. Alerts
   ===================================================== */
.alert {
    border-radius: var(--rsh-radius-md);
    border-width: 1px;
    padding: 14px 16px;
    box-shadow: var(--rsh-shadow-xs);
    font-size: 14px;
}
.alert-success { background-color: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.alert-info    { background-color: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.alert-warning { background-color: #fffbeb; color: #92400e; border-color: #fde68a; }
.alert-danger  { background-color: #fef2f2; color: #991b1b; border-color: #fecaca; }

.alert-bordered-left {
    border: 1px solid var(--rsh-border);
    border-left: 3px solid;
    border-radius: var(--rsh-radius-md);
}

/* =====================================================
   16. Labels & Badges
   ===================================================== */
.label {
    border-radius: var(--rsh-radius-xs);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    text-transform: uppercase;
}
.label-default { background-color: var(--rsh-ink-100); color: var(--rsh-ink-700); }
.label-primary { background-color: var(--rsh-brand-500); color: #fff; }
.label-success { background-color: #16a34a; color: #fff; }
.label-info    { background-color: #0284c7; color: #fff; }
.label-warning { background-color: #d97706; color: #fff; }
.label-danger  { background-color: #dc2626; color: #fff; }

.badge {
    background-color: var(--rsh-ink-200);
    color: var(--rsh-ink-700);
    font-weight: 600;
    font-size: 11.5px;
    padding: 3px 8px;
    border-radius: 999px;
}

/* =====================================================
   17. Pagination
   ===================================================== */
.pagination > li > a,
.pagination > li > span {
    color: var(--rsh-ink-700);
    border-color: var(--rsh-border);
    margin: 0 2px;
    border-radius: var(--rsh-radius-xs) !important;
    transition: background-color var(--rsh-dur) var(--rsh-ease), color var(--rsh-dur) var(--rsh-ease), border-color var(--rsh-dur) var(--rsh-ease);
}
.pagination > li > a:hover {
    background-color: var(--rsh-brand-50);
    border-color: var(--rsh-brand-200);
    color: var(--rsh-brand-700);
}
.pagination > .active > a,
.pagination > .active > span {
    background-color: var(--rsh-brand-500);
    border-color: var(--rsh-brand-500);
    color: #fff;
}

/* =====================================================
   18. Modals
   ===================================================== */
.modal-content {
    border: 0;
    border-radius: var(--rsh-radius-lg);
    box-shadow: var(--rsh-shadow-xl);
    overflow: hidden;
}
.modal-header {
    border-bottom: 1px solid var(--rsh-border);
    padding: 16px 20px;
}
.modal-title {
    font-family: var(--rsh-font-display);
    font-weight: 700;
    color: var(--rsh-ink-900);
}
.modal-body { padding: 20px; }
.modal-footer {
    border-top: 1px solid var(--rsh-border);
    background-color: var(--rsh-surface-muted);
    padding: 14px 20px;
}
.modal-backdrop.in { opacity: 0.55; }

/* =====================================================
   19. Sidebar
   ===================================================== */
.sidebar .panel {
    margin-bottom: 18px;
}

/* =====================================================
   20. Footer
   ===================================================== */
section#footer {
    background: var(--rsh-surface-muted);
    border-top: 1px solid var(--rsh-border);
    color: var(--rsh-ink-500);
    font-size: 13px;
    padding: 22px 0;
}
section#footer .back-to-top i {
    background-color: var(--rsh-surface);
    border: 1px solid var(--rsh-border);
    color: var(--rsh-ink-500);
    border-radius: var(--rsh-radius-md);
    padding: 8px 11px;
    box-shadow: var(--rsh-shadow-sm);
    opacity: 1;
    transition: background-color var(--rsh-dur) var(--rsh-ease), color var(--rsh-dur) var(--rsh-ease), transform var(--rsh-dur) var(--rsh-ease);
}
section#footer .back-to-top:hover i {
    background-color: var(--rsh-brand-500);
    color: #fff;
    border-color: var(--rsh-brand-500);
    transform: translateY(-2px);
}

/* =====================================================
   21. Misc — popovers, tooltips, dropdowns
   ===================================================== */
.popover {
    border: 1px solid var(--rsh-border);
    border-radius: var(--rsh-radius-md);
    box-shadow: var(--rsh-shadow-lg);
    font-family: var(--rsh-font-body);
}
.popover-title {
    background-color: var(--rsh-surface-muted);
    border-bottom-color: var(--rsh-border);
    font-family: var(--rsh-font-display);
    font-weight: 700;
}

.tooltip-inner {
    background-color: var(--rsh-ink-900);
    border-radius: var(--rsh-radius-sm);
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 500;
    box-shadow: var(--rsh-shadow-md);
}
.tooltip.top .tooltip-arrow   { border-top-color: var(--rsh-ink-900); }
.tooltip.bottom .tooltip-arrow{ border-bottom-color: var(--rsh-ink-900); }
.tooltip.left .tooltip-arrow  { border-left-color: var(--rsh-ink-900); }
.tooltip.right .tooltip-arrow { border-right-color: var(--rsh-ink-900); }

.dropdown-menu {
    border: 1px solid var(--rsh-border);
    border-radius: var(--rsh-radius-md);
    padding: 6px;
    box-shadow: var(--rsh-shadow-lg);
}
.dropdown-menu > li > a {
    padding: 7px 12px;
    border-radius: var(--rsh-radius-sm);
    color: var(--rsh-ink-700);
    transition: background-color var(--rsh-dur-fast) var(--rsh-ease), color var(--rsh-dur-fast) var(--rsh-ease);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--rsh-brand-50);
    color: var(--rsh-brand-700);
}
.dropdown-menu .divider {
    background-color: var(--rsh-border);
    margin: 6px 0;
}

/* =====================================================
   22. Code / inline mono
   ===================================================== */
code, kbd, pre, samp {
    font-family: var(--rsh-font-mono);
    font-size: 0.92em;
}
code {
    color: var(--rsh-brand-700);
    background-color: var(--rsh-brand-50);
    padding: 2px 6px;
    border-radius: var(--rsh-radius-xs);
    border: 1px solid var(--rsh-brand-100);
}
pre {
    background-color: var(--rsh-ink-50);
    border: 1px solid var(--rsh-border);
    border-radius: var(--rsh-radius-md);
    padding: 14px 16px;
    color: var(--rsh-ink-800);
}

/* =====================================================
   23. Nav-tabs / Nav-pills
   ===================================================== */
.nav-tabs {
    border-bottom: 1px solid var(--rsh-border);
}
.nav-tabs > li > a {
    border: 1px solid transparent;
    border-radius: var(--rsh-radius-sm) var(--rsh-radius-sm) 0 0;
    color: var(--rsh-ink-600);
    font-weight: 600;
    margin-right: 2px;
    transition: background-color var(--rsh-dur) var(--rsh-ease), color var(--rsh-dur) var(--rsh-ease), border-color var(--rsh-dur) var(--rsh-ease);
}
.nav-tabs > li > a:hover {
    background-color: var(--rsh-surface-muted);
    border-color: transparent;
    color: var(--rsh-brand-600);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: var(--rsh-surface);
    color: var(--rsh-brand-600);
    border-color: var(--rsh-border) var(--rsh-border) transparent;
    border-bottom-color: transparent;
    position: relative;
}
.nav-tabs > li.active > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--rsh-brand-500);
}

.nav-pills > li > a {
    border-radius: var(--rsh-radius-sm);
    font-weight: 600;
    color: var(--rsh-ink-700);
    transition: background-color var(--rsh-dur) var(--rsh-ease), color var(--rsh-dur) var(--rsh-ease);
}
.nav-pills > li > a:hover {
    background-color: var(--rsh-brand-50);
    color: var(--rsh-brand-700);
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: var(--rsh-brand-500);
    color: #fff;
}

/* =====================================================
   24. Progress bars
   ===================================================== */
.progress {
    border-radius: 999px;
    height: 10px;
    background-color: var(--rsh-ink-100);
    box-shadow: none;
    overflow: hidden;
}
.progress-bar {
    background: linear-gradient(90deg, var(--rsh-brand-400), var(--rsh-brand-600));
    box-shadow: none;
    transition: width var(--rsh-dur-slow) var(--rsh-ease-out);
}
.progress-bar-success { background: linear-gradient(90deg, #22c55e, #16a34a); }
.progress-bar-info    { background: linear-gradient(90deg, #38bdf8, #0284c7); }
.progress-bar-warning { background: linear-gradient(90deg, #fbbf24, #d97706); }
.progress-bar-danger  { background: linear-gradient(90deg, #f87171, #dc2626); }

/* =====================================================
   25. Loading overlay
   ===================================================== */
#fullpage-overlay {
    background-color: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#fullpage-overlay .inner-wrapper {
    background-color: var(--rsh-surface);
    border-radius: var(--rsh-radius-lg);
    box-shadow: var(--rsh-shadow-xl);
    padding: 24px 32px;
    color: var(--rsh-ink-800);
}

/* =====================================================
   26. Scrollbar (WebKit)
   ===================================================== */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: var(--rsh-surface-sunk);
}
::-webkit-scrollbar-thumb {
    background: var(--rsh-ink-300);
    border-radius: 999px;
    border: 3px solid var(--rsh-surface-sunk);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--rsh-ink-400);
}

/* =====================================================
   27. Reduced motion
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================
   28. Smooth scrolling
   ===================================================== */
html {
    scroll-behavior: smooth;
}

/* =====================================================
   29. Print refinements
   ===================================================== */
@media print {
    section#header,
    .navbar-main,
    section#footer,
    .top-nav,
    .back-to-top {
        display: none !important;
    }
    .panel { box-shadow: none; border: 1px solid #ddd; }
}