/**
 * ============================================================
 * G2M Studio CMS — Main Stylesheet
 * Design language: soft neutral canvas, floating rounded panels,
 * pill controls, pastel status tints, tight geometric type.
 * Font: Manrope (Google Fonts) — closest match to the reference UI.
 * Brand colors: Primary #014d46, Secondary #ea6c19.
 * Mobile-first, native-app feel on mobile devices.
 * ============================================================
 */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
    --primary: #014d46;
    --primary-rgb: 1, 77, 70;
    --primary-light: #027a6f;
    --primary-dark: #013b36;
    --primary-soft: #e5f1ef;
    --secondary: #ea6c19;
    --secondary-rgb: 234, 108, 25;
    --secondary-light: #f08a40;
    --secondary-dark: #c55a14;
    --secondary-soft: #fdeede;
    --bg: #eef0f4;               /* page canvas — soft cool gray */
    --surface: #ffffff;          /* cards, sidebar, panels */
    --surface-soft: #f5f6f8;     /* inset fills (inputs, chips) */
    --surface-hover: #f0f2f6;
    --text: #171a2c;             /* near-black, slightly cool */
    --text-muted: #7d8399;
    --text-faint: #a3a8bc;
    --border: #e9ebf1;
    --border-strong: #dfe2ea;
    --sidebar-width: 236px;
    --sidebar-gap: 16px;
    --navbar-height: 60px;
    --tab-bar-height: 64px;
    --radius-xl: 22px;           /* outer panels */
    --radius: 18px;              /* cards */
    --radius-md: 14px;
    --radius-sm: 12px;           /* inputs */
    --radius-pill: 999px;        /* buttons, badges */
    --shadow-xs: 0 1px 2px rgba(20, 25, 45, 0.05);
    --shadow: 0 1px 2px rgba(20, 25, 45, 0.04), 0 4px 16px rgba(20, 25, 45, 0.04);
    --shadow-md: 0 2px 4px rgba(20, 25, 45, 0.05), 0 12px 32px rgba(20, 25, 45, 0.08);
    --shadow-lg: 0 8px 20px rgba(20, 25, 45, 0.08), 0 24px 56px rgba(20, 25, 45, 0.12);
    --transition: all 0.18s ease;
}

/* ── Base ──────────────────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent pull-to-refresh on mobile */
    overscroll-behavior: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    letter-spacing: -0.02em;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--primary-light);
}

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

::selection {
    background: rgba(var(--primary-rgb), 0.15);
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4d8e2; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #b8bdd0; }

/* ── Top Navbar (mobile-only bar; desktop uses the sidebar rail) ── */
.app-navbar {
    background: var(--surface);
    height: var(--navbar-height);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    z-index: 1030;
}

.app-navbar .navbar-brand {
    color: var(--text);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.app-navbar .navbar-brand:hover {
    color: var(--text);
}

/* Tenant/brand pickers — soft gray pills, work on light bars & in the rail */
.brand-selector,
.tenant-selector,
.sidebar-select {
    background: var(--surface-soft);
    border: 1px solid transparent;
    color: var(--text);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    min-width: 160px;
    padding: 8px 12px;
}

.brand-selector:focus,
.tenant-selector:focus,
.sidebar-select:focus {
    background: var(--surface);
    border-color: var(--primary);
    color: var(--text);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

.brand-selector option,
.tenant-selector option,
.sidebar-select option {
    color: var(--text);
    background: var(--surface);
}

/* Avatar */
.avatar-sm {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Sidebar Rail (Desktop) ────────────────────────────────── */
.sidebar {
    position: fixed;
    top: var(--sidebar-gap);
    left: var(--sidebar-gap);
    bottom: var(--sidebar-gap);
    width: var(--sidebar-width);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    z-index: 1020;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 18px 12px 12px;
}

.sidebar-brand a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 16px;
    color: var(--text);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.02em;
}

.sidebar-brand img {
    height: 70px;
    width: auto;
}

.sidebar-selectors {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 4px 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.sidebar-selectors .sidebar-select {
    width: 100%;
    min-width: 0;
}

.sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
}

.sidebar-nav .nav-section {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    padding: 16px 14px 6px;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    margin: 2px 0;
    color: #6b7086;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.sidebar-nav a:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--text);
}

.sidebar-nav a.active {
    background: var(--surface);
    color: var(--text);
    font-weight: 700;
    box-shadow: var(--shadow-xs);
}

.sidebar-nav a i {
    width: 20px;
    text-align: center;
    font-size: 15px;
    color: var(--text-faint);
    transition: var(--transition);
}

.sidebar-nav a:hover i {
    color: var(--text-muted);
}

.sidebar-nav a.active i {
    color: var(--primary);
}

/* Upgrade / top-up card pinned above the user footer */
.sidebar-upgrade {
    margin: 10px 4px 14px;
    padding: 16px 14px;
    border-radius: var(--radius-md);
    background: linear-gradient(155deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
}

.sidebar-upgrade .upgrade-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-bottom: 10px;
}

.sidebar-upgrade h6 {
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.sidebar-upgrade p {
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 12px;
    line-height: 1.4;
}

.sidebar-upgrade .btn-secondary {
    box-shadow: none;
}

/* Sidebar footer — user card pinned to the bottom of the rail */
.sidebar-footer {
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    text-align: left;
    transition: var(--transition);
}

.sidebar-user:hover {
    background: var(--surface-hover);
}

.sidebar-user-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.25;
}

.sidebar-user-meta .name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-meta .email {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user > .fa-ellipsis {
    color: var(--text-faint);
    font-size: 14px;
}

.sidebar-user.dropdown-toggle::after {
    display: none;
}

/* ── Mobile Bottom Tab Bar ─────────────────────────────────── */
.mobile-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--tab-bar-height);
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 1030;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -4px 20px rgba(20, 25, 45, 0.05);
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.tab-item i {
    font-size: 18px;
}

.tab-item.active {
    color: var(--primary);
    background: var(--primary-soft);
}

.tab-item.active i {
    color: var(--primary);
}

.tab-item:active {
    transform: scale(0.92);
}

/* .tab-item is also used on the <button> "More" tab — reset UA button styles */
button.tab-item {
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
}

/* ── Mobile "More" Nav Sheet ───────────────────────────────── */
.mobile-nav-sheet {
    --bs-offcanvas-height: auto;
    max-height: 82vh;
    background: var(--surface);
    border: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-lg);
}

.mobile-nav-sheet .offcanvas-header {
    padding: 16px 20px 8px;
}

.mobile-nav-sheet .offcanvas-title {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -0.01em;
}

.mobile-nav-sheet .offcanvas-body {
    padding: 0 12px 28px;
}

.mobile-nav-list a {
    font-size: 14px;
    padding: 11px 12px;
}

.mobile-nav-list a.active {
    background: var(--primary-soft);
    color: var(--primary);
    box-shadow: none;
}

/* ── Main Content Panel ────────────────────────────────────── */
.main-content {
    min-height: 100vh;
    transition: var(--transition);
}

/* Desktop: floating content panel next to the sidebar rail */
@media (min-width: 992px) {
    .main-content {
        margin: var(--sidebar-gap) var(--sidebar-gap) var(--sidebar-gap)
                calc(var(--sidebar-width) + var(--sidebar-gap) * 2);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow);
        min-height: calc(100vh - var(--sidebar-gap) * 2);
    }
}

/* Mobile: room for the fixed top bar + bottom tab bar */
@media (max-width: 991.98px) {
    .main-content {
        margin-top: var(--navbar-height);
        padding-bottom: calc(var(--tab-bar-height) + 16px);
        background: transparent;
    }
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    background: var(--surface);
    transition: var(--transition);
}

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

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.01em;
    padding: 16px 20px;
}

.card-body {
    padding: 20px;
}

/* ── Stat Cards ────────────────────────────────────────────── */
.stat-card {
    border-radius: var(--radius);
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

.stat-card .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    background: var(--surface-soft);
    color: var(--text-muted);
}

.stat-card .stat-value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1;
}

.stat-card .stat-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 4px;
}

.stat-card .stat-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.stat-card .stat-icon {
    width: 34px;
    height: 34px;
    font-size: 14px;
}

.stat-card .stat-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.stat-card .stat-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
}

.stat-trend.trend-up { color: #157a4c; }
.stat-trend.trend-down { color: #c2382f; }
.stat-trend.trend-flat { color: var(--text-faint); }

/* ── Performance Chart Card ────────────────────────────────── */
.chart-card .card-header {
    padding: 18px 20px 4px;
    border-bottom: none;
}

.chart-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.chart-legend .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.chart-canvas-wrap {
    position: relative;
    height: 220px;
    padding: 6px 12px 0;
}

/* ── Current Tasks List ────────────────────────────────────── */
.task-list {
    display: flex;
    flex-direction: column;
}

.task-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    transition: var(--transition);
}

.task-row:first-child { border-top: none; }

.task-row:hover {
    background: var(--surface-soft);
}

.task-row .task-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.task-row .task-name {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text);
    letter-spacing: -0.01em;
}

.task-row .task-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.task-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.task-row .task-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.task-row .task-kebab {
    color: var(--text-faint);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.task-row .task-kebab:hover {
    background: var(--surface-hover);
    color: var(--text);
}

/* ── Buttons — fully-rounded pills ─────────────────────────── */
.btn {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    border-radius: var(--radius-pill);
    font-size: 13px;
    padding: 9px 18px;
    letter-spacing: 0.01em;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.btn:active {
    transform: scale(0.97);
}

.btn-sm {
    font-size: 12.5px;
    padding: 7px 14px;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.22);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.28);
}

.btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--secondary-rgb), 0.22);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--secondary-dark);
    border-color: var(--secondary-dark);
    color: #fff;
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--border-strong);
    background: var(--surface);
}

.btn-outline-primary:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface);
}

.btn-outline-secondary:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text);
}

.btn-outline-danger {
    color: #dc3545;
    border-color: var(--border-strong);
    background: var(--surface);
}

.btn-outline-danger:hover {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

.btn-outline-success {
    color: #157a4c;
    border-color: var(--border-strong);
    background: var(--surface);
}

.btn-outline-success:hover {
    background: #157a4c;
    border-color: #157a4c;
    color: #fff;
}

.btn-light {
    background: var(--surface-soft);
    border-color: transparent;
    color: var(--text);
}

.btn-light:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.btn-link {
    color: var(--primary);
    font-weight: 600;
}

/* ── Forms — soft filled inputs ────────────────────────────── */
.form-control, .form-select {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background-color: var(--surface-soft);
    font-size: 14px;
    padding: 10px 14px;
    transition: var(--transition);
}

.form-control:hover, .form-select:hover {
    background-color: var(--surface-hover);
}

.form-control:focus, .form-select:focus {
    background-color: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

.form-control::placeholder {
    color: var(--text-faint);
}

.form-label {
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.01em;
    color: var(--text);
    margin-bottom: 6px;
}

.form-check-input {
    accent-color: var(--primary);
    border-color: var(--border-strong);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
    border-color: var(--primary);
}

/* ── Tables ────────────────────────────────────────────────── */
.table {
    font-size: 13.5px;
    --bs-table-hover-bg: #fafbfd;
}

.table thead th {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
}

.table tbody td {
    padding: 14px 12px;
    vertical-align: middle;
    border-color: #f1f3f7;
}

/* ── Badges — pastel pills ─────────────────────────────────── */
.badge {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.02em;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
}

.badge.bg-success  { background: #e5f6ec !important; color: #157a4c; }
.badge.bg-warning  { background: #fdf2e0 !important; color: #a35d08; }
.badge.bg-danger   { background: #fdeceb !important; color: #c2382f; }
.badge.bg-primary  { background: var(--primary-soft) !important; color: var(--primary); }
.badge.bg-secondary{ background: #eef0f4 !important; color: #5b6174; }
.badge.bg-info     { background: #e8f1fe !important; color: #1d5fd1; }
.badge.bg-dark     { background: #171a2c !important; color: #fff; }

.bg-orange {
    background-color: var(--secondary) !important;
    color: #fff;
}

/* ── Dropdowns ─────────────────────────────────────────────── */
.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 6px;
    font-size: 13px;
}

.dropdown-item {
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-weight: 600;
    color: var(--text);
}

.dropdown-item:hover, .dropdown-item:focus {
    background: var(--surface-hover);
    color: var(--text);
}

.dropdown-item-text {
    padding: 8px 12px;
}

.dropdown-divider {
    border-color: var(--border);
    margin: 6px 0;
}

/* ── Alerts ────────────────────────────────────────────────── */
.alert {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: var(--shadow-xs);
}

/* ── Page Header ───────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.page-header h1 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 0;
    color: var(--text);
}

.page-header small {
    font-size: 13px;
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .page-header h1 {
        font-size: 19px;
    }
}

/* ── Empty State ───────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 64px 20px;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 44px;
    color: var(--text-faint);
    margin-bottom: 16px;
}

.empty-state h5 {
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 14px;
    max-width: 420px;
    margin: 0 auto 20px;
}

/* ── Guest Layout (Login/Register) ─────────────────────────── */
.guest-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background:
        radial-gradient(60rem 40rem at 15% 0%, rgba(var(--primary-rgb), 0.08), transparent 60%),
        radial-gradient(50rem 36rem at 100% 100%, rgba(var(--secondary-rgb), 0.07), transparent 60%),
        var(--bg);
    padding: 20px;
}

.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 420px;
    padding: 40px 36px;
}

.auth-card .auth-logo {
    text-align: center;
    margin-bottom: 24px;
}

.auth-card .auth-logo img {
    height: 48px;
}

.auth-card .auth-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: 4px;
}

.auth-card .auth-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 24px;
}

/* ── Content Item Card ─────────────────────────────────────── */
.content-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 16px;
    transition: var(--transition);
    cursor: pointer;
}

.content-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.content-card .platform-badge {
    font-size: 18px;
    opacity: 0.7;
}

.content-card .template-name {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.content-card .pillar-name {
    font-size: 12px;
    color: var(--text-muted);
}

/* ── Calendar / Week Grid ──────────────────────────────────── */
.week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

@media (max-width: 767.98px) {
    .week-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.day-column {
    min-height: 120px;
    background: var(--surface-soft);
    border-radius: var(--radius-md);
    padding: 6px;
}

.day-header {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 8px 6px;
    text-align: center;
    margin-bottom: 6px;
}

.day-header .day-date {
    display: block;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-top: 2px;
}

/* ── Modal ─────────────────────────────────────────────────── */
.modal-content {
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--border);
    padding: 18px 22px;
}

.modal-header .modal-title {
    font-weight: 800;
    letter-spacing: -0.01em;
}

.modal-body {
    padding: 22px;
}

.modal-footer {
    border-top: 1px solid var(--border);
    padding: 14px 22px;
}

/* ── Loading Spinner ───────────────────────────────────────── */
.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(238, 240, 244, 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-dots {
    display: inline-flex;
    gap: 6px;
}

.loading-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    animation: dot-pulse 1.2s ease-in-out infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-pulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ── Slot Editor ───────────────────────────────────────────── */
.slot-editor {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 12px;
    background: var(--surface-soft);
}

.slot-editor .slot-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.slot-editor .char-counter {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: right;
    margin-top: 4px;
}

.slot-editor .char-counter.over-limit {
    color: #dc3545;
    font-weight: 700;
}

/* ── Image slot toolbar / preview wrap ─────────────────────── */
.img-slot-wrap .img-preview {
    display: block;
}

/* ── Toast ─────────────────────────────────────────────────── */
.toast-container {
    position: fixed;
    top: calc(var(--navbar-height) + 12px);
    right: 16px;
    z-index: 9999;
}

.toast {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

/* ── Utilities ─────────────────────────────────────────────── */
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }

.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.bg-primary-soft { background: var(--primary-soft); }
.bg-secondary-soft { background: var(--secondary-soft); }

.clickable { cursor: pointer; }
.no-wrap { white-space: nowrap; }

/* ── Responsive Helpers ────────────────────────────────────── */
@media (max-width: 575.98px) {
    .card-body { padding: 16px; }
    .card-header { padding: 14px 16px; }
    .btn { padding: 8px 16px; }
    .table { font-size: 12.5px; }
}

/* ── Animations ────────────────────────────────────────────── */
.fade-in {
    animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Image Preview Thumbnails ──────────────────────────────── */
.img-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.img-preview {
    max-width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

/* ── Pillar Color Dot ──────────────────────────────────────── */
.pillar-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

/* ── Action Bar (mobile-friendly sticky actions) ───────────── */
.action-bar {
    position: sticky;
    bottom: calc(var(--tab-bar-height) + 8px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow-md);
    z-index: 100;
}

@media (min-width: 992px) {
    .action-bar {
        bottom: 16px;
    }
}

/* ── Right Panel (Profile + Activity) ──────────────────────── */
:root {
    --rightpanel-width: 300px;
}

.right-panel {
    position: fixed;
    top: var(--sidebar-gap);
    right: var(--sidebar-gap);
    bottom: var(--sidebar-gap);
    width: var(--rightpanel-width);
    display: flex;
    flex-direction: column;
    gap: var(--sidebar-gap);
    z-index: 1015;
    overflow-y: auto;
    scrollbar-width: thin;
}

@media (min-width: 1400px) {
    body.has-right-panel .main-content {
        margin-right: calc(var(--rightpanel-width) + var(--sidebar-gap) * 2);
    }
}

@media (max-width: 1399.98px) {
    .right-panel {
        display: none;
    }
}

.profile-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    padding: 24px 20px;
    text-align: center;
    flex-shrink: 0;
}

.profile-card .profile-avatar {
    width: 68px;
    height: 68px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
}

.profile-card .profile-name {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
    margin-bottom: 2px;
}

.profile-card .profile-meta {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.profile-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.profile-actions a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: var(--transition);
}

.profile-actions a:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.activity-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.activity-card .activity-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.activity-item {
    display: flex;
    gap: 10px;
}

.activity-item .activity-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.activity-item .activity-body {
    min-width: 0;
}

.activity-item .activity-line {
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.4;
}

.activity-item .activity-line strong {
    font-weight: 800;
}

.activity-item .activity-time {
    font-size: 11px;
    color: var(--text-faint);
    font-weight: 600;
    margin-top: 2px;
}

.activity-item .activity-target {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-soft);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-top: 6px;
}

.activity-card .activity-empty {
    text-align: center;
    color: var(--text-faint);
    font-size: 12.5px;
    padding: 24px 0;
}

.activity-card .activity-footer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.activity-card .activity-footer a {
    font-size: 12.5px;
    font-weight: 700;
}