/* ============================================
   GeekZilla Core Framework — Core Shared CSS
   Canonical shell tokens + shared legacy surfaces
   ============================================ */

/* ============================================
   VARIÁVEIS CSS (THEME SYSTEM)
   ============================================ */
:root {
    /* Cores Principais */
    --primary: #2563eb;
    --primary-glow: #3b82f6;
    --primary-foreground: hsl(0, 0%, 100%);

    /* Cores Secundárias */
    --secondary: #f8fafc;
    --secondary-foreground: #0f172a;

    /* Cores de Status */
    --success: hsl(142, 76%, 36%);
    --warning: hsl(38, 92%, 50%);
    --info: hsl(199, 89%, 48%);
    --destructive: hsl(0, 84%, 60%);

    /* Background e Foreground */
    --background: #ffffff;
    --foreground: #0f172a;

    /* Shared GCF application shell — canonical geometry and interaction tokens. */
    --gcf-shell-sidebar-width: 240px;
    --gcf-shell-sidebar-collapsed-width: 72px;
    --gcf-shell-topbar-height: 64px;
    --gcf-shell-sidebar-bg: linear-gradient(180deg,#0b1220 0%,#0a0f1c 100%);
    --gcf-shell-sidebar-border: #1f2a3d;
    --gcf-shell-sidebar-text: #cbd5e1;
    --gcf-shell-sidebar-muted: #7d8aa3;
    --gcf-shell-sidebar-hover: rgba(255, 255, 255, 0.07);
    --gcf-shell-sidebar-active: linear-gradient(90deg, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0));
    --gcf-shell-sidebar-active-bar: #3b82f6;
    --gcf-shell-sidebar-header-padding: 16px 16px 12px;
    --gcf-shell-sidebar-nav-padding: 12px 8px;
    --gcf-shell-brand-size: 32px;
    --gcf-shell-collapse-size: 30px;
    --gcf-shell-nav-min-height: 38px;
    --gcf-shell-nav-gap: 9px;
    --gcf-shell-nav-padding: 7px 10px;
    --gcf-shell-nav-radius: 6px;
    --gcf-shell-nav-font-size: 0.9375rem;
    --gcf-shell-nav-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    --gcf-shell-topbar-padding: 0 20px 0 16px;

    /* Backward-compatible aliases consumed by existing Core surfaces. */
    --sidebar-background: var(--gcf-shell-sidebar-bg);
    --sidebar-foreground: var(--gcf-shell-sidebar-text);
    --sidebar-primary: #2563eb;
    --sidebar-accent: var(--gcf-shell-sidebar-hover);
    --sidebar-border: var(--gcf-shell-sidebar-border);

    /* Cards e Elementos */
    --card: #ffffff;
    --card-foreground: #0f172a;
    --muted: #f8fafc;
    --muted-foreground: #64748b;
    --border: #e6ebf2;

    /* Raio de Borda */
    --radius: 0.75rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;

    /* Sombras */
    --shadow-elegant: 0 10px 30px -10px hsl(221 83% 53% / 0.2);
    --shadow-card: 0 4px 12px hsl(221 39% 11% / 0.08);

    /* Transições */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Tipografia */
    --font-size: 16px;
}

/* ============================================
   RESET E BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.5;
    font-size: var(--font-size, 16px);
}

/* ============================================
   LAYOUT PRINCIPAL
   ============================================ */
.dashboard-layout {
    display: flex;
    min-height: 100vh;
    background: var(--background);
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.dashboard-main {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    background: var(--background);
}

.dashboard-home-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1.25rem;
}

/* ============================================
   SIDEBAR MODERNA
   ============================================ */
.sidebar {
    width: var(--gcf-shell-sidebar-width);
    background: var(--gcf-shell-sidebar-bg);
    color: var(--sidebar-foreground);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    transition: width 0.22s ease;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--gcf-shell-sidebar-header-padding);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar-logo {
    width: var(--gcf-shell-brand-size);
    height: var(--gcf-shell-brand-size);
    background: var(--sidebar-primary);
    border-radius: var(--radius-md, calc(0.625rem - 2px));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sidebar-primary-foreground);
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

.sidebar-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.sidebar-collapse {
    margin-left: auto;
    width: var(--gcf-shell-collapse-size);
    height: var(--gcf-shell-collapse-size);
    border-radius: var(--radius-md, calc(0.625rem - 2px));
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.72);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sidebar-collapse:hover {
    color: #fff;
    background: var(--gcf-shell-sidebar-hover);
}

/* Navegação */
.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--gcf-shell-sidebar-nav-padding);
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-item {
    min-height: var(--gcf-shell-nav-min-height);
    display: flex;
    align-items: center;
    gap: var(--gcf-shell-nav-gap);
    padding: var(--gcf-shell-nav-padding);
    border-radius: var(--gcf-shell-nav-radius);
    color: var(--sidebar-foreground);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    font-size: var(--gcf-shell-nav-font-size);
    font-family: var(--gcf-shell-nav-font-family);
    font-weight: 400;
    border: 0;
    margin-bottom: 1px;
    position: relative;
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-item:hover {
    background: var(--gcf-shell-sidebar-hover);
    color: #fff;
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-item.active {
    background: var(--gcf-shell-sidebar-active);
    color: #fff;
    font-weight: 500;
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-item.active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--gcf-shell-sidebar-active-bar);
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-label {
    flex: 1;
    white-space: nowrap;
}

/* ============================================
   DIVISOR DE NAVEGAÇÃO
   ============================================ */
.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-divider {
    height: 1px;
    background: color-mix(in srgb, var(--gcf-shell-sidebar-text) 12%, transparent);
    margin: 8px 0;
}

/* ============================================
   MENU EXPANSÍVEL (SUBMENU)
   ============================================ */
.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-group {
    display: flex;
    flex-direction: column;
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-item-expandable {
    cursor: pointer;
    position: relative;
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-item-expandable .nav-arrow {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-item-expandable.expanded .nav-arrow {
    transform: rotate(0deg);
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-submenu {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 12px;
    margin-top: 2px;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-subitem {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border-radius: var(--radius-sm, 0.375rem);
    color: #fff;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    font-size: 0.88rem;
    font-weight: 400;
    opacity: 1;
    min-height: 34px;
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-subitem:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-subitem.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 500;
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-subitem .nav-icon {
    font-size: 1.125rem;
    width: 20px;
}

/* ============================================
   SEÇÕES DE NAVEGAÇÃO (REABILITADAS)
   ============================================ */
.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-section {
    margin-bottom: 1rem;
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-section-title {
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-foreground);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--transition-smooth);
    border-radius: var(--radius-md);
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-section-title:hover {
    background: var(--sidebar-accent);
    color: var(--sidebar-foreground);
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-section-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding-left: 0.5rem;
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-section-toggle {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-section-toggle.expanded {
    transform: rotate(0deg);
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-section-toggle.collapsed {
    transform: rotate(-90deg);
}

/* Sub-itens do menu admin */
.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-sub-item {
    padding-left: 2rem !important;
    font-size: 0.875rem;
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-sub-item .nav-icon {
    width: 18px;
}

/* ============================================
   TOPBAR MODERNA
   ============================================ */
.topbar {
    height: var(--gcf-shell-topbar-height);
    background: var(--card);
    border-bottom: 1px solid var(--border);
    padding: var(--gcf-shell-topbar-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: none;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.topbar-title-box {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.85rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.topbar-left h1 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.topbar-current-org {
    font-size: 0.76rem;
    color: var(--muted-foreground);
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--muted);
}

@media (max-width: 900px) {
    .topbar-title-box {
        padding: 0.38rem 0.62rem;
    }

    .topbar-current-org {
        display: none;
    }
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dashboard-layout.sidebar-collapsed .sidebar {
    width: var(--gcf-shell-sidebar-collapsed-width);
}

.dashboard-layout.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding: 16px 8px 12px;
}

.dashboard-layout.sidebar-collapsed .sidebar-collapse {
    margin-left: 0;
    transform: rotate(180deg);
}

.dashboard-layout.sidebar-collapsed .sidebar-nav {
    padding-left: 6px;
    padding-right: 6px;
}

.dashboard-layout.sidebar-collapsed .sidebar-title,
.dashboard-layout.sidebar-collapsed .nav-label,
.dashboard-layout.sidebar-collapsed .nav-submenu,
.dashboard-layout.sidebar-collapsed .nav-divider,
.dashboard-layout.sidebar-collapsed .nav-section-title,
.dashboard-layout.sidebar-collapsed .nav-section-content {
    display: none;
}

.dashboard-layout.sidebar-collapsed .nav-item {
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
}

/* Search Bar */
.search-bar {
    flex: 1;
    max-width: 400px;
    margin: 0 2rem;
}

.search-bar input {
    width: 100%;
    padding: 0.5rem 1rem;
    background: var(--input-background);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 0.625rem);
    font-size: 0.875rem;
    color: var(--foreground);
    transition: all 0.2s ease;
}

.search-bar input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(3, 2, 19, 0.1);
}

.search-bar input::placeholder {
    color: var(--muted-foreground);
}

/* ============================================
   CARDS MODERNOS
   ============================================ */
.card:not(.gcf-module--civic .card) {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 0.625rem);
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:not(.gcf-module--civic .card):hover {
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Module Card (para os widgets de módulos) */
.module-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 0.625rem);
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.module-card:hover {
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: var(--primary);
}

.module-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.module-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.module-card-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--foreground);
}

.module-card-description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.module-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

/* Metric Card */
.metric-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 0.625rem);
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.metric-card:hover {
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.metric-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.metric-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* Cores dos ícones baseadas no theme */
.metric-icon.primary,
.system-metric-icon.primary,
.module-icon.primary {
    background: hsl(221, 83%, 53%, 0.1);
    color: hsl(221, 83%, 53%);
}

.metric-icon.success,
.system-metric-icon.success,
.module-icon.success {
    background: hsl(142, 76%, 36%, 0.1);
    color: hsl(142, 76%, 36%);
}

.metric-icon.warning,
.system-metric-icon.warning,
.module-icon.warning {
    background: hsl(38, 92%, 50%, 0.1);
    color: hsl(38, 92%, 50%);
}

.metric-icon.danger,
.system-metric-icon.danger,
.module-icon.danger {
    background: hsl(0, 84%, 60%, 0.1);
    color: hsl(0, 84%, 60%);
}

.metric-icon.info,
.system-metric-icon.info,
.module-icon.info {
    background: hsl(199, 89%, 48%, 0.1);
    color: hsl(199, 89%, 48%);
}

.metric-icon.purple,
.system-metric-icon.purple,
.module-icon.purple {
    background: hsl(271, 81%, 56%, 0.1);
    color: hsl(271, 81%, 56%);
}

.metric-icon.cyan,
.system-metric-icon.cyan,
.module-icon.cyan {
    background: hsl(189, 94%, 43%, 0.1);
    color: hsl(189, 94%, 43%);
}

.metric-icon.orange,
.system-metric-icon.orange,
.module-icon.orange {
    background: hsl(24, 94%, 50%, 0.1);
    color: hsl(24, 94%, 50%);
}

/* Progress bar colors */
.system-metric-progress-bar.primary {
    background: hsl(221, 83%, 53%);
}

.system-metric-progress-bar.success {
    background: hsl(142, 76%, 36%);
}

.system-metric-progress-bar.warning {
    background: hsl(38, 92%, 50%);
}

.system-metric-progress-bar.danger {
    background: hsl(0, 84%, 60%);
}

.system-metric-progress-bar.info {
    background: hsl(199, 89%, 48%);
}

.metric-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.metric-title {
    font-size: 0.75rem;
    font-weight: var(--font-weight-normal, 400);
    color: var(--muted-foreground);
    text-transform: none;
    letter-spacing: 0;
}

.metric-value {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.metric-value .value {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1;
}

.metric-value .unit {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* ============================================
   BADGES
   ============================================ */
.badge:not(.gcf-module--civic .badge) {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-lg, 0.625rem);
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium, 500);
    line-height: 1;
}

.badge.success:not(.gcf-module--civic .badge.success) {
    background: oklch(0.696 0.17 162.48 / 0.1);
    color: oklch(0.696 0.17 162.48);
}

.badge.danger:not(.gcf-module--civic .badge.danger) {
    background: oklch(0.627 0.265 303.9 / 0.1);
    color: oklch(0.627 0.265 303.9);
}

.badge.warning:not(.gcf-module--civic .badge.warning) {
    background: oklch(0.769 0.188 70.08 / 0.1);
    color: oklch(0.769 0.188 70.08);
}

.badge.info:not(.gcf-module--civic .badge.info) {
    background: oklch(0.6 0.118 184.704 / 0.1);
    color: oklch(0.6 0.118 184.704);
}

.badge.primary:not(.gcf-module--civic .badge.primary) {
    background: oklch(0.488 0.243 264.376 / 0.1);
    color: oklch(0.488 0.243 264.376);
}

/* ============================================
   GRID DE MÉTRICAS
   ============================================ */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Grid de métricas do sistema (5 colunas) */
.system-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Card de métrica do sistema (mais compacto) */
.system-metric-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 0.625rem);
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.system-metric-card:hover {
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.system-metric-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.system-metric-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.system-metric-info {
    flex: 1;
    min-width: 0;
}

.system-metric-label {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    font-weight: var(--font-weight-normal, 400);
}

.system-metric-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.2;
}

.system-metric-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--muted-foreground);
}

.system-metric-progress {
    width: 100%;
    height: 4px;
    background: var(--muted);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.25rem;
}

.system-metric-progress-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ============================================
   ÍCONES LUCIDE
   ============================================ */
.lucide-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lucide-icon svg {
    display: block;
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-icon .lucide-icon {
    width: 16px;
    height: 16px;
}

/* ============================================
   BOTÕES
   ============================================ */
.btn:not(.gcf-module--civic .btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--radius-md, calc(0.625rem - 2px));
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}


.btn-primary:not(.gcf-module--civic .btn-primary):hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-secondary:not(.gcf-module--civic .btn-secondary) {
    background: var(--secondary);
    color: var(--secondary-foreground);
}

.btn-secondary:not(.gcf-module--civic .btn-secondary):hover {
    opacity: 0.9;
}

/* ============================================
   GRÁFICOS
   ============================================ */
.chart-container {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 0.625rem);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.chart-title {
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium, 500);
    color: var(--foreground);
}

.chart-subtitle {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 1024px) {
    .metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: calc(-1 * var(--gcf-shell-sidebar-width));
        top: 0;
        bottom: 0;
        z-index: 1000;
    }

    .sidebar.open {
        left: 0;
    }

    .dashboard-main {
        padding: 1rem;
    }

    .metrics-grid {
        grid-template-columns: 1fr;
    }

    .search-bar {
        display: none;
    }
}

/* ============================================
   LOADING E ESTADOS
   ============================================ */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--muted-foreground);
}

.module-loading-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.10), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    box-shadow: var(--shadow-card);
}

.module-loading-shell-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.module-loading-shell-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0 0.75rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.10);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.module-loading-shell-title {
    margin: 0.85rem 0 0;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.02;
    color: var(--foreground);
}

.module-loading-shell-subtitle {
    max-width: 42rem;
    margin: 0.55rem 0 0;
    color: var(--muted-foreground);
}

.module-loading-shell-signal {
    display: grid;
    justify-items: center;
    gap: 1rem;
    min-width: 240px;
}

.module-loading-orbit {
    position: relative;
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
}

.module-loading-orbit-ring {
    position: absolute;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, 0.18);
}

.module-loading-orbit-ring-outer {
    inset: 0;
    animation: moduleOrbitSpin 7s linear infinite;
}

.module-loading-orbit-ring-inner {
    inset: 14px;
    border-style: dashed;
    animation: moduleOrbitSpinReverse 4s linear infinite;
}

.module-loading-orbit-core {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    color: #fff;
    box-shadow: 0 18px 30px -22px rgba(37, 99, 235, 0.9);
}

.module-loading-progress {
    width: min(240px, 100%);
}

.module-loading-progress-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
}

.module-loading-progress-track {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 7px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
}

.module-loading-progress-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -35%;
    width: 35%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0), rgba(37, 99, 235, 0.92), rgba(96, 165, 250, 0));
    animation: moduleLoadingSweep 1.4s ease-in-out infinite;
}

.module-loading-shell-grid {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1rem;
}

.module-loading-shell-sidebar,
.module-loading-shell-main {
    min-width: 0;
}

.module-loading-shell-sidebar {
    padding: 1rem;
}

.module-loading-shell-sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.module-loading-shell-lines {
    flex: 1;
}

.module-loading-shell-nav .skeleton-line {
    height: 0.9rem;
    margin-bottom: 0.9rem;
}

.module-loading-shell-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.module-loading-metric-card,
.module-loading-panel-card {
    background: rgba(255, 255, 255, 0.9);
}

.module-loading-shell-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.module-loading-shell-table .skeleton-table-header,
.module-loading-shell-table .skeleton-table-row {
    grid-template-columns: 1.2fr 2fr 1fr 1fr;
}

@keyframes moduleLoadingSweep {
    0% { left: -35%; }
    100% { left: 100%; }
}

@keyframes moduleOrbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes moduleOrbitSpinReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

.error-message {
    background: var(--destructive);
    color: var(--destructive-foreground);
    padding: 1rem;
    border-radius: var(--radius-md, calc(0.625rem - 2px));
    margin-bottom: 1rem;
}

/* ============================================
   DARK MODE
   ============================================ */
.dark .sidebar {
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3);
}

.dark .topbar {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark .card,
.dark .metric-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark .card:hover,
.dark .metric-card:hover {
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

/* ============================================
   LOGIN PAGE (SPA)
   ============================================ */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--primary), var(--primary-glow));
}

.login-box {
    background: var(--card);
    padding: 2.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-elegant);
    width: 100%;
    max-width: 400px;
}

.login-box h1 {
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--foreground);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--foreground);
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 4px);
    font-size: 1rem;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(3, 2, 19, 0.1);
}

.form-label:not(.gcf-module--civic .form-label) {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--foreground);
    font-weight: 500;
    font-size: 0.875rem;
}


.form-label:not(.gcf-module--civic .form-label) .form-hint {
    color: var(--muted-foreground);
    font-weight: 400;
    font-size: 0.75rem;
}

.form-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 4px);
    font-size: 0.875rem;
    transition: var(--transition-smooth);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}


.form-input.error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-error {
    display: block;
    margin-top: 0.25rem;
    color: var(--destructive);
    font-size: 0.75rem;
}

.form-error-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--destructive-bg, #fef2f2);
    border: 1px solid var(--destructive);
    border-radius: calc(var(--radius) - 4px);
    color: var(--destructive);
    font-size: 0.875rem;
    margin-top: 1rem;
}

.form-hint {
    display: block;
    margin-top: 0.25rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.form-checkbox input[type="checkbox"] {
    width: auto;
    cursor: pointer;
}


@media (max-width: 768px) {
    }

.btn-login {
    width: 100%;
    padding: 0.75rem;
    background: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: calc(var(--radius) - 4px);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-login:hover {
    background: var(--primary-glow);
}

.btn-login:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.error-message {
    background: var(--destructive);
    color: white;
    padding: 0.75rem;
    border-radius: calc(var(--radius) - 4px);
    margin-bottom: 1rem;
}

.error-message.show {
    display: block;
}

/* ============================================
   LOGIN PAGE (SPA) — 2.20.0.1 visual refresh
   Scope intentionally isolated under .gcf-login-page.
   ============================================ */
.gcf-login-page {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(460px, 36.2vw);
    gap: clamp(1rem, 2.1vw, 2.25rem);
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(1rem, 2.4vh, 1.5rem) clamp(1rem, 2.1vw, 2.2rem);
    overflow: hidden;
    color: #0a1f47;
    background:
        linear-gradient(90deg, rgba(5, 20, 43, 0.06) 0%, rgba(239, 247, 255, 0.06) 52%, rgba(255, 255, 255, 0.42) 100%),
        url('/images/gcf-login-background-2.53.15.webp') center center / cover no-repeat;
    isolation: isolate;
}

.gcf-login-page::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 42% 26%, rgba(120, 190, 255, 0.16), transparent 31%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(232, 242, 253, 0.12));
}

.gcf-login-hero {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(1rem, 2.2vw, 2.1rem) 0 clamp(0.15rem, 1vh, 0.75rem) clamp(0.25rem, 1.1vw, 1.1rem);
}

.gcf-login-hero-brand {
    width: fit-content;
    max-width: min(620px, 76%);
    color: #f7fbff;
    text-shadow: 0 2px 22px rgba(1, 18, 43, 0.32);
}

.gcf-login-hero-title {
    font-size: clamp(2.15rem, 3.25vw, 3.8rem);
    line-height: 0.98;
    font-weight: 800;
    letter-spacing: 0.115em;
}

.gcf-login-hero-subtitle {
    margin-top: 0.45rem;
    font-size: clamp(1.15rem, 1.75vw, 2rem);
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: 0.19em;
}

.gcf-login-hero-tagline {
    margin: 0.85rem 0 0;
    color: rgba(241, 248, 255, 0.92);
    font-size: clamp(0.93rem, 1.03vw, 1.15rem);
    font-weight: 500;
}

.gcf-login-features {
    align-self: center;
    width: min(760px, 82%);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    padding: clamp(0.85rem, 1.6vw, 1.35rem) clamp(0.8rem, 1.45vw, 1.35rem);
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 19px;
    background: rgba(246, 251, 255, 0.78);
    box-shadow: 0 18px 54px rgba(7, 38, 79, 0.13);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.gcf-login-feature {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.22rem;
    text-align: center;
    color: #072457;
}

.gcf-login-feature-icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.1rem;
    color: #0867ff;
}

.gcf-login-feature strong {
    font-size: clamp(0.78rem, 0.95vw, 0.98rem);
    font-weight: 600;
    white-space: nowrap;
}

.gcf-login-feature > span:last-child {
    color: #667da8;
    font-size: clamp(0.7rem, 0.82vw, 0.86rem);
    white-space: nowrap;
}

.gcf-login-panel-shell {
    min-width: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}

.gcf-login-card {
    width: 100%;
    min-height: calc(100vh - clamp(2rem, 4.8vh, 3rem));
    min-height: calc(100svh - clamp(2rem, 4.8vh, 3rem));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(2.1rem, 4.1vh, 3.1rem) clamp(2rem, 3.7vw, 4rem) clamp(1.25rem, 2.3vh, 1.9rem);
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.955);
    box-shadow: 0 28px 70px rgba(28, 58, 94, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.gcf-login-card-main {
    width: 100%;
    max-width: 470px;
    margin: 0 auto;
}

.gcf-login-lockup {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: clamp(0.2rem, 1.6vh, 1rem) auto clamp(1.55rem, 3.4vh, 2.7rem);
}

.gcf-login-lockup-image {
    display: block;
    width: min(100%, 345px);
    height: auto;
    object-fit: contain;
}

.gcf-login-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.35rem;
    height: 3.25rem;
    color: transparent;
    font-size: 2.5rem;
    line-height: 1;
    font-style: italic;
    font-weight: 900;
    letter-spacing: -0.18em;
    transform: skewX(-7deg);
    background: linear-gradient(135deg, #062d75 10%, #0874ff 58%, #0e4bb5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 4px 6px rgba(0, 74, 188, 0.15));
}

.gcf-login-lockup-copy {
    display: flex;
    flex-direction: column;
    gap: 0.14rem;
}

.gcf-login-lockup-copy strong {
    color: #061b43;
    font-size: clamp(1.24rem, 1.6vw, 1.72rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.17em;
}

.gcf-login-lockup-copy small {
    color: #0968ef;
    font-size: clamp(0.62rem, 0.78vw, 0.78rem);
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.205em;
}

.gcf-login-heading {
    margin-bottom: clamp(1.2rem, 2.6vh, 2rem);
    text-align: center;
}

.gcf-login-heading h1 {
    margin: 0;
    color: #101d38;
    font-size: clamp(1.45rem, 1.68vw, 1.8rem);
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.gcf-login-heading p {
    margin: 0.45rem 0 0;
    color: #6b7c9f;
    font-size: clamp(0.93rem, 1vw, 1.05rem);
}

.gcf-login-tenant {
    display: inline-block;
    max-width: 100%;
    margin-top: 0.48rem;
    overflow: hidden;
    color: #8a98b3;
    font-size: 0.72rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gcf-login-error,
.gcf-login-success {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
    padding: 0.72rem 0.85rem;
    border-radius: 10px;
    font-size: 0.86rem;
}

.gcf-login-error {
    border: 1px solid #fecaca;
    color: #b42318;
    background: #fff1f2;
}

.gcf-login-success {
    border: 1px solid #bbf7d0;
    color: #166534;
    background: #f0fdf4;
}

.gcf-login-form {
    width: 100%;
}

.gcf-login-field {
    margin-bottom: 1rem;
}

.gcf-login-field label {
    display: block;
    margin-bottom: 0.43rem;
    color: #10203e;
    font-size: 0.91rem;
    line-height: 1.2;
    font-weight: 500;
}

.gcf-login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.gcf-login-input-icon {
    position: absolute;
    left: 1rem;
    z-index: 1;
    display: grid;
    place-items: center;
    color: #8191b0;
    pointer-events: none;
}

.gcf-login-input-wrap input {
    width: 100%;
    height: 3.35rem;
    padding: 0 3.1rem 0 3.05rem;
    border: 1px solid #cdd7e7;
    border-radius: 9px;
    outline: none;
    color: #17243d;
    background: rgba(255, 255, 255, 0.74);
    font: inherit;
    font-size: 0.98rem;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.gcf-login-input-wrap input::placeholder {
    color: #8593ad;
    opacity: 1;
}

.gcf-login-input-wrap input:focus {
    border-color: #2b76ef;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(27, 102, 232, 0.12);
}

.gcf-login-input-wrap input:disabled {
    cursor: wait;
    opacity: 0.72;
}

.gcf-login-password-toggle {
    position: absolute;
    right: 0.75rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 7px;
    color: #6b7d9e;
    background: transparent;
    cursor: pointer;
}

.gcf-login-password-toggle:hover,
.gcf-login-password-toggle:focus-visible {
    color: #0c63df;
    background: #eef5ff;
    outline: none;
}

.gcf-login-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.1rem 0 1.35rem;
    color: #233654;
    font-size: 0.84rem;
}

.gcf-login-remember-control {
    display: inline-flex !important;
    align-items: center;
    gap: 0.55rem;
    margin: 0 !important;
    cursor: pointer;
    font-size: 0.84rem !important;
    font-weight: 400 !important;
}

.gcf-login-remember-control .form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}

.gcf-login-trusted-device {
    display: grid;
    gap: 0.35rem;
    margin: -0.2rem 0 1.15rem;
    color: #233654;
}

.gcf-login-trusted-device .gcf-login-field-help {
    margin-left: 1.6rem;
}

.gcf-login-link-action {
    padding: 0;
    border: 0;
    color: #1267e8;
    background: transparent;
    font: inherit;
    font-size: 0.84rem;
    white-space: nowrap;
    cursor: pointer;
}

.gcf-login-link-action:hover:not(:disabled),
.gcf-login-link-action:focus-visible {
    color: #0755bd;
    text-decoration: underline;
    outline: none;
}

.gcf-login-link-action:disabled {
    cursor: wait;
    opacity: 0.65;
}

.gcf-login-submit,
.gcf-login-secondary-action {
    width: 100%;
    min-height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.72rem;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    font: inherit;
    font-size: 0.97rem;
    font-weight: 500;
}

.gcf-login-submit {
    border: 1px solid #0b65e8;
    color: #ffffff;
    background: linear-gradient(180deg, #2377f2 0%, #075ee0 100%);
    box-shadow: 0 9px 24px rgba(0, 91, 222, 0.18);
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.gcf-login-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.025);
    box-shadow: 0 12px 28px rgba(0, 91, 222, 0.24);
}

.gcf-login-submit:focus-visible {
    outline: 3px solid rgba(20, 104, 232, 0.22);
    outline-offset: 2px;
}

.gcf-login-submit:disabled {
    cursor: wait;
    opacity: 0.72;
}

.gcf-login-submit:disabled svg {
    animation: gcf-login-spin 1s linear infinite;
}

.gcf-login-secondary-action {
    margin-top: 0.75rem;
    border: 1px solid #ced9ea;
    color: #263b5d;
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
}

.gcf-login-secondary-action:hover:not(:disabled),
.gcf-login-secondary-action:focus-visible {
    border-color: #9db4d6;
    background: #f5f8fd;
    outline: none;
}

.gcf-login-secondary-action:disabled {
    cursor: wait;
    opacity: 0.65;
}

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

.gcf-login-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.18rem;
    margin-top: clamp(1.6rem, 3.5vh, 2.8rem);
    color: #7385a4;
    text-align: center;
    font-size: 0.78rem;
}

.gcf-login-footer small {
    font-size: 0.72rem;
}

.gcf-login-footer-mark {
    margin-top: 0.65rem;
    color: #a6b1c2;
    font-size: 1.28rem;
    line-height: 1;
    font-style: italic;
    font-weight: 900;
    letter-spacing: -0.18em;
}

@media (max-width: 1180px) {
    .gcf-login-page {
        grid-template-columns: minmax(0, 1fr) minmax(430px, 43vw);
    }

    .gcf-login-features {
        width: 94%;
    }
}

@media (max-width: 920px) {
    .gcf-login-page {
        grid-template-columns: 1fr;
        overflow: auto;
        padding: 1rem;
        background-position: 38% center;
    }

    .gcf-login-hero {
        display: none;
    }

    .gcf-login-panel-shell {
        min-height: calc(100svh - 2rem);
        align-items: center;
        justify-content: center;
    }

    .gcf-login-card {
        width: min(100%, 540px);
        min-height: auto;
        padding: 2.2rem clamp(1.35rem, 6vw, 2.5rem) 1.4rem;
        background: rgba(255, 255, 255, 0.97);
    }
}

@media (max-width: 520px) {
    .gcf-login-page {
        padding: 0;
        background-position: 28% center;
    }

    .gcf-login-panel-shell {
        min-height: 100svh;
    }

    .gcf-login-card {
        width: 100%;
        min-height: 100svh;
        justify-content: center;
        border: 0;
        border-radius: 0;
        padding: 1.55rem 1.2rem 1.1rem;
        box-shadow: none;
    }

    .gcf-login-lockup {
        margin-bottom: 1.8rem;
    }

    .gcf-login-lockup-copy strong {
        font-size: 1.2rem;
    }

    .gcf-login-meta-row {
        font-size: 0.78rem;
    }

    .gcf-login-footer {
        margin-top: 2rem;
    }
}

@media (max-height: 760px) and (min-width: 921px) {
    .gcf-login-card {
        overflow-y: auto;
        padding-top: 1.4rem;
        padding-bottom: 1rem;
    }

    .gcf-login-lockup {
        margin-bottom: 1.15rem;
    }

    .gcf-login-heading {
        margin-bottom: 1rem;
    }

    .gcf-login-field {
        margin-bottom: 0.72rem;
    }

    .gcf-login-footer {
        margin-top: 1.2rem;
    }
}

/* ============================================
   TOPBAR USER (SPA)
   ============================================ */
.topbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.topbar-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--foreground);
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-name {
    font-size: 0.875rem;
    color: var(--foreground);
}

.btn-logout {
    padding: 0.5rem 1rem;
    background: var(--destructive);
    color: white;
    border: none;
    border-radius: calc(var(--radius) - 4px);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-logout:hover {
    opacity: 0.9;
}

/* ============================================
   NAV LINK (React Router)
   ============================================ */
.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md, calc(0.625rem - 2px));
    color: var(--sidebar-foreground);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.9375rem;
    font-weight: 400;
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-link:hover {
    background: var(--sidebar-accent);
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-link.active {
    background: var(--sidebar-primary);
    color: var(--sidebar-primary-foreground);
    font-weight: 500;
}

/* ============================================
   DASHBOARD PAGE
   ============================================ */
.dashboard-page {
    padding: 2rem;
}

.dashboard-page h1 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 1rem;
}

.dashboard-page p {
    font-size: 1rem;
    color: var(--muted-foreground);
}

/* ============================================
   SETTINGS PAGE
   ============================================ */
.settings-page {
    padding: 2rem;
}

.settings-page-refined {
    padding: 0.85rem 0.95rem 1.1rem;
}

.settings-page-refined .settings-shell {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    padding: 1.05rem;
}

.settings-page-refined .settings-shell-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.9rem;
    padding-bottom: 0.82rem;
    border-bottom: 1px solid var(--border);
}

.settings-page-refined .settings-shell-title {
    margin: 0;
    font-size: clamp(1.52rem, 1.25rem + 0.85vw, 2.2rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--foreground);
    font-weight: 800;
}

.settings-page-refined .settings-shell-subtitle {
    margin: 0.4rem 0 0;
    color: var(--muted-foreground);
    font-size: 0.82rem;
    max-width: 70ch;
}

.settings-page-refined .settings-shell-quick {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.settings-page-refined .settings-shell-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.62rem;
    padding: 0 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #f8fafc, #f2f5fa);
    color: var(--muted-foreground);
    font-size: 0.72rem;
    font-weight: 700;
}

.settings-page-refined .settings-shell-body {
    margin-top: 0.86rem;
    display: grid;
    gap: 0.72rem;
}

.settings-page-refined .settings-shell-body .settings-card,
.settings-page-refined .settings-shell-body .settings-form,
.settings-page-refined .settings-shell-body .kanban-admin-settings-form {
    margin-top: 0;
}

.settings-page-refined .settings-home-card {
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #f9fbff);
}

.settings-page-refined .settings-home-actions {
    justify-content: flex-start;
    margin-top: 0.25rem;
}

.settings-page-refined .kanban-admin-settings-form {
    max-width: none;
}

.settings-page h1 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 1rem;
}

.settings-page p {
    font-size: 1rem;
    color: var(--muted-foreground);
}

.settings-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
    margin-top: 1rem;
}

.settings-subtitle {
    margin-bottom: 1rem;
    color: var(--muted-foreground);
}

.settings-form {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
    margin-top: 1rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.settings-form-compact {
    padding: 1rem 1.1rem;
    border-radius: calc(var(--radius) - 0.1rem);
}

.settings-grid-compact {
    gap: 0.8rem;
}

.settings-form-compact .form-group {
    gap: 0.35rem;
}

.settings-form-compact .form-label {
    font-size: 0.8rem;
    font-weight: 600;
}

.settings-form-compact .form-input {
    height: 2rem;
    padding: 0.25rem 0.55rem;
    font-size: 0.8rem;
}

.settings-form-compact .btn {
    height: 2rem;
    padding: 0 0.7rem;
    font-size: 0.78rem;
}

.settings-form-compact .form-hint {
    font-size: 0.72rem;
}

.form-group-span-2 {
    grid-column: span 2;
}

.settings-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.settings-toggle-checkbox {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary);
}

.settings-enforced-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 0.8rem;
    padding: 0.3rem 0;
}

.settings-inline-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.settings-inline-row .form-input {
    flex: 1 1 auto;
    min-width: 110px;
}

.kanban-admin-settings-form {
    max-width: 1120px;
}

.kanban-admin-settings-form .settings-subtitle {
    margin-bottom: 0.75rem;
    font-size: 0.78rem;
    color: var(--muted-foreground);
    line-height: 1.35;
}

.kanban-admin-settings-form > .settings-grid {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem;
    margin-top: 0.7rem;
}

.kanban-admin-settings-form .kanban-admin-section {
    margin-top: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.65rem;
    background: linear-gradient(180deg, var(--card) 0%, var(--secondary) 100%);
}

.kanban-admin-settings-form .kanban-admin-section.is-primary {
    border-color: hsl(221 83% 53% / 0.2);
}

.kanban-admin-settings-form .kanban-admin-section.is-reset {
    border-color: hsl(0 0% 60% / 0.2);
}

.kanban-admin-settings-form .kanban-admin-section-head {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 0 0 0.55rem 0 !important;
}

.kanban-admin-settings-form .kanban-admin-section-head h3 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--foreground);
}

.kanban-admin-settings-form .kanban-admin-section-head p {
    margin: 0.22rem 0 0;
    font-size: 0.74rem;
    color: var(--muted-foreground);
    line-height: 1.35;
}

.kanban-admin-settings-form .settings-grid .form-group {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.52rem 0.58rem;
    transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.kanban-admin-settings-form .settings-grid .form-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px hsla(221, 83%, 53%, 0.12);
}

.kanban-admin-settings-form .settings-grid .form-group .form-label {
    font-size: 0.76rem;
    color: var(--muted-foreground);
}

.kanban-admin-settings-form .settings-grid .form-group .form-input {
    margin-top: 0.2rem;
    box-shadow: none;
    border-width: 1px;
    border-radius: 8px;
    background: var(--background);
}

.kanban-admin-settings-form .settings-enforced-grid {
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 0.55rem;
    background: var(--card);
}

.kanban-admin-settings-form .settings-actions {
    margin-top: 0.8rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border);
}

.kanban-admin-settings-form .kanban-admin-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.kanban-admin-settings-form .settings-actions .btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
}

.kanban-admin-settings-form .settings-grid .form-group .btn {
    min-height: 2rem;
    border-radius: 10px;
}

.kanban-admin-settings-form .settings-grid .form-group .form-hint {
    font-size: 0.7rem;
    line-height: 1.35;
}

.kanban-admin-settings-form .settings-toggle-label {
    font-size: 0.76rem;
    font-weight: 600;
}

.kanban-admin-settings-form .settings-actions .btn {
    min-height: 2rem;
    border-radius: 10px;
    padding: 0.45rem 0.8rem;
}

.kanban-admin-settings-form .settings-inline-row .form-input {
    min-height: 2rem;
}

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

    .form-group-span-2 {
        grid-column: span 1;
    }

    .settings-enforced-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .settings-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .settings-page-refined {
        padding: 0.6rem;
    }

    .settings-page-refined .settings-shell {
        border-radius: 14px;
        padding: 0.8rem;
    }

    .settings-page-refined .settings-shell-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================
   ADMIN INTERFACE COMPONENTS
   ============================================ */

/* Modal Component */
.ou-management .modal-overlay,
.gcf-legacy-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.ou-management .modal-overlay > .modal-content,
.ou-management .modal-overlay > .modal-container,
.gcf-legacy-modal-backdrop > .modal-content,
.gcf-legacy-modal-backdrop > .modal-container {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-elegant);
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideIn 0.2s ease-out;
    width: 90%;
    max-width: 600px;
}

.ou-management .modal-overlay > .modal-small,
.gcf-legacy-modal-backdrop > .modal-small { width: 90%; max-width: 400px; }
.ou-management .modal-overlay > .modal-medium,
.gcf-legacy-modal-backdrop > .modal-medium { width: 90%; max-width: 600px; }
.ou-management .modal-overlay > .modal-large,
.gcf-legacy-modal-backdrop > .modal-large { width: 90%; max-width: 800px; }

.ou-management .modal-overlay .modal-header,
.gcf-legacy-modal-backdrop .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.ou-management .modal-overlay .modal-header h2,
.gcf-legacy-modal-backdrop .modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ou-management .modal-overlay .modal-title,
.gcf-legacy-modal-backdrop .modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
}

.ou-management .modal-overlay .modal-close,
.gcf-legacy-modal-backdrop .modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--muted-foreground);
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    transition: var(--transition-smooth);
}

.ou-management .modal-overlay .modal-close:hover,
.gcf-legacy-modal-backdrop .modal-close:hover {
    background: var(--muted);
    color: var(--foreground);
}


.ou-management .modal-overlay .modal-footer,
.gcf-legacy-modal-backdrop .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--muted);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Module Grid (for GroupModal) */
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--muted);
}

.module-checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: var(--transition-smooth);
}

.module-checkbox-item:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px hsl(221 83% 53% / 0.1);
}

.module-checkbox-item input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
}

.module-checkbox-item input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.module-checkbox-label {
    flex: 1;
    cursor: pointer;
    user-select: none;
}

.module-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.module-info strong {
    color: var(--foreground);
    font-size: 0.9375rem;
}

.module-info small {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.loading-text {
    color: var(--muted-foreground);
    font-size: 0.875rem;
    font-style: italic;
}

/* PWA update: scoped notification, independent of Bootstrap utilities. */
#gcf-pwa-update-notice {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1105;
    box-sizing: border-box;
    width: min(390px, calc(100vw - 32px));
    padding: 15px 16px;
    border: 1px solid #cad9ee;
    border-radius: 9px;
    background: #fff;
    color: #202d40;
    box-shadow: 0 10px 32px rgba(15, 31, 56, .18);
    font-size: 13px;
    line-height: 1.45;
}
#gcf-pwa-update-notice .gcf-pwa-update-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
#gcf-pwa-update-notice .gcf-pwa-update-title { font-size: 14px; font-weight: 650; }
#gcf-pwa-update-notice .gcf-pwa-update-description {
    margin: 8px 0 14px;
    color: #53657b;
}
#gcf-pwa-update-notice .gcf-pwa-update-close {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid #d5deea;
    border-radius: 6px;
    background: #fff;
    color: #53657b;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
}
#gcf-pwa-update-notice .gcf-pwa-update-close:hover { background: #f3f6fa; }
#gcf-pwa-update-notice .gcf-pwa-update-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
#gcf-pwa-update-notice .gcf-pwa-update-button {
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid #d5deea;
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
#gcf-pwa-update-notice .gcf-pwa-update-secondary { background: #fff; color: #33445c; }
#gcf-pwa-update-notice .gcf-pwa-update-primary { background: #206bc4; border-color: #206bc4; color: #fff; }
#gcf-pwa-update-notice .gcf-pwa-update-button:disabled { cursor: wait; opacity: .65; }
#gcf-pwa-update-notice button:focus-visible { outline: 2px solid #206bc4; outline-offset: 2px; }
@media (max-width: 400px) {
    #gcf-pwa-update-notice { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
    #gcf-pwa-update-notice .gcf-pwa-update-actions > button { flex: 1 1 auto; }
}

/* Toast Component */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 400px;
}

.toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    animation: toastSlideIn 0.3s ease-out;
    transition: var(--transition-smooth);
}

.toast-success {
    background: var(--success);
    color: white;
}

.toast-error {
    background: var(--destructive);
    color: white;
}

.toast-warning {
    background: var(--warning);
    color: white;
}

.toast-info {
    background: var(--info);
    color: white;
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toast-icon {
    font-size: 1.25rem;
}

.toast-message {
    font-weight: 500;
}

.toast-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    opacity: 0.8;
    transition: opacity 0.2s;
}

.toast-close:hover {
    opacity: 1;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Tabs Component */
.tabs {
    display: flex;
    flex-direction: column;
}

.tabs-list {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--muted);
    border-radius: var(--radius) var(--radius) 0 0;
}

.tabs-default .tab-button {
    background: none;
    border: none;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--muted-foreground);
    transition: var(--transition-smooth);
    border-bottom: 2px solid transparent;
}

.tabs-default .tab-button:hover {
    color: var(--foreground);
    background: var(--background);
}

.tabs-default .tab-button.active {
    color: var(--primary);
    background: var(--background);
    border-bottom-color: var(--primary);
}

.tabs-pills .tab-button {
    background: none;
    border: none;
    padding: 0.5rem 1rem;
    margin: 0.25rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--muted-foreground);
    border-radius: var(--radius);
    transition: var(--transition-smooth);
}

.tabs-pills .tab-button:hover {
    background: var(--muted);
    color: var(--foreground);
}

.tabs-pills .tab-button.active {
    background: var(--primary);
    color: var(--primary-foreground);
}

.tab-content {
    padding: 1.5rem;
    background: var(--background);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* ConfirmDialog Component */
.confirm-dialog-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.confirm-dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--muted);
}

.confirm-icon {
    font-size: 1.5rem;
}

.confirm-icon-danger {
    color: var(--destructive);
}

.confirm-icon-warning {
    color: var(--warning);
}

.confirm-icon-info {
    color: var(--info);
}

.confirm-dialog-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
}

.confirm-dialog-message {
    color: var(--muted-foreground);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.confirm-dialog-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* SkeletonLoader Component */
.skeleton-line,
.skeleton-circle {
    background: linear-gradient(90deg, var(--muted) 25%, var(--border) 50%, var(--muted) 75%);
    background-size: 200% 100%;
    animation: skeletonPulse 1.5s infinite;
    border-radius: var(--radius-sm);
}

.skeleton-line {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-line-short { width: 30%; }
.skeleton-line-medium { width: 60%; }
.skeleton-line-long { width: 90%; }

.skeleton-circle {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

.skeleton-table {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.skeleton-table-header,
.skeleton-table-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
}

.skeleton-table-header {
    background: var(--muted);
    border-bottom: 1px solid var(--border);
}

.skeleton-table-row {
    border-bottom: 1px solid var(--border);
}

.skeleton-table-row:last-child {
    border-bottom: none;
}

.skeleton-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.skeleton-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.skeleton-card-title {
    flex: 1;
}

.skeleton-card-content .skeleton-line {
    margin-bottom: 0.75rem;
}

.skeleton-lines .skeleton-line:last-child {
    margin-bottom: 0;
}

@keyframes skeletonPulse {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 1s linear infinite;
}

/* SearchBar Component */
.search-bar {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    transition: var(--transition-smooth);
}

.search-bar:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px hsl(221 83% 53% / 0.1);
}

.search-icon {
    color: var(--muted-foreground);
    margin-right: 0.5rem;
    font-size: 0.875rem;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    color: var(--foreground);
    font-size: 0.875rem;
}

.search-input::placeholder {
    color: var(--muted-foreground);
}

.search-clear {
    background: none;
    border: none;
    color: var(--muted-foreground);
    cursor: pointer;
    padding: 0.25rem;
    margin-left: 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: var(--transition-smooth);
}

.search-clear:hover {
    background: var(--muted);
    color: var(--foreground);
}

/* Button Variants for Components */
.btn-destructive {
    background: var(--destructive);
    color: white;
    border: 1px solid var(--destructive);
}

.btn-destructive:hover {
    background: hsl(0, 84%, 55%);
    border-color: hsl(0, 84%, 55%);
}

.btn-warning {
    background: var(--warning);
    color: white;
    border: 1px solid var(--warning);
}

.btn-warning:hover {
    background: hsl(38, 92%, 45%);
    border-color: hsl(38, 92%, 45%);
}

.btn-info {
    background: var(--info);
    color: white;
    border: 1px solid var(--info);
}

.btn-info:hover {
    background: hsl(199, 89%, 43%);
    border-color: hsl(199, 89%, 43%);
}

/* Responsive Design for Components */
@media (max-width: 768px) {
    .ou-management .modal-overlay > .modal-content,
    .gcf-legacy-modal-backdrop > .modal-content {
        width: 95%;
        margin: 1rem;
    }

    .toast-container {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }

    .tabs-list {
        flex-wrap: wrap;
    }

    .confirm-dialog-actions {
        flex-direction: column;
    }

    .skeleton-table-header,
    .skeleton-table-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* ============================================
   ADMIN INTERFACE STYLES
   ============================================ */

/* Admin Page Layout */
.admin-page {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.page-header h1 {
    margin: 0;
    color: var(--foreground);
    font-size: 1.875rem;
    font-weight: 600;
}

/* Filters Section */
.filters-section {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 200px;
}

.filter-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
}

/* Form Styles */
.form-group {
    margin-bottom: 1rem;
}

.form-label:not(.gcf-module--civic .form-label) {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
}

.form-input,
.form-select:not(.gcf-module--civic .form-select) {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    background: var(--background);
    color: var(--foreground);
    transition: var(--transition-smooth);
}

.form-input:focus,
.form-select:not(.gcf-module--civic .form-select):focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px hsl(221 83% 53% / 0.1);
}

.form-input.error,
.form-select.error:not(.gcf-module--civic .form-select.error) {
    border-color: var(--destructive);
}

.error-text {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--destructive);
}

.required {
    color: var(--destructive);
}

.optional-text {
    color: var(--muted-foreground);
    font-weight: normal;
}

/* Checkbox Styles */
.checkbox-group {
    margin: 1rem 0;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--muted);
    transition: var(--transition-smooth);
}

.checkbox-label:hover {
    background: var(--secondary);
}

.checkbox-label input[type="checkbox"] {
    margin: 0;
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary);
}

.checkbox-text {
    flex: 1;
}

.checkbox-text strong {
    display: block;
    color: var(--foreground);
}

.checkbox-text small {
    color: var(--muted-foreground);
}

/* Form Actions */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Table Styles */
.table-container {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
}

.users-table th,
.users-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.users-table th {
    background: var(--muted);
    font-weight: 600;
    color: var(--foreground);
    font-size: 0.875rem;
}

.users-table tbody tr:hover {
    background: var(--secondary);
}

.user-name-link {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-weight: 500;
    text-decoration: underline;
    padding: 0;
}

.user-name-link:hover {
    color: var(--primary-glow);
}

/* Badge Styles */
.badge:not(.gcf-module--civic .badge) {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: var(--transition-smooth);
    background: var(--muted);
    color: var(--muted-foreground);
}

.badge.success:not(.gcf-module--civic .badge.success) {
    background: var(--success);
    color: white;
}

.badge.danger:not(.gcf-module--civic .badge.danger) {
    background: var(--destructive);
    color: white;
}

.badge:not(.gcf-module--civic .badge):hover {
    opacity: 0.8;
}

/* Action Buttons */

.btn-sm:not(.gcf-module--civic .btn-sm) {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

/* Pagination Styles */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 1rem;
}

.page-numbers {
    display: flex;
    gap: 0.25rem;
}

.page-info {
    margin-left: 1rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Empty State */

.empty-state p {
    margin: 0.5rem 0;
}

/* Error Message */
.error-message {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: hsl(0 84% 60% / 0.1);
    border: 1px solid var(--destructive);
    border-radius: var(--radius-sm);
    color: var(--destructive);
    font-size: 0.875rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .admin-page {
        padding: 1rem;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .filters-section {
        flex-direction: column;
    }

    .filter-group {
        min-width: auto;
    }

    .users-table {
        font-size: 0.75rem;
    }

    .users-table th,
    .users-table td {
        padding: 0.5rem;
    }

    .action-buttons {
        flex-direction: column;
    }

    .pagination {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .page-info {
        margin-left: 0;
        margin-top: 0.5rem;
        width: 100%;
        text-align: center;
    }

    .form-actions {
        flex-direction: column-reverse;
    }

    .form-actions .btn {
        width: 100%;
    }
}
/* ============================================
   ADMIN USER DETAIL PAGE STYLES
   ============================================ */

/* Breadcrumb Navigation */
.breadcrumb {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.breadcrumb-link {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font-size: inherit;
}



.breadcrumb-current {
    font-weight: 500;
    color: var(--foreground);
}

/* User Detail Page Header */
.admin-user-detail-page .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.user-header-info h1 {
    margin: 0 0 0.5rem 0;
    color: var(--foreground);
    font-size: 1.875rem;
    font-weight: 600;
}

.user-header-info p {
    margin: 0 0 0.75rem 0;
    color: var(--muted-foreground);
    font-size: 1rem;
}

.user-badges {
    display: flex;
    gap: 0.5rem;
}

.header-actions {
    display: flex;
    gap: 0.75rem;
}

/* Tab Content Styles */
.tab-content-info,
.tab-content-groups,
.tab-content-permissions,
.tab-content-modules {
    padding: 1.5rem 0;
}

/* Info Tab */
.user-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.user-info-header h3 {
    margin: 0;
    color: var(--foreground);
    font-size: 1.25rem;
    font-weight: 600;
}

.user-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.info-item label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-item span {
    font-size: 0.875rem;
    color: var(--foreground);
    font-weight: 500;
}

/* Groups Tab */
.groups-header,
.permissions-header,
.modules-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.groups-header h3,
.permissions-header h3,
.modules-header h3 {
    margin: 0;
    color: var(--foreground);
    font-size: 1.25rem;
    font-weight: 600;
}

.count-badge {
    background: var(--muted);
    color: var(--muted-foreground);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.groups-list,
.permissions-list,
.modules-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.group-item,
.permission-item,
.module-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: var(--transition-smooth);
}

.group-item:hover,
.permission-item:hover,
.module-item:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px hsl(221 83% 53% / 0.1);
}

.group-info,
.permission-info,
.module-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.group-info strong,
.permission-info strong,
.module-info strong {
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 600;
}

.group-info p,
.module-info p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: 1.4;
}

.permission-info {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.available-groups {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.available-groups h4 {
    margin: 0 0 1rem 0;
    color: var(--foreground);
    font-size: 1rem;
    font-weight: 600;
}

/* Toggle Switch */






.toggle-switch:hover .toggle-slider {
    box-shadow: 0 0 0 2px hsl(221 83% 53% / 0.2);
}

/* Responsive Design for Detail Page */
@media (max-width: 768px) {
    .admin-user-detail-page .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .header-actions {
        width: 100%;
        justify-content: stretch;
    }

    
    .user-info-grid {
        grid-template-columns: 1fr;
    }

    .group-item,
    .permission-item,
    .module-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .group-info,
    .permission-info,
    .module-info {
        width: 100%;
    }

    .permission-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .groups-header,
    .permissions-header,
    .modules-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
/* ============================================
   ADMIN GROUPS PAGE STYLES
   ============================================ */

/* Groups Table */
.groups-table {
    width: 100%;
    border-collapse: collapse;
}

.groups-table th,
.groups-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.groups-table th {
    background: var(--muted);
    font-weight: 600;
    color: var(--foreground);
    font-size: 0.875rem;
}

.groups-table tbody tr:hover {
    background: var(--secondary);
}

.group-name-link {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-weight: 500;
    text-decoration: underline;
    padding: 0;
}

.group-name-link:hover {
    color: var(--primary-glow);
}

.member-count {
    color: var(--muted-foreground);
    font-size: 0.875rem;
}


.text-muted {
    color: var(--muted-foreground);
    font-style: italic;
}

/* Badge Variants */
.badge.primary:not(.gcf-module--civic .badge.primary) {
    background: var(--primary);
    color: var(--primary-foreground);
}

/* Textarea Styles */
.form-input[rows] {
    resize: vertical;
    min-height: 4rem;
    font-family: inherit;
    line-height: 1.5;
}

/* Responsive Design for Groups */
@media (max-width: 768px) {
    .groups-table {
        font-size: 0.75rem;
    }

    .groups-table th,
    .groups-table td {
        padding: 0.5rem;
    }

    }

/* ============================================
   DEPARTMENT MANAGEMENT STYLES
   ============================================ */

/* Department Page Layout */
.admin-departments-page {
    padding: 1.5rem;
}

.admin-departments-page .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.admin-departments-page .page-header h1 {
    margin: 0;
    color: var(--foreground);
    font-size: 1.875rem;
    font-weight: 600;
}

/* Department Table */
.departments-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.departments-table th,
.departments-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.departments-table th {
    background: var(--muted);
    font-weight: 600;
    color: var(--foreground);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.departments-table tbody tr:hover {
    background: var(--muted);
}

.departments-table .manager-name {
    color: var(--primary);
    font-weight: 500;
}

.departments-table .text-muted {
    color: var(--muted-foreground);
    font-style: italic;
}

.departments-table .member-count {
    color: var(--info);
    font-weight: 500;
}

.departments-table .department-description {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Department Action Buttons */
.departments-table .action-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.departments-table .action-buttons .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    min-width: auto;
}

/* Department Modals */
.members-modal-content {
    max-height: 70vh;
    overflow-y: auto;
}

.members-search {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.members-info {
    margin-bottom: 1rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.members-table-container {
    margin-bottom: 1.5rem;
}

.members-table {
    width: 100%;
    border-collapse: collapse;
}

.members-table th,
.members-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.members-table th {
    background: var(--muted);
    font-weight: 600;
    font-size: 0.875rem;
}

.members-table .member-avatar {
    font-size: 1.25rem;
    text-align: center;
}

.members-table .member-info strong {
    color: var(--foreground);
}

.members-table .member-info small {
    color: var(--muted-foreground);
}

/* Role and Status Badges */
.role-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.role-badge.admin {
    background: var(--primary);
    color: var(--primary-foreground);
}

.role-badge.user {
    background: var(--muted);
    color: var(--muted-foreground);
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.status-badge.active {
    background: var(--success);
    color: white;
}

.status-badge.inactive {
    background: var(--muted);
    color: var(--muted-foreground);
}

.manager-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--warning);
    color: white;
}

/* Set Manager Modal */
.set-manager-modal-content .current-manager-info {
    padding: 1rem;
    background: var(--muted);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.set-manager-modal-content .current-manager-info p {
    margin: 0;
    color: var(--foreground);
}

.set-manager-modal-content .form-help {
    display: block;
    margin-top: 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

/* Loading and Error States */
.loading-state,
.error-state {
    padding: 2rem;
    text-align: center;
}

.loading-state p,
.error-state p {
    margin-bottom: 1rem;
    color: var(--muted-foreground);
}

.error-state .error-message {
    color: var(--destructive);
    font-weight: 500;
}

/* Responsive Design for Department Tables */
@media (max-width: 768px) {
    .departments-table,
    .members-table {
        font-size: 0.875rem;
    }

    .departments-table .department-description {
        max-width: 150px;
    }

    .departments-table .action-buttons {
        flex-direction: column;
        gap: 0.25rem;
    }

    .departments-table .action-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .members-modal-content {
        max-height: 60vh;
    }
}

@media (max-width: 480px) {
    .admin-departments-page {
        padding: 1rem;
    }

    .admin-departments-page .page-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .admin-departments-page .page-header h1 {
        font-size: 1.5rem;
    }
}
/* ============================================
   ADMIN DETAIL PAGES STYLES
   ============================================ */

/* User and Group Detail Pages */
.admin-user-detail-page,
.admin-group-detail-page {
    padding: 1.5rem;
}

/* Breadcrumb Navigation */
.breadcrumb {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.breadcrumb-link {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    text-decoration: underline;
    font-size: inherit;
}

.breadcrumb-link:hover {
    color: var(--primary-glow);
}

.breadcrumb-separator {
    margin: 0 0.5rem;
    color: var(--muted-foreground);
}

.breadcrumb-current {
    color: var(--foreground);
    font-weight: 500;
}

/* Detail Page Header */
.admin-user-detail-page .page-header,
.admin-group-detail-page .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.user-header-info,
.group-header-info {
    flex: 1;
}

.user-header-info h1,
.group-header-info h1 {
    margin: 0 0 0.5rem 0;
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--foreground);
}

.user-header-info p,
.group-header-info p {
    margin: 0 0 1rem 0;
    color: var(--muted-foreground);
    font-size: 1rem;
}

.user-badges,
.group-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.header-actions {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

/* Tab Content Styles */
.tab-content-info,
.tab-content-groups,
.tab-content-members,
.tab-content-permissions,
.tab-content-modules {
    min-height: 400px;
}

/* Info Tab */
.user-info-header,
.group-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.user-info-header h3,
.group-info-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
}

.user-info-grid,
.group-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-item label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.info-item span {
    font-size: 1rem;
    color: var(--foreground);
    font-weight: 500;
}

/* Groups/Members Tab */
.groups-header,
.members-header,
.permissions-header,
.modules-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.groups-header h3,
.members-header h3,
.permissions-header h3,
.modules-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
}

.count-badge {
    background: var(--muted);
    color: var(--muted-foreground);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
}

.groups-list,
.members-list,
.users-list,
.permissions-list,
.modules-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.group-item,
.member-item,
.user-item,
.permission-item,
.module-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: var(--transition-smooth);
}

.group-item:hover,
.member-item:hover,
.user-item:hover,
.permission-item:hover,
.module-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
}

.group-info,
.member-info,
.user-info,
.permission-info,
.module-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.member-avatar,
.user-avatar {
    font-size: 1.5rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--muted);
    border-radius: 50%;
}

.member-details,
.user-details {
    flex: 1;
    min-width: 0;
}

.member-details strong,
.user-details strong {
    display: block;
    color: var(--foreground);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.member-details p,
.user-details p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.member-details small,
.user-details small {
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

.member-badges,
.user-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* Available Groups/Users Section */
.available-groups,
.available-users {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.available-groups h4,
.available-users h4 {
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
}

/* Permission Items */
.permission-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.permission-info strong {
    color: var(--foreground);
    font-weight: 600;
}

.permission-info .badge {
    margin-right: 0.5rem;
}

/* Module Items */
.module-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.module-info strong {
    color: var(--foreground);
    font-weight: 600;
}

.module-info p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 3rem;
    height: 1.5rem;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--muted);
    border-radius: 1.5rem;
    transition: var(--transition-smooth);
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 1.125rem;
    width: 1.125rem;
    left: 0.1875rem;
    bottom: 0.1875rem;
    background: white;
    border-radius: 50%;
    transition: var(--transition-smooth);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--primary);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(1.5rem);
}

.toggle-switch:hover .toggle-slider {
    box-shadow: 0 0 0 2px hsl(221 83% 53% / 0.1);
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted-foreground);
}

.empty-state p {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
}

.empty-state p:first-child {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--foreground);
}

/* Responsive Design for Detail Pages */
@media (max-width: 768px) {
    .admin-user-detail-page,
    .admin-group-detail-page {
        padding: 1rem;
    }

    .admin-user-detail-page .page-header,
    .admin-group-detail-page .page-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .header-actions {
        justify-content: stretch;
    }

    .header-actions .btn {
        flex: 1;
    }

    .user-info-grid,
    .group-info-grid {
        grid-template-columns: 1fr;
    }

    .group-item,
    .member-item,
    .user-item,
    .permission-item,
    .module-item {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .member-info,
    .user-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .member-badges,
    .user-badges {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .breadcrumb {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .user-header-info h1,
    .group-header-info h1 {
        font-size: 1.5rem;
    }

    .groups-header,
    .members-header,
    .permissions-header,
    .modules-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}


/* ============================================
   ADMIN INTERFACE - ADDITIONAL STYLES FROM TEMPLATES
   Added: 2026-01-17 - Task 5.1
   ============================================ */

/* Stats Grid (from gerenciar_usuarios_completo.html) */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--bg-card, var(--card));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

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

.stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.stat-card-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.stat-card-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.stat-card-icon.success {
    background: var(--success-bg, hsl(142, 76%, 36%, 0.1));
    color: var(--success-text, var(--success));
}

.stat-card-icon.info {
    background: var(--info-bg, hsl(199, 89%, 48%, 0.1));
    color: var(--info-text, var(--info));
}

.stat-card-icon.warning {
    background: var(--warning-bg, hsl(38, 92%, 50%, 0.1));
    color: var(--warning-text, var(--warning));
}

.stat-card-icon.danger {
    background: var(--danger-bg, hsl(0, 84%, 60%, 0.1));
    color: var(--danger-text, var(--destructive));
}

.stat-card-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main, var(--foreground));
    line-height: 1;
}

/* Search and Filter Bar */
.search-filter-bar {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
    min-width: 300px;
}

.search-input-wrapper input {
    width: 100%;
    padding: 0.625rem 0.875rem 0.625rem 2.5rem;
    background: var(--bg-card, var(--card));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--text-main, var(--foreground));
    transition: all 0.2s;
}


.search-input-wrapper input::placeholder {
    color: var(--text-muted, var(--muted-foreground));
}

.search-input-wrapper .search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, var(--muted-foreground));
    pointer-events: none;
    width: 16px;
    height: 16px;
}

.filter-select {
    padding: 0.625rem 0.875rem;
    background: var(--bg-card, var(--card));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--text-main, var(--foreground));
    cursor: pointer;
    transition: all 0.2s;
    min-width: 150px;
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Data Table Styles */
.table-wrapper {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-card, var(--card));
}


.data-table thead {
    background: var(--bg-hover, var(--muted));
}

.data-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 1px solid var(--border);
}

.data-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text-main, var(--foreground));
}


.data-table tbody tr:hover {
    background: var(--bg-hover, var(--muted));
}

/* User Cell Component */
.user-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-cell-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.user-cell-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-cell-name {
    color: var(--text-main, var(--foreground));
    font-weight: 500;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-cell-email {
    color: var(--text-muted, var(--muted-foreground));
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Action Buttons Cell */
.action-buttons-cell {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.icon-btn {
    background: none;
    border: none;
    color: var(--text-muted, var(--muted-foreground));
    cursor: pointer;
    padding: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--radius) - 2px);
    transition: all 0.2s;
}

.icon-btn:hover {
    background: var(--bg-hover, var(--muted));
}

.icon-btn.btn-edit:hover {
    color: var(--info);
    background: var(--info-bg, hsl(199, 89%, 48%, 0.1));
}

.icon-btn.btn-delete:hover {
    color: var(--danger, var(--destructive));
    background: var(--danger-bg, hsl(0, 84%, 60%, 0.1));
}


/* Pagination Component */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: var(--bg-card, var(--card));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: 1.5rem;
}

.pagination-info {
    font-size: 0.875rem;
    color: var(--text-muted, var(--muted-foreground));
}

.pagination-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.pagination-controls button {
    padding: 0.5rem 1rem;
    background: var(--bg-card, var(--card));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-main, var(--foreground));
    cursor: pointer;
    transition: all 0.2s;
}

.pagination-controls button:hover:not(:disabled) {
    background: var(--bg-hover, var(--muted));
    border-color: var(--primary);
    color: var(--primary);
}

.pagination-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-controls span {
    font-size: 0.875rem;
    color: var(--text-main, var(--foreground));
    font-weight: 500;
    padding: 0 0.5rem;
}

/* Section Card (for edit pages) */
.section-card {
    background: var(--bg-card, var(--card));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.section-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-hover, var(--muted));
}

.section-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main, var(--foreground));
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-header h2 svg {
    color: var(--text-muted, var(--muted-foreground));
    width: 20px;
    height: 20px;
}

.section-header p {
    font-size: 0.75rem;
    color: var(--text-muted, var(--muted-foreground));
    margin: 0;
}


/* Page Header Section */
.page-header-section {
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-header-section h1 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-main, var(--foreground));
    margin-bottom: 0.25rem;
}

.page-header-section p {
    color: var(--text-muted, var(--muted-foreground));
    font-size: 0.875rem;
    margin: 0;
}

/* Badge Variants */
.badge-success {
    background: var(--success-bg, hsl(142, 76%, 36%, 0.1));
    color: var(--success-text, var(--success));
}

.badge-danger {
    background: var(--danger-bg, hsl(0, 84%, 60%, 0.1));
    color: var(--danger-text, var(--destructive));
}

.badge-warning {
    background: var(--warning-bg, hsl(38, 92%, 50%, 0.1));
    color: var(--warning-text, var(--warning));
}

.badge-info {
    background: var(--info-bg, hsl(199, 89%, 48%, 0.1));
    color: var(--info-text, var(--info));
}

/* Responsive Design for Admin Interface */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .search-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input-wrapper {
        min-width: auto;
    }

    .filter-select {
        width: 100%;
    }

    .data-table {
        font-size: 0.75rem;
    }

    .data-table th,
    .data-table td {
        padding: 0.5rem;
    }

    .pagination {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .pagination-info {
        text-align: center;
    }

    .pagination-controls {
        justify-content: center;
    }

    .page-header-section {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .stat-card-value {
        font-size: 1.5rem;
    }

    .user-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .action-buttons-cell {
        flex-direction: column;
        width: 100%;
    }

    .icon-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================
   USER DASHBOARD - Dashboard Simplificado para Usuários Comuns
   ============================================ */

/* Welcome Section */
.welcome-section {
    background: var(--bg-card, var(--card));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 3rem 2rem;
    margin-bottom: 2rem;
    text-align: center;
}

.welcome-section h1 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-main, var(--foreground));
    margin-bottom: 0.5rem;
}

.welcome-section p {
    color: var(--text-muted, var(--muted-foreground));
    font-size: 1rem;
}

/* Modules Grid */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.module-card {
    background: var(--bg-card, var(--card));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.module-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    border-color: var(--primary);
}

.module-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-bg, #eff6ff);
    border-radius: 50%;
    font-size: 2rem;
    color: var(--primary);
}

.module-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-main, var(--foreground));
    margin-bottom: 0.5rem;
}

.module-card p {
    color: var(--text-muted, var(--muted-foreground));
    font-size: 0.875rem;
    margin-bottom: 1rem;
    flex: 1;
}

.module-card .btn {
    width: 100%;
}

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--text-muted, var(--muted-foreground));
    background: var(--bg-card, var(--card));
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.empty-state p {
    margin-bottom: 0.5rem;
}

.empty-state p:last-child {
    font-size: 0.875rem;
    color: var(--text-light, var(--muted-foreground));
}

/* Quick Links & Personal Stats */
.quick-links,
.personal-stats {
    background: var(--bg-card, var(--card));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.quick-links h2,
.personal-stats h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-main, var(--foreground));
    margin-bottom: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .welcome-section {
        padding: 2rem 1rem;
    }

    .welcome-section h1 {
        font-size: 1.5rem;
    }

    .modules-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   MODULE GRID (GroupModal)
   ============================================ */

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.module-checkbox-label {
    display: block;
    cursor: pointer;
    position: relative;
}

.module-checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.module-checkbox-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    transition: var(--transition-smooth);
}

.module-checkbox-label input[type="checkbox"]:checked ~ .module-checkbox-content {
    border-color: var(--primary);
    background: hsl(221, 83%, 98%);
}

.module-checkbox-label:hover .module-checkbox-content {
    border-color: var(--primary-glow);
    box-shadow: var(--shadow-card);
}

.module-checkbox-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--muted);
    border-radius: calc(var(--radius) - 2px);
    color: var(--muted-foreground);
    transition: var(--transition-smooth);
}

.module-checkbox-label input[type="checkbox"]:checked ~ .module-checkbox-content .module-checkbox-icon {
    background: var(--primary);
    color: var(--primary-foreground);
}

.module-checkbox-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.module-checkbox-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--foreground);
}

.module-checkbox-desc {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    line-height: 1.4;
}

.module-checkbox-label input[type="checkbox"]:disabled ~ .module-checkbox-content {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Form Section Styling */
.form-section {
    margin-bottom: 2rem;
}

.form-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.form-help {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-bottom: 1rem;
}

.required {
    color: var(--destructive);
    margin-left: 0.25rem;
}

/* Modal Size Variants — legacy overlay only. */
.ou-management .modal-overlay > .modal-lg,
.gcf-legacy-modal-backdrop > .modal-lg {
    max-width: 800px;
}

.ou-management .modal-overlay > .modal-xl,
.gcf-legacy-modal-backdrop > .modal-xl {
    max-width: 1200px;
}

/* ============================================
   ADMIN GROUP EDIT PAGE - SPECIFIC STYLES
   ============================================ */

/* Two Column Layout for Edit Pages */
.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Permissions Grid (2 columns, scrollable) */
.permissions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--muted);
    border-radius: var(--radius);
}

.permission-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: calc(var(--radius) - 2px);
    transition: background 0.2s;
    cursor: pointer;
}

.permission-checkbox:hover {
    background: var(--background);
}

.permission-checkbox input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--primary);
}

.permission-checkbox label {
    font-size: 0.8125rem;
    color: var(--foreground);
    cursor: pointer;
    margin: 0;
    user-select: none;
}

/* Member Info in Table */
.member-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.member-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.member-name {
    color: var(--foreground);
    font-weight: 500;
}

/* Icon Button for Actions */


.icon-btn.btn-edit {
    color: var(--primary);
}

.icon-btn.btn-edit:hover {
    background: hsl(221, 83%, 53%, 0.1);
}

/* Action Buttons Cell */
.action-buttons-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* User Select Item (for modal) */
.user-select-item {
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.user-select-item:hover {
    background: var(--muted);
    border-color: var(--primary);
}

/* Responsive */
@media (max-width: 1024px) {
    }

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

/* Form Select */
.form-select:not(.gcf-module--civic .form-select) {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--foreground);
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
    cursor: pointer;
}

.form-select:not(.gcf-module--civic .form-select):focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-select:not(.gcf-module--civic .form-select):disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--muted);
}

/* Form Help Text */
.form-help {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    display: block;
    margin-top: 0.25rem;
}

/* ============================================
   DEPARTMENT EDIT PAGE - SPECIFIC STYLES
   ============================================ */

/* Two Column Layout for Department Edit */
.two-column-layout {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 1.5rem;
}

/* Section Cards */
.section-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.section-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: #fafbfc;
}

.section-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-header h2 svg {
    color: var(--muted-foreground);
}

.section-header p {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin: 0;
}

.section-content {
    padding: 1.5rem;
}

/* Page Header Section */
.page-header-section {
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-header-section h1 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.25rem;
}

.page-header-section p {
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.action-buttons {
    display: flex;
    gap: 0.75rem;
}

/* Form Elements */
.form-textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--foreground);
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
    resize: vertical;
    min-height: 5rem;
    line-height: 1.5;
}

.form-select:not(.gcf-module--civic .form-select) {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--foreground);
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
}

.form-textarea:focus,
.form-select:not(.gcf-module--civic .form-select):focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Search Input Wrapper */
.search-input-wrapper {
    position: relative;
    margin-bottom: 1rem;
}

.search-input-wrapper input {
    width: 100%;
    padding: 0.625rem 0.875rem 0.625rem 2.5rem;
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    transition: all 0.2s;
}

.search-input-wrapper input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-foreground);
    pointer-events: none;
}

/* Table Wrapper */
.table-wrapper {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead {
    background: #f8fafc;
}

.data-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 1px solid var(--border);
}

.data-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--foreground);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background: var(--muted);
}

/* Group Info */
.group-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.group-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #eff6ff;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.group-icon svg {
    width: 16px;
    height: 16px;
}

.group-name {
    color: var(--foreground);
    font-weight: 500;
}

.group-description {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

/* Icon Button */
.icon-btn {
    background: none;
    border: none;
    color: var(--destructive);
    cursor: pointer;
    padding: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--radius) - 2px);
    transition: all 0.2s;
}

.icon-btn:hover {
    background: hsl(0, 84%, 60%, 0.1);
}

.icon-btn svg {
    width: 18px;
    height: 18px;
}

/* Button with SVG */
.btn:not(.gcf-module--civic .btn) svg {
    width: 16px;
    height: 16px;
}

/* Responsive for Department Edit */
@media (max-width: 1024px) {
    .two-column-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-container {
        padding: 1rem;
    }

    .group-description {
        max-width: 150px;
    }
}
/* Group Selection Item */
.group-select-item:hover {
    background: var(--muted);
}

.group-select-item:last-child {
    border-bottom: none;
}

/* Department List Styles */
.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-avatar svg {
    width: 16px;
    height: 16px;
}

.user-name {
    color: var(--foreground);
    font-weight: 500;
}

.user-description {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
}

.btn-danger:not(.gcf-module--civic .btn-danger) {
    background: var(--destructive);
    color: white;
    border-color: var(--destructive);
}

.btn-danger:not(.gcf-module--civic .btn-danger):hover {
    background: hsl(0, 84%, 50%);
    border-color: hsl(0, 84%, 50%);
}

.filters-section {
    margin-bottom: 1.5rem;
}

.filters-section .search-input-wrapper {
    max-width: 400px;
}

/* ============================================
   WEBSOCKET STATUS WIDGET STYLES
   ============================================ */

.websocket-status-widget {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
    max-width: 100%;
    margin-bottom: 1.5rem;
}

.websocket-status-widget:hover {
    box-shadow: var(--shadow-elegant);
    transform: translateY(-2px);
}

/* Widget Header */
.websocket-status-widget .widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.websocket-status-widget .header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.websocket-status-widget .widget-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.websocket-status-widget .status-indicator {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.websocket-status-widget .status-indicator.success {
    background: var(--success);
    color: white;
    animation: pulse-success 2s infinite;
}

.websocket-status-widget .status-indicator.warning {
    background: var(--warning);
    color: white;
}

.websocket-status-widget .status-indicator.danger {
    background: var(--destructive);
    color: white;
}

.websocket-status-widget .header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.websocket-status-widget .last-update {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    background: var(--muted);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

/* Loading State */
.websocket-status-widget.loading {
    text-align: center;
    padding: 2rem;
}

.websocket-status-widget .loading-spinner {
    font-size: 1.5rem;
    animation: spin 1s linear infinite;
}

/* Error Message */
.websocket-status-widget .error-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: hsl(0 84% 60% / 0.1);
    border: 1px solid var(--destructive);
    border-radius: var(--radius-sm);
    color: var(--destructive);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* Metrics Grid */
.websocket-status-widget .metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.websocket-status-widget .metric-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--muted);
    border-radius: var(--radius-sm);
    transition: var(--transition-smooth);
}

.websocket-status-widget .metric-card:hover {
    background: var(--secondary);
    transform: translateY(-1px);
}

.websocket-status-widget .metric-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.websocket-status-widget .metric-content {
    flex: 1;
    min-width: 0;
}

.websocket-status-widget .metric-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.2;
}

.websocket-status-widget .metric-label {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Activity Section */
.websocket-status-widget .activity-section {
    margin-bottom: 1.5rem;
}

.websocket-status-widget .activity-section h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.websocket-status-widget .activity-feed {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--background);
}

.websocket-status-widget .no-activity {
    padding: 2rem;
    text-align: center;
    color: var(--muted-foreground);
    font-style: italic;
}

.websocket-status-widget .activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    transition: var(--transition-smooth);
}

.websocket-status-widget .activity-item:last-child {
    border-bottom: none;
}

.websocket-status-widget .activity-item:hover {
    background: var(--muted);
}

.websocket-status-widget .activity-icon {
    font-size: 1rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.websocket-status-widget .activity-content {
    flex: 1;
    min-width: 0;
}

.websocket-status-widget .activity-message {
    font-size: 0.875rem;
    color: var(--foreground);
    line-height: 1.4;
    margin-bottom: 0.25rem;
}

.websocket-status-widget .activity-time {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

/* Activity Types */
.websocket-status-widget .activity-item.user_online {
    border-left: 3px solid var(--success);
}

.websocket-status-widget .activity-item.user_offline {
    border-left: 3px solid var(--destructive);
}

.websocket-status-widget .activity-item.notification {
    border-left: 3px solid var(--info);
}

/* Server Info */
.websocket-status-widget .server-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    background: var(--muted);
    border-radius: var(--radius-sm);
    border-top: 1px solid var(--border);
}

.websocket-status-widget .info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.websocket-status-widget .info-label {
    color: var(--muted-foreground);
    font-weight: 500;
}

.websocket-status-widget .info-value {
    color: var(--foreground);
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

/* Pulse animation for status indicator */
@keyframes pulse-success {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* Compact version for smaller spaces */
.websocket-status-widget.compact {
    padding: 1rem;
}

.websocket-status-widget.compact .metrics-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.websocket-status-widget.compact .metric-card {
    flex-direction: column;
    text-align: center;
    padding: 0.75rem 0.5rem;
}

.websocket-status-widget.compact .metric-icon {
    width: 32px;
    height: 32px;
}

.websocket-status-widget.compact .metric-value {
    font-size: 1rem;
}

.websocket-status-widget.compact .activity-section {
    display: none;
}

.websocket-status-widget.compact .server-info {
    display: none;
}

/* Responsive Design for WebSocket Widget */
@media (max-width: 768px) {
    .websocket-status-widget {
        padding: 1rem;
    }

    .websocket-status-widget .widget-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .websocket-status-widget .header-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .websocket-status-widget .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .websocket-status-widget .metric-card {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .websocket-status-widget .activity-feed {
        max-height: 150px;
    }

    .websocket-status-widget .server-info {
        flex-direction: column;
        gap: 0.5rem;
    }

    .websocket-status-widget .info-item {
        justify-content: space-between;
    }
}

@media (max-width: 480px) {
    .websocket-status-widget .metrics-grid {
        grid-template-columns: 1fr;
    }

    .websocket-status-widget .metric-card {
        flex-direction: row;
        text-align: left;
    }
}

/* Dark mode adjustments for WebSocket widget */
.dark .websocket-status-widget {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark .websocket-status-widget:hover {
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.dark .websocket-status-widget .activity-feed {
    border-color: var(--border);
}

.dark .websocket-status-widget .activity-item:hover {
    background: var(--sidebar-accent);
}


/* ============================================
   ORGANIZATIONAL UNITS MANAGEMENT
   ============================================ */

/* OU Management Container */
.ou-management {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header */
.ou-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border);
}

.ou-header h1 {
    font-size: 1.75rem;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.ou-header .subtitle {
    color: var(--muted-foreground);
    font-size: 0.95rem;
}

/* Tree Container */
.ou-tree {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}

/* Tree Node */
.tree-node {
    margin: 0.25rem 0;
}

.tree-node-content {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 6px;
    transition: var(--transition-smooth);
    gap: 0.5rem;
}

.tree-node-content:hover {
    background: var(--muted);
}

/* Toggle Button */
.tree-toggle {
    background: none;
    border: none;
    color: var(--muted-foreground);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 0.75rem;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: var(--transition-smooth);
}

.tree-toggle:hover {
    background: var(--border);
    color: var(--foreground);
}

.tree-toggle.invisible {
    visibility: hidden;
}

/* Tree Icon */
.tree-icon {
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tree Label */
.tree-label {
    flex: 1;
    font-weight: 500;
    color: var(--foreground);
}

/* Tree Badge */
.tree-badge {
    background: var(--primary);
    color: var(--primary-foreground);
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Tree Actions */
.tree-actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: var(--transition-smooth);
}

.tree-node-content:hover .tree-actions {
    opacity: 1;
}

/* Icon Buttons */
.btn-icon {
    background: none;
    border: 1px solid var(--border);
    color: var(--foreground);
    cursor: pointer;
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    background: var(--muted);
    border-color: var(--primary);
}

.btn-icon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-icon.btn-danger:hover {
    background: var(--destructive);
    color: white;
    border-color: var(--destructive);
}

/* Tree Children */
.tree-children {
    margin-left: 0;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--muted-foreground);
}

.empty-state .empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-state h3 {
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.empty-state p {
    font-size: 0.95rem;
}

/* Loading State */
.loading-state {
    text-align: center;
    padding: 3rem 1.5rem;
}

.loading-state .spinner {
    font-size: 2rem;
    margin-bottom: 1rem;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Modal Overlay */
.ou-management .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

/* Modal Content */
.ou-management .modal-overlay > .modal-content,
.gcf-legacy-modal-backdrop > .modal-content {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-elegant);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

/* Modal Header */
.ou-management .modal-overlay .modal-header,
.gcf-legacy-modal-backdrop .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.ou-management .modal-overlay .modal-header h2,
.gcf-legacy-modal-backdrop .modal-header h2 {
    font-size: 1.25rem;
    color: var(--foreground);
    margin: 0;
}

.ou-management .modal-overlay .btn-close,
.gcf-legacy-modal-backdrop .btn-close {
    background: none;
    border: none;
    color: var(--muted-foreground);
    cursor: pointer;
    font-size: 1.5rem;
    padding: 0.25rem;
    line-height: 1;
    transition: var(--transition-smooth);
}

.ou-management .modal-overlay .btn-close:hover,
.gcf-legacy-modal-backdrop .btn-close:hover {
    color: var(--foreground);
}

/* Modal Body */
.ou-management .modal-overlay .modal-body,
.gcf-legacy-modal-backdrop .modal-body {
    padding: 1.5rem;
}

/* Form Group */

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--foreground);
}

.form-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    color: var(--foreground);
    background: var(--background);
    transition: var(--transition-smooth);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px hsla(221, 83%, 53%, 0.1);
}

.form-input:disabled {
    background: var(--muted);
    cursor: not-allowed;
}

/* Form Info */
.form-info {
    padding: 0.75rem;
    background: var(--muted);
    border-radius: 6px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.form-info strong {
    color: var(--foreground);
}

/* Alert */
.alert:not(.gcf-module--civic .alert) {
    padding: 0.875rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-error {
    background: hsla(0, 84%, 60%, 0.1);
    color: var(--destructive);
    border: 1px solid var(--destructive);
}

.alert-success {
    background: hsla(142, 76%, 36%, 0.1);
    color: var(--success);
    border: 1px solid var(--success);
}

/* Modal Footer */
.ou-management .modal-overlay .modal-footer,
.gcf-legacy-modal-backdrop .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Buttons */
.btn:not(.gcf-module--civic .btn) {
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-size: 0.95rem;
}

.btn-primary:not(.gcf-module--civic .btn-primary) {
    background: var(--primary);
    color: var(--primary-foreground);
}

.btn-primary:not(.gcf-module--civic .btn-primary):hover {
    background: var(--primary-glow);
}

.btn-primary:not(.gcf-module--civic .btn-primary):disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary:not(.gcf-module--civic .btn-secondary) {
    background: var(--secondary);
    color: var(--secondary-foreground);
    border: 1px solid var(--border);
}

.btn-secondary:not(.gcf-module--civic .btn-secondary):hover {
    background: var(--muted);
}

/* Responsive Design */
@media (max-width: 768px) {
    .ou-management {
        padding: 1rem;
    }

    .ou-header {
        flex-direction: column;
        gap: 1rem;
    }

    .ou-header .btn {
        width: 100%;
    }

    .tree-node-content {
        padding: 0.5rem;
    }

    .tree-actions {
        opacity: 1; /* Sempre visível no mobile */
    }

    .ou-management .modal-overlay > .modal-content,
    .gcf-legacy-modal-backdrop > .modal-content {
        max-width: 100%;
        margin: 0;
    }
}

/* ============================================
   OU GROUPS MODAL
   ============================================ */

/* Container for groups sections */
.ou-groups-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Section (Linked / Available) */
.ou-groups-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ou-groups-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

/* Divider between sections */
.ou-groups-divider {
    height: 1px;
    background: var(--border);
    margin: 0.5rem 0;
}

/* List of groups */
.ou-groups-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.25rem;
}

/* Empty state */
.ou-groups-empty {
    color: var(--muted-foreground);
    font-size: 0.875rem;
    font-style: italic;
    padding: 1rem;
    text-align: center;
    background: var(--muted);
    border-radius: var(--radius-sm);
}

/* Group item */
.ou-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    transition: var(--transition-smooth);
}

.ou-group-item:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px hsl(221 83% 53% / 0.1);
}

/* Linked group (different background) */
.ou-group-item--linked {
    background: var(--muted);
    border-color: var(--success);
}

.ou-group-item--linked:hover {
    border-color: var(--success);
    box-shadow: 0 2px 8px hsl(142 76% 36% / 0.1);
}

/* Group info */
.ou-group-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ou-group-name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--foreground);
}

.ou-group-meta {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    line-height: 1.4;
}

/* Group actions */
.ou-group-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Button sizes */
.btn-sm:not(.gcf-module--civic .btn-sm) {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-danger:not(.gcf-module--civic .btn-danger) {
    background: var(--destructive);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-danger:not(.gcf-module--civic .btn-danger):hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-danger:not(.gcf-module--civic .btn-danger):disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
    .ou-group-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .ou-group-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .ou-groups-list {
        max-height: 250px;
    }
}


/* ============================================
   OU TREE COMPONENT STYLES
   ============================================ */

.ou-tree {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ou-tree-node {
    display: flex;
    flex-direction: column;
}

.ou-tree-node-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    transition: all 0.2s;
}

.ou-tree-node-content:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px hsl(221 83% 53% / 0.1);
}

.ou-tree-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--muted-foreground);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.ou-tree-toggle:hover {
    color: var(--foreground);
}

.ou-tree-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.ou-tree-label {
    flex: 1;
    min-width: 0;
}

.ou-tree-label > div:first-child {
    font-weight: 500;
    color: var(--foreground);
    font-size: 0.95rem;
}

.ou-tree-label > div:last-child {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.ou-tree-badges {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.ou-tree-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 500;
    white-space: nowrap;
}

.ou-tree-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-shrink: 0;
}

.ou-tree-actions button {
    padding: 0.4rem;
    font-size: 0.875rem;
    background: var(--muted);
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    color: var(--foreground);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ou-tree-actions button:hover:not(:disabled) {
    background: var(--primary);
    color: var(--primary-foreground);
}

.ou-tree-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ou-tree-actions .btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.ou-tree-children {
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .ou-tree-actions button {
        padding: 0.35rem;
        font-size: 0.8rem;
    }

    .ou-tree-badges {
        gap: 0.25rem;
    }
}

@media (max-width: 768px) {
    .ou-tree-node-content {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .ou-tree-badges {
        order: 3;
        width: 100%;
        flex-wrap: wrap;
    }

    .ou-tree-actions {
        order: 4;
        width: 100%;
        flex-wrap: wrap;
    }

    .ou-tree-actions button {
        flex: 1;
        min-width: 60px;
    }
}

/* ============================================
   SUPER ADMIN DASHBOARD STYLES
   ============================================ */

/* ============================================
   SUPER ADMIN DASHBOARD - PROFESSIONAL LAYOUT
   ============================================ */

.superadmin-dashboard {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Dashboard Header */
.dashboard-header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--border);
}

.dashboard-header h1 {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    letter-spacing: -0.02em;
}

.dashboard-header .subtitle {
    color: var(--muted-foreground);
    font-size: 1rem;
    font-weight: 400;
}

/* Tenants Section */
.tenants-section {
    margin-top: 2rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.75rem;
    padding: 0 0.25rem;
}

.section-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--foreground);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: -0.01em;
}

.section-header .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: calc(var(--radius) - 2px);
    font-weight: 500;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.section-header .btn:hover {
    background: var(--primary-glow);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px hsl(221 83% 53% / 0.3);
}

/* Tenants Table - Professional Layout */
.tenants-table-container {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.tenants-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.tenants-table thead {
    background: hsl(210 17% 98%);
    border-bottom: 2px solid var(--border);
}

.tenants-table th {
    padding: 1rem 1.25rem;
    text-align: left;
    font-weight: 600;
    color: var(--foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8125rem;
}

.tenants-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: var(--transition-smooth);
}

.tenants-table tbody tr:hover {
    background: hsl(210 17% 98% / 0.5);
}

.tenants-table tbody tr:last-child {
    border-bottom: none;
}

.tenants-table td {
    padding: 1rem 1.25rem;
    color: var(--foreground);
}

/* Table Cell Styles */
.tenant-name-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
}

.tenant-name-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: hsl(221 83% 53% / 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: calc(var(--radius) - 6px);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.status-badge.active {
    background: hsl(142 76% 36% / 0.1);
    color: hsl(142 76% 36%);
}

.status-badge.inactive {
    background: hsl(0 84% 60% / 0.1);
    color: hsl(0 84% 60%);
}

.status-badge.pending {
    background: hsl(38 92% 50% / 0.1);
    color: hsl(38 92% 50%);
}

.modules-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.module-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: hsl(221 83% 53% / 0.1);
    color: var(--primary);
    border-radius: calc(var(--radius) - 8px);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.stats-cell {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.stat-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.stat-mini-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
}

.stat-mini-label {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Table Actions */
.table-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.table-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: none;
    border-radius: calc(var(--radius) - 6px);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

.table-actions .btn-view {
    background: var(--primary);
    color: var(--primary-foreground);
}

.table-actions .btn-view:hover {
    background: var(--primary-glow);
    transform: translateY(-1px);
}


.table-actions .btn-admins {
    background: hsl(262 83% 58% / 0.1);
    color: hsl(262 83% 58%);
}

.table-actions .btn-admins:hover {
    background: hsl(262 83% 58% / 0.2);
}

.table-actions .btn-edit {
    background: hsl(199 89% 48% / 0.1);
    color: hsl(199 89% 48%);
}

.table-actions .btn-edit:hover {
    background: hsl(199 89% 48% / 0.2);
}

.table-actions .btn-delete {
    background: hsl(0 84% 60% / 0.1);
    color: hsl(0 84% 60%);
}

.table-actions .btn-delete:hover {
    background: hsl(0 84% 60% / 0.2);
}

/* Responsive Table - Convert to Cards on Mobile */
@media (max-width: 1024px) {
    .tenants-table {
        font-size: 0.875rem;
    }

    .tenants-table th,
    .tenants-table td {
        padding: 0.75rem 1rem;
    }
}

@media (max-width: 768px) {
    .tenants-table-container {
        overflow-x: auto;
    }

    .tenants-table {
        min-width: 600px;
    }
}

/* Fallback Grid Layout for Cards */
.tenants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

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

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

/* Tenant Card - Professional Design (Fallback) */
.tenant-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: var(--shadow-card);
}

.tenant-card:hover {
    box-shadow: 0 8px 24px hsl(221 39% 11% / 0.12);
    transform: translateY(-2px);
    border-color: var(--primary);
}

/* Tenant Header */
.tenant-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tenant-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: hsl(221 83% 53% / 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.tenant-info {
    flex: 1;
    min-width: 0;
}

.tenant-info h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tenant-status {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: calc(var(--radius) - 6px);
    display: inline-block;
    margin-top: 0.25rem;
}

/* Tenant Stats */
.tenant-stats {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.tenant-stats .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
}

.tenant-stats .stat-icon {
    font-size: 1.25rem;
}

.tenant-stats .stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
}

.tenant-stats .stat-label {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Tenant Actions - Professional Buttons */
.tenant-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tenant-actions .btn {
    flex: 1;
    min-width: fit-content;
}

.tenant-actions .btn-sm {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
}

.tenant-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: calc(var(--radius) - 4px);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

.tenant-actions button:hover:not(:disabled) {
    transform: translateY(-1px);
    opacity: 0.9;
}

.tenant-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tenant-actions .btn-primary {
    background: var(--primary);
    color: var(--primary-foreground);
}

.tenant-actions .btn-secondary {
    background: var(--secondary);
    color: var(--secondary-foreground);
    border: 1px solid var(--border);
}

.tenant-actions .btn-danger {
    background: var(--destructive);
    color: white;
}

.tenant-actions .btn-success {
    background: var(--success);
    color: white;
}

/* Detail Section - Modal Content */
.detail-section {
    margin-bottom: 1.5rem;
}

.detail-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-item strong {
    color: var(--muted-foreground);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-item span {
    color: var(--foreground);
    font-size: 0.875rem;
}

/* Users List */
.users-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--muted);
    border-radius: calc(var(--radius) - 4px);
    font-size: 0.875rem;
}

.text-muted {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    font-style: italic;
    margin-top: 0.5rem;
}

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


/* ============================================
   CREATE TENANT MODAL STYLES
   ============================================ */

/* Modal Form Styling */
.modal-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 500;
    color: var(--foreground);
    font-size: 0.9375rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 4px);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: var(--transition-smooth);
    background: var(--background);
    color: var(--foreground);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px hsl(221 83% 53% / 0.1);
}

.form-group input:disabled,
.form-group select:disabled {
    background: var(--muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.form-group .help-text {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin-top: 0.25rem;
}

.form-group .error-text {
    font-size: 0.8125rem;
    color: var(--destructive);
    margin-top: 0.25rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.form-actions button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: calc(var(--radius) - 4px);
    font-weight: 500;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.form-actions .btn-primary {
    background: var(--primary);
    color: var(--primary-foreground);
}

.form-actions .btn-primary:hover {
    background: var(--primary-glow);
    transform: translateY(-1px);
}

.form-actions .btn-secondary {
    background: var(--secondary);
    color: var(--secondary-foreground);
    border: 1px solid var(--border);
}

.form-actions .btn-secondary:hover {
    background: hsl(210 17% 96%);
}

/* Loading States */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--muted);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.loading-container p {
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

@media (max-width: 960px) {
    .module-loading-shell-hero,
    .module-loading-shell-grid,
    .module-loading-shell-metrics {
        grid-template-columns: 1fr;
    }

    .module-loading-shell-signal {
        justify-items: flex-start;
        min-width: 0;
    }
}

/* Modal Large Variant */
.ou-management .modal-overlay > .modal-large,
.gcf-legacy-modal-backdrop > .modal-large {
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
}

/* Form Sections */
.form-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.form-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Form Groups */
.form-group {
    margin-bottom: 1.25rem;
}

.form-label:not(.gcf-module--civic .form-label) {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--foreground);
    font-size: 0.875rem;
}

.form-label:not(.gcf-module--civic .form-label) .required {
    color: var(--destructive);
}

.form-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 4px);
    font-size: 0.875rem;
    transition: var(--transition-smooth);
    background: var(--background);
    color: var(--foreground);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px hsl(221 83% 53% / 0.1);
}

.form-input.error {
    border-color: var(--destructive);
}

.form-input.error:focus {
    box-shadow: 0 0 0 3px hsl(0 84% 60% / 0.1);
}

.form-error {
    display: block;
    color: var(--destructive);
    font-size: 0.75rem;
    margin-top: 0.375rem;
}

.form-help {
    display: block;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    margin-top: 0.375rem;
}

/* Password Strength Indicator */
.password-strength {
    margin-top: 0.5rem;
}

.password-strength-bar {
    height: 4px;
    border-radius: 2px;
    background-color: var(--muted);
    transition: var(--transition-smooth);
    margin-bottom: 0.375rem;
}

.password-strength-label {
    font-size: 0.75rem;
    font-weight: 500;
}

/* Module Checkbox Group */
.module-checkbox-group {
    display: grid;
    gap: 0.75rem;
}

.module-checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 4px);
    cursor: pointer;
    transition: var(--transition-smooth);
    background: var(--background);
}

.module-checkbox-item:hover {
    background: var(--muted);
    border-color: var(--primary);
}

.module-checkbox-item.checked {
    background: hsl(221 83% 53% / 0.05);
    border-color: var(--primary);
}

.module-checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
}

.module-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.module-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.module-name {
    font-weight: 500;
    color: var(--foreground);
    font-size: 0.875rem;
}

.module-description {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

/* Modal Footer Buttons */
.ou-management .modal-overlay .modal-footer,
.gcf-legacy-modal-backdrop .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.ou-management .modal-overlay .modal-footer .btn,
.gcf-legacy-modal-backdrop .modal-footer .btn {
    min-width: 120px;
}

/* Responsive */
@media (max-width: 768px) {
    .ou-management .modal-overlay > .modal-large,
    .gcf-legacy-modal-backdrop > .modal-large {
        max-width: 95%;
        margin: 1rem;
    }

    .form-section-title {
        font-size: 1rem;
    }

    .module-checkbox-item {
        padding: 0.75rem;
    }

    .modal-footer {
        flex-direction: column-reverse;
    }

    .modal-footer .btn {
        width: 100%;
    }
}

/* ==================== USER PROFILE BUTTON (TOPBAR) ==================== */

.user-profile-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.user-profile-button:hover {
    background: var(--muted);
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
    transform: translateY(-1px);
}

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: var(--primary-foreground);
    border-radius: 50%;
}

.user-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
}

/* ==================== SHARED SHELL HOST BEHAVIOR ==================== */
.dashboard-layout.core-shell-hidden .main-content {
    overflow: hidden;
}

.dashboard-layout.core-shell-hidden .dashboard-main {
    padding: 0;
}


/* ============================================
   SUPER ADMIN 2.0 - OPERATIONS DASHBOARD
   ============================================ */
.ops2-shell {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.ops2-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.ops2-toolbar h2 {
    margin: 0 0 0.35rem 0;
    font-size: 1.35rem;
    color: var(--foreground);
}

.ops2-toolbar p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.92rem;
}

.ops2-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ops2-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
}

.ops2-card,
.ops2-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.ops2-card {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border-left: 4px solid var(--primary);
}

.ops2-card-healthy,
.ops2-card-ok {
    border-left-color: var(--success);
}

.ops2-card-attention,
.ops2-card-warn {
    border-left-color: var(--warning);
}

.ops2-card-critical,
.ops2-card-fail {
    border-left-color: var(--destructive);
}

.ops2-card-label {
    color: var(--muted-foreground);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ops2-card strong {
    color: var(--foreground);
    font-size: 1.45rem;
    line-height: 1.1;
}

.ops2-card small {
    color: var(--muted-foreground);
    font-size: 0.82rem;
}

.ops2-grid {
    display: grid;
    gap: 1rem;
}

.ops2-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ops2-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ops2-panel {
    padding: 1rem;
    min-width: 0;
}

.ops2-panel h3 {
    margin: 0 0 0.85rem 0;
    font-size: 1rem;
    color: var(--foreground);
}

.ops2-kv {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
}

.ops2-kv:last-child {
    border-bottom: none;
}

.ops2-kv span {
    color: var(--muted-foreground);
}

.ops2-kv strong {
    color: var(--foreground);
    text-align: right;
    overflow-wrap: anywhere;
}

.ops2-check {
    display: grid;
    grid-template-columns: 120px 90px 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border);
}

.ops2-check:last-child {
    border-bottom: none;
}

.ops2-check strong {
    font-size: 0.8rem;
    color: var(--foreground);
}

.ops2-check span {
    display: inline-flex;
    justify-content: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.ops2-check p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.84rem;
}

.ops2-check-ok span {
    background: hsl(142 76% 36% / 0.1);
    color: hsl(142 76% 36%);
}

.ops2-check-warn span {
    background: hsl(38 92% 50% / 0.12);
    color: hsl(38 92% 40%);
}

.ops2-check-fail span {
    background: hsl(0 84% 60% / 0.12);
    color: hsl(0 84% 50%);
}

.ops2-list {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--muted-foreground);
    font-size: 0.88rem;
}

.ops2-list li {
    margin-bottom: 0.5rem;
}

.ops2-muted,
.ops2-log-hint {
    color: var(--muted-foreground);
    font-size: 0.84rem;
}

.ops2-log-hint {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.ops2-table-wrap {
    overflow-x: auto;
}

.ops2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.ops2-table th,
.ops2-table td {
    padding: 0.55rem 0.45rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.ops2-table th {
    color: var(--muted-foreground);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
}

.ops2-query-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ops2-query-item {
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 4px);
    background: hsl(210 17% 98% / 0.45);
}

.ops2-query-meta {
    color: var(--muted-foreground);
    font-size: 0.78rem;
    margin-bottom: 0.4rem;
}

.ops2-query-item code {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.78rem;
    color: var(--foreground);
}

.ops2-module-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ops2-module-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    background: hsl(221 83% 53% / 0.1);
    color: var(--primary);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
}

@media (max-width: 1180px) {
    .ops2-summary-grid,
    .ops2-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .ops2-toolbar,
    .ops2-kv,
    .ops2-check {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .ops2-summary-grid,
    .ops2-grid-2,
    .ops2-grid-3 {
        grid-template-columns: 1fr;
    }

    .ops2-kv strong {
        text-align: left;
    }
}

/* Super Admin Ops2 integrated dashboard refinements */
.ops2-panel .ops2-table { font-size: 0.82rem; }
.ops2-panel code { word-break: break-word; }


.ops2-shell { margin-bottom: 1.5rem; }
.ops2-toolbar { align-items: flex-start; }
.ops2-field { display:flex; flex-direction:column; gap:.45rem; margin-bottom:.9rem; color:var(--foreground); font-weight:700; }
.ops2-field input,
.ops2-field textarea { width:100%; border:1px solid var(--border); background:var(--background); color:var(--foreground); border-radius:10px; padding:.65rem .75rem; font:inherit; }
.ops2-field textarea { resize:vertical; min-height:80px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.86rem; }
.ops2-checkline { display:flex; align-items:center; gap:.6rem; margin:.65rem 0; color:var(--foreground); font-weight:600; }
.ops2-checkline input { width:16px; height:16px; }
.ops2-panel code { word-break:break-word; }

/* Super Admin 2.1.1 - settings page inspired by GFW IPS */
.ops2-preset-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:-.4rem 0 .85rem 0}.ops2-test-result{display:flex;flex-direction:column;gap:.25rem;padding:.75rem .9rem;border-radius:12px;border:1px solid var(--border);background:var(--card);margin-bottom:.85rem}.ops2-test-result.ok{border-left:4px solid var(--success)}.ops2-test-result.fail{border-left:4px solid var(--destructive)}.ops2-test-result code{font-size:.78rem;word-break:break-all;background:var(--muted);padding:.35rem .45rem;border-radius:8px;color:var(--foreground)}




.dashboard-main:has(.saop-shell) {
    padding: 1rem 1.25rem 1.25rem;
    background: #f8fafc;
    max-width: none;
}

.saop-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    color: #0f172a;
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
}

.saop-shell * { box-sizing: border-box; }

.saop-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}

.saop-titleline {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.saop-titleline h1 {
    margin: 0;
    font-size: clamp(1.35rem, 1.05rem + .8vw, 2rem);
    letter-spacing: -.035em;
    line-height: 1;
    color: #020617;
}

.saop-header p {
    margin: .45rem 0 0;
    color: #64748b;
    font-size: .9rem;
}

.saop-pill,
.saop-time,
.saop-state {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    padding: .35rem .55rem;
    font-size: .74rem;
    font-weight: 800;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
}

.saop-time {
    border-color: #ccfbf1;
    background: #f0fdfa;
    color: #0f766e;
    font-variant-numeric: tabular-nums;
}

.saop-state.online {
    background: #dcfce7;
    border-color: #bbf7d0;
    color: #15803d;
}

.saop-state.offline {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;
}

.saop-actions {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
}

.saop-metric-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(180px, 1fr));
    gap: .9rem;
}

.saop-metric,
.saop-info-card,
.saop-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .055);
}

.saop-metric {
    min-height: 122px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.saop-metric-head {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.saop-metric-icon,
.saop-info-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 1rem;
    background: #eff6ff;
}

.saop-metric-label {
    color: #64748b;
    font-size: .84rem;
    font-weight: 700;
}

.saop-metric strong {
    display: block;
    margin-top: .25rem;
    color: #020617;
    font-size: 1.25rem;
    line-height: 1;
}

.saop-metric small {
    color: #64748b;
    font-size: .74rem;
}

.saop-progress,
.saop-status-track {
    width: 100%;
    height: 5px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
}

.saop-progress i,
.saop-status-track i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #2563eb;
}

.saop-tone-green .saop-progress i,
.saop-status-ok .saop-info-icon,
.saop-tone-ok .saop-status-track i { background: #22c55e; }

.saop-tone-orange .saop-progress i,
.saop-tone-warn .saop-progress i,
.saop-tone-warn .saop-status-track i { background: #f59e0b; }

.saop-tone-purple .saop-progress i,
.saop-tone-purple .saop-status-track i { background: #8b5cf6; }

.saop-tone-danger .saop-progress i,
.saop-tone-danger .saop-status-track i { background: #ef4444; }

.saop-status-danger .saop-info-icon { background: #fee2e2; color: #dc2626; }
.saop-status-warn .saop-info-icon { background: #fef3c7; color: #d97706; }
.saop-status-ok .saop-info-icon { background: #dcfce7; color: #16a34a; }
.saop-status-blue .saop-info-icon { background: #dbeafe; color: #2563eb; }
.saop-status-purple .saop-info-icon { background: #ede9fe; color: #7c3aed; }

.saop-grid-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1rem;
    align-items: start;
}

.saop-main-col,
.saop-side-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.saop-grid {
    display: grid;
    gap: .9rem;
    align-items: start;
}

.saop-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.saop-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.saop-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.saop-info-card {
    min-height: 104px;
    padding: .95rem;
    display: flex;
    align-items: center;
    gap: .85rem;
}

.saop-info-card span {
    display: block;
    color: #64748b;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.saop-info-card strong {
    display: block;
    margin-top: .25rem;
    color: #020617;
    font-size: 1.35rem;
    line-height: 1;
    word-break: break-word;
}

.saop-info-card small {
    display: block;
    margin-top: .45rem;
    color: #64748b;
    font-size: .74rem;
}

.saop-panel {
    overflow: hidden;
}

.saop-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
    padding: 1rem 1.05rem .85rem;
    border-bottom: 1px solid #edf2f7;
}

.saop-panel-head h3 {
    margin: 0;
    color: #111827;
    font-size: 1rem;
    letter-spacing: -.015em;
}

.saop-panel-head p {
    margin: .25rem 0 0;
    color: #64748b;
    font-size: .78rem;
}

.saop-panel-body {
    padding: 1rem 1.05rem 1.05rem;
}

.saop-mini-bars,
.saop-status-bars,
.saop-health-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.saop-bar-top,
.saop-status-row {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) 64px;
    gap: .75rem;
    align-items: center;
    color: #64748b;
    font-size: .82rem;
    font-weight: 700;
}

.saop-bar-top {
    display: flex;
    justify-content: space-between;
}

.saop-bar .saop-progress {
    margin-top: .35rem;
}

.saop-status-row strong {
    text-align: right;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.saop-kv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

.saop-kv,
.saop-mini-stat {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 12px;
    padding: .75rem;
}

.saop-kv span,
.saop-mini-stat span {
    display: block;
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.saop-kv strong,
.saop-mini-stat strong {
    display: block;
    margin-top: .25rem;
    color: #0f172a;
    font-size: .98rem;
    word-break: break-word;
}

.saop-ws-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
    margin-bottom: .9rem;
}

.saop-table-wrap {
    width: 100%;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.saop-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 580px;
    font-size: .8rem;
}

.saop-table th {
    text-align: left;
    padding: .72rem .8rem;
    color: #64748b;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .035em;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.saop-table td {
    padding: .72rem .8rem;
    color: #0f172a;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}

.saop-table tr:last-child td {
    border-bottom: 0;
}

.saop-filterbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: .7rem;
    margin-bottom: .75rem;
}

.saop-filterbar input,
.saop-filterbar select,
.ops2-panel input,
.ops2-panel textarea,
.ops2-panel select {
    width: 100%;
    border: 1px solid #dbe3ef;
    background: #fff;
    border-radius: 10px;
    padding: .65rem .75rem;
    color: #0f172a;
    font: inherit;
}

.saop-health {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
    padding: .65rem .75rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.saop-health span {
    font-weight: 900;
    font-size: .72rem;
    color: #475569;
}

.saop-health strong {
    color: #0f172a;
    font-size: .82rem;
    font-weight: 700;
}

.saop-health-ok { border-left: 4px solid #22c55e; }
.saop-health-warn,
.saop-health-attention { border-left: 4px solid #f59e0b; }
.saop-health-fail,
.saop-health-critical { border-left: 4px solid #ef4444; }

.saop-recommendations {
    margin: 0;
    padding-left: 1.15rem;
    color: #0f172a;
    font-size: .84rem;
}

.saop-recommendations li + li {
    margin-top: .55rem;
}

.saop-muted {
    color: #64748b;
    font-size: .84rem;
    margin: 0;
}

.saop-json {
    max-height: 260px;
    overflow: auto;
    margin: 0;
    padding: .8rem;
    border-radius: 12px;
    background: #0f172a;
    color: #dbeafe;
    font-size: .75rem;
    white-space: pre-wrap;
}

.saop-query-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.saop-query-item {
    padding: .85rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.saop-query-meta {
    color: #64748b;
    font-size: .75rem;
    font-weight: 800;
    margin-bottom: .4rem;
}

.saop-query-item code {
    display: block;
    color: #0f172a;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .78rem;
}

.ops2-shell {
    width: 100%;
    max-width: none;
}

.ops2-toolbar,
.ops2-panel {
    border-radius: 16px;
}

@media (max-width: 1500px) {
    .saop-metric-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .saop-grid-main { grid-template-columns: 1fr; }
    .saop-side-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .saop-grid-4,
    .saop-grid-3,
    .saop-grid-2,
    .saop-side-col,
    .saop-ws-cards {
        grid-template-columns: 1fr;
    }
    .saop-metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .saop-filterbar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .dashboard-main:has(.saop-shell) {
        padding: .75rem;
    }
    .saop-header {
        flex-direction: column;
    }
    .saop-metric-strip {
        grid-template-columns: 1fr;
    }
    .saop-kv-grid {
        grid-template-columns: 1fr;
    }
}



.ops2-ws-central-config {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    border-radius: 14px;
    padding: .85rem;
    margin: .85rem 0;
}
.ops2-ws-central-config h4 {
    margin: 0 0 .35rem;
    color: #1e3a8a;
    font-size: .95rem;
}
.ops2-ws-config-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .45rem;
    margin-top: .7rem;
}
.ops2-ws-config-grid code {
    display: block;
    background: rgba(255,255,255,.8);
    border: 1px solid #dbeafe;
    border-radius: 10px;
    padding: .5rem .6rem;
    color: #0f172a;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .76rem;
}




.dashboard-home-shell.superadmin-dashboard-parity {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-card, 0 10px 30px rgba(15,23,42,.06));
}

.superadmin-dashboard.superadmin-dashboard-parity {
    max-width: none !important;
    margin: 0 !important;
}

.superadmin-dashboard-parity .dashboard-header,
.superadmin-parity-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.superadmin-dashboard-parity .dashboard-header h1 {
    font-size: 1.45rem;
    line-height: 1.1;
    margin: 0 0 .45rem;
    color: var(--foreground);
}

.superadmin-dashboard-parity .dashboard-header .subtitle {
    font-size: .875rem;
    color: var(--muted-foreground);
    margin: 0;
}

.superadmin-refresh-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
    flex-wrap: wrap;
}

.superadmin-refresh-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .65rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--background);
    color: var(--foreground);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

.superadmin-refresh-controls select {
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    color: var(--foreground);
    padding: 0 .55rem;
}

.superadmin-ops-parity {
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.superadmin-ops-parity .saop-header {
    display: none;
}

.superadmin-ops-parity .saop-metric-strip,
.superadmin-dashboard-parity .metrics-grid,
.superadmin-ops-parity .saop-grid {
    width: 100%;
}

.superadmin-ops-parity .saop-metric-strip {
    grid-template-columns: repeat(5, minmax(160px, 1fr));
}

.superadmin-ops-parity .saop-grid-main {
    grid-template-columns: minmax(0, 1fr) 340px;
}

.superadmin-ops-parity .saop-panel,
.superadmin-ops-parity .saop-info-card,
.superadmin-ops-parity .saop-metric,
.superadmin-dashboard-parity .tenants-section,
.superadmin-dashboard-parity .tenants-table-container {
    border-radius: var(--radius-lg, 14px);
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,.05));
}

.superadmin-dashboard-parity .tenants-section {
    padding: 1.1rem;
}

.superadmin-dashboard-parity .tenants-section + .tenants-section {
    margin-top: 1rem;
}

.superadmin-dashboard-parity .section-header {
    margin-bottom: 1rem;
}

.superadmin-dashboard-parity .section-header h2 {
    font-size: 1.15rem;
}

.superadmin-organizations-metrics {
    margin-bottom: 1rem;
}

.dashboard-layout:not(.gcf-admin-shell) #gcf-main-sidebar .nav-submenu-dashboard-admin .nav-subitem .nav-label {
    white-space: nowrap;
}

@media (max-width: 1500px) {
    .superadmin-ops-parity .saop-metric-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .superadmin-ops-parity .saop-grid-main {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .superadmin-parity-header {
        flex-direction: column;
        align-items: stretch;
    }
    .superadmin-refresh-controls {
        justify-content: flex-start;
    }
    .superadmin-ops-parity .saop-metric-strip {
        grid-template-columns: 1fr;
    }
}


.dashboard-home-shell.superadmin-dashboard-parity {
  padding: 1.25rem !important;
  background: var(--card) !important;
}
.superadmin-dashboard-parity .ops2-shell,
.superadmin-dashboard-parity .settings-section-block {
  width: 100%;
  max-width: none;
  margin: 0 0 1.25rem 0;
}
.superadmin-dashboard-parity .ops2-toolbar,
.settings-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  background: var(--card);
  box-shadow: var(--shadow-card, 0 10px 24px rgba(15, 23, 42, .055));
  margin-bottom: 1rem;
}
.settings-section-header.compact { padding: .85rem 1rem; }
.settings-section-header h2,
.settings-section-header h3 {
  margin: 0 0 .35rem;
  font-size: 1.1rem;
  color: var(--foreground);
}
.settings-section-header p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: .84rem;
}
.settings-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
  flex-wrap: wrap;
}
.settings-message {
  display: inline-flex;
  align-items: center;
  padding: .35rem .55rem;
  border-radius: 999px;
  background: hsl(214 100% 97%);
  color: var(--primary);
  border: 1px solid hsl(214 95% 90%);
  font-size: .78rem;
  font-weight: 700;
}
.settings-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.settings-card,
.settings-card-wide {
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  border-radius: var(--radius-lg, 14px) !important;
  padding: 1rem !important;
  box-shadow: var(--shadow-card, 0 10px 24px rgba(15, 23, 42, .055)) !important;
}
.settings-card-wide { margin-top: 1rem; }
.settings-card h3,
.settings-card-wide h3 {
  margin: 0 0 .35rem;
  font-size: 1rem;
  color: var(--foreground);
}
.settings-card p,
.settings-card-wide p {
  margin: 0 0 .85rem;
  color: var(--muted-foreground);
  font-size: .82rem;
}

/* Super Admin-specific ops2/gz-setting controls are intentionally governed
 * only by admin-tabler.css. Keeping their former !important rules here caused
 * the 2.27.9.14 Storage/Settings cascade regressions. */

.storage-policy-grid,
.tenant-modal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
}
.storage-governance-dashboard .saop-panel,
.tenant-storage-tab .saop-panel {
  margin-top: 1rem;
}
.saop-chart-line {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: .7rem;
}
.saop-chart-line svg {
  width: 100%;
  height: 96px;
  background: linear-gradient(180deg, hsl(214 100% 98%), hsl(0 0% 100%));
  border: 1px solid var(--border);
  border-radius: 12px;
}
.saop-chart-line path {
  fill: none;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.saop-chart-line .line-1 { stroke: var(--primary); }
.saop-chart-line .line-2 { stroke: var(--success); }
.saop-chart-line .line-3 { stroke: var(--warning); }
.saop-chart-legend,
.saop-donut-legend {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  color: var(--muted-foreground);
  font-size: .78rem;
  font-weight: 700;
}
.saop-horizontal-chart {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: .75rem;
}
.saop-hbar-row {
  display: grid;
  grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) 92px;
  gap: .7rem;
  align-items: center;
  font-size: .78rem;
}
.saop-hbar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--foreground);
  font-weight: 700;
}
.saop-hbar-track {
  height: 9px;
  border-radius: 999px;
  background: hsl(214 32% 92%);
  overflow: hidden;
}
.saop-hbar-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
}
.saop-hbar-row strong {
  color: var(--foreground);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.saop-donut-wrap {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}
.saop-donut {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  position: relative;
  box-shadow: inset 0 0 0 1px var(--border);
}
.saop-donut:after {
  content: '';
  position: absolute;
  inset: 27px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
}
:root {
  --chart-1: hsl(221 83% 53%);
  --chart-2: hsl(142 71% 45%);
  --chart-3: hsl(38 92% 50%);
  --chart-4: hsl(271 91% 65%);
  --chart-5: hsl(0 84% 60%);
  --chart-6: hsl(188 94% 43%);
}
.saop-donut-legend {
  flex-direction: column;
  gap: .4rem;
}
.saop-donut-legend div {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: .45rem;
  align-items: center;
}
.saop-donut-legend .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}
.dot-1 { background: var(--chart-1); }
.dot-2 { background: var(--chart-2); }
.dot-3 { background: var(--chart-3); }
.dot-4 { background: var(--chart-4); }
.dot-5 { background: var(--chart-5); }
.dot-6 { background: var(--chart-6); }
.tenant-details-modal.modal-xl {
  width: min(1180px, calc(100vw - 48px));
  max-width: 1180px;
}
.tenant-tabs {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  padding: .8rem 1rem 0;
  border-bottom: 1px solid var(--border);
}
.tenant-tab {
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  border-radius: 999px;
  padding: .45rem .75rem;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}
.tenant-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground, white);
}
.tenant-storage-tab .settings-card-grid {
  margin: 1rem 0;
}
@media (max-width: 1200px) {
  .settings-card-grid,
  .superadmin-dashboard-parity .ops2-grid,
  .storage-policy-grid,
  .tenant-modal-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 760px) {
  .settings-card-grid,
  .superadmin-dashboard-parity .ops2-grid,
  .storage-policy-grid,
  .tenant-modal-grid,
  .saop-donut-wrap {
    grid-template-columns: 1fr;
  }
  .saop-hbar-row { grid-template-columns: 1fr; }
}



.tenant-storage-policy-section .settings-section-header.compact {
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border);
}
.tenant-storage-policy-grid {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
}
.tenant-storage-policy-field input {
    width: 100%;
}
.tenant-storage-policy-field small,
.tenant-storage-policy-toggle small {
    display: block;
    margin-top: .25rem;
    color: var(--muted-foreground);
    font-size: .76rem;
    line-height: 1.3;
}
.tenant-storage-policy-modules {
    margin-top: .85rem;
    padding: .75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--background);
    color: var(--muted-foreground);
    font-size: .86rem;
}
@media (max-width: 1100px) {
    .tenant-storage-policy-grid { grid-template-columns: 1fr; }
}




.organization-form-page {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.org-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.org-form-header h2 {
    margin: .7rem 0 .35rem;
    font-size: 1.55rem;
    letter-spacing: -0.02em;
}

.org-form-header p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: .9rem;
}

.org-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
    flex-wrap: wrap;
}

.org-form-steps {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.org-form-steps span {
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--muted-foreground);
    border-radius: 999px;
    padding: .4rem .7rem;
    font-size: .82rem;
    font-weight: 700;
}

.org-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.org-card {
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: var(--radius-lg, 14px);
    padding: 1rem;
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,.05));
}

.org-card-span-2 {
    grid-column: span 2;
}

.org-card h3 {
    margin: 0 0 .9rem;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.org-card h4 {
    margin: 0 0 .75rem;
    font-size: .92rem;
    color: var(--foreground);
}

.org-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
}

.org-storage-summary {
    color: var(--muted-foreground);
    border: 1px solid var(--border);
    background: var(--background);
    border-radius: 999px;
    padding: .35rem .65rem;
    font-size: .78rem;
    font-weight: 700;
}

.org-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

.org-form-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    color: var(--foreground);
    font-weight: 700;
    font-size: .86rem;
}

.org-form-field input,
.org-form-field select {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--background);
    color: var(--foreground);
    padding: .65rem .75rem;
    font: inherit;
}

.org-form-field input:disabled {
    opacity: .75;
    cursor: not-allowed;
}

.org-form-field small {
    font-weight: 500;
    color: var(--muted-foreground);
    line-height: 1.35;
}

.org-inline-check,
.org-toggle-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    border: 1px solid var(--border);
    background: var(--background);
    border-radius: 12px;
    padding: .65rem .75rem;
    color: var(--foreground);
    font-weight: 700;
}

.org-inline-check input,
.org-toggle-row input {
    width: 16px;
    height: 16px;
    min-height: 16px;
    flex: 0 0 auto;
}

.org-note {
    margin-top: .9rem;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--muted-foreground);
    border-radius: 12px;
    padding: .7rem .85rem;
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    font-size: .85rem;
}

.org-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .65rem;
}

.org-module-tile {
    display: flex;
    align-items: center;
    gap: .55rem;
    border: 1px solid var(--border);
    background: var(--background);
    border-radius: 12px;
    padding: .75rem;
    cursor: pointer;
    font-weight: 700;
}

.org-module-tile.active {
    border-color: hsl(221 83% 53% / .45);
    background: hsl(221 83% 53% / .08);
    color: var(--primary);
}

.org-size-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px;
    gap: .5rem;
    align-items: center;
}

.org-input-suffix {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--background);
    color: var(--muted-foreground);
    padding: 0 .65rem;
    font-size: .82rem;
}

.org-storage-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
}

.org-storage-column {
    border: 1px solid var(--border);
    background: var(--background);
    border-radius: 14px;
    padding: .9rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.org-review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}

@media (max-width: 1100px) {
    .org-form-grid,
    .org-field-grid,
    .org-storage-layout,
    .org-review-grid {
        grid-template-columns: 1fr;
    }
    .org-card-span-2 {
        grid-column: span 1;
    }
    .org-form-header {
        flex-direction: column;
    }
    .org-form-actions {
        justify-content: flex-start;
    }
}




.tenant-admin-dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.tenant-admin-dashboard-header h2 {
    margin: 0 0 .35rem;
    font-size: 1.55rem;
    letter-spacing: -0.02em;
}

.tenant-admin-dashboard-header p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: .92rem;
}

.tenant-admin-last-update {
    white-space: nowrap;
}

.tenant-admin-overview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tenant-admin-summary-card {
    border: 1px solid var(--border);
    background: linear-gradient(135deg, hsl(221 83% 53% / .08), var(--card));
    border-radius: 16px;
    padding: 1.1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.tenant-admin-summary-card h3 {
    margin: 0 0 .35rem;
    font-size: 1.25rem;
}

.tenant-admin-summary-card p {
    margin: 0;
    color: var(--muted-foreground);
}

.tenant-admin-summary-meta {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.tenant-admin-summary-meta span {
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--muted-foreground);
    border-radius: 999px;
    padding: .35rem .65rem;
    font-size: .78rem;
    font-weight: 700;
}

.tenant-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
}

.tenant-info-card {
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 14px;
    padding: .95rem;
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    min-width: 0;
}

.tenant-info-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: hsl(221 83% 53% / .1);
    color: var(--primary);
}

.tenant-info-card-icon.success {
    background: hsl(142 76% 36% / .1);
    color: hsl(142 76% 36%);
}

.tenant-info-card-icon.warning {
    background: hsl(38 92% 50% / .13);
    color: hsl(38 92% 42%);
}

.tenant-info-card-icon.purple {
    background: hsl(262 83% 58% / .12);
    color: hsl(262 83% 58%);
}

.tenant-info-card-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.tenant-info-card-label {
    color: var(--muted-foreground);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.tenant-info-card-value {
    font-size: 1.55rem;
    line-height: 1.1;
    color: var(--foreground);
}

.tenant-info-card small {
    color: var(--muted-foreground);
    font-size: .78rem;
}

.tenant-dashboard-panels {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.2fr;
    gap: .9rem;
    align-items: start;
}

.tenant-panel-card {
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 14px;
    padding: 1rem;
    min-width: 0;
}

.tenant-panel-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .9rem;
}

.tenant-panel-card-header h3 {
    margin: 0 0 .25rem;
    font-size: 1rem;
}

.tenant-panel-card-header p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: .82rem;
}

.tenant-storage-bar {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: var(--muted);
    overflow: hidden;
    margin: .85rem 0 .7rem;
}

.tenant-storage-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.tenant-storage-meta {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    color: var(--muted-foreground);
    font-size: .82rem;
    font-weight: 700;
}

.tenant-module-list,
.tenant-activity-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.tenant-module-row {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    border: 1px solid var(--border);
    background: var(--background);
    border-radius: 12px;
    padding: .75rem;
}

.tenant-module-row-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: hsl(221 83% 53% / .08);
    color: var(--primary);
    flex: 0 0 auto;
}

.tenant-module-row strong,
.tenant-activity-row strong {
    display: block;
    color: var(--foreground);
    font-size: .88rem;
}

.tenant-module-row small,
.tenant-activity-row small {
    display: block;
    color: var(--muted-foreground);
    font-size: .78rem;
    line-height: 1.35;
    margin-top: .15rem;
}

.tenant-activity-row {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--border);
}

.tenant-activity-row:last-child {
    border-bottom: 0;
}

.tenant-activity-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--primary);
    flex: 0 0 auto;
    margin-top: .3rem;
}

.tenant-activity-dot.storage {
    background: hsl(142 76% 36%);
}

.tenant-activity-dot.module {
    background: hsl(38 92% 50%);
}

.tenant-empty-state {
    color: var(--muted-foreground);
    margin: .5rem 0 0;
    font-size: .88rem;
}

@media (max-width: 1200px) {
    .tenant-info-grid,
    .tenant-dashboard-panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .tenant-admin-dashboard-header,
    .tenant-admin-summary-card {
        flex-direction: column;
    }
    .tenant-admin-summary-meta {
        justify-content: flex-start;
    }
    .tenant-info-grid,
    .tenant-dashboard-panels {
        grid-template-columns: 1fr;
    }
}


.dashboard-main:has(.superadmin-ops-parity) {
    padding: 1rem 1.25rem 1.25rem;
    background: #f8fafc;
    max-width: none;
}

.superadmin-ops-parity {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.superadmin-ops-parity .saop-grid,
.superadmin-ops-parity .saop-metric-strip,
.superadmin-ops-parity .saop-grid-main {
    margin-bottom: 1rem;
}

.superadmin-ops-parity .saop-grid:last-child,
.superadmin-ops-parity .saop-grid-main:last-child {
    margin-bottom: 0;
}

.saop-ws-cards-compact {
    margin-top: .85rem;
}

.saop-health-score {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
    border-radius: 14px;
    padding: .9rem 1rem;
    margin-bottom: .85rem;
    border: 1px solid #dbeafe;
    background: #eff6ff;
}

.saop-health-score strong {
    font-size: 2rem;
    line-height: 1;
    color: #0f172a;
    letter-spacing: -.04em;
}

.saop-health-score span {
    color: #475569;
    font-size: .82rem;
    font-weight: 800;
    text-align: right;
}

.saop-health-score-ok { border-color: #bbf7d0; background: #f0fdf4; }
.saop-health-score-warn { border-color: #fed7aa; background: #fff7ed; }
.saop-health-score-danger { border-color: #fecaca; background: #fef2f2; }

.saop-livebar {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1rem;
    border: 1px solid #bfdbfe;
    background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
    border-radius: 16px;
    padding: .95rem;
    margin-bottom: 1rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
}

.saop-livebar strong {
    display: block;
    color: #0f172a;
    font-size: 1rem;
    margin-bottom: .25rem;
}

.saop-livebar span {
    color: #64748b;
    font-size: .82rem;
}

.saop-livebar-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: .65rem;
    min-width: min(620px, 100%);
}

.saop-filterbar-3 {
    grid-template-columns: minmax(0, 1fr) 170px 170px;
    margin-bottom: 1rem;
}

.saop-filterbar-4 {
    grid-template-columns: minmax(0, 1fr) 150px 150px 120px;
    margin-bottom: 1rem;
}

.saop-dual-chart {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    margin-bottom: .9rem;
}

.saop-dual-row {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
}

.saop-dual-label {
    color: #334155;
    font-weight: 800;
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saop-dual-bars {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.saop-dual-bar {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 72px;
    gap: .45rem;
    align-items: center;
    font-size: .72rem;
    color: #64748b;
    font-weight: 800;
}

.saop-dual-bar i {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #2563eb;
}

.saop-dual-bar.idx i { background: #22c55e; }
.saop-dual-bar strong {
    text-align: right;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.saop-horizontal-chart + .saop-table-wrap,
.saop-dual-chart + .saop-table-wrap,
.saop-donut-wrap + .saop-kv-grid {
    margin-top: .95rem;
}

.saop-table td:nth-child(4),
.saop-table td:nth-child(8) {
    max-width: 420px;
    overflow-wrap: anywhere;
}

.saop-table td {
    line-height: 1.35;
}

.saop-panel-body > .saop-kv-grid + .saop-table-wrap,
.saop-panel-body > .saop-table-wrap + .saop-kv-grid {
    margin-top: .9rem;
}

@media (max-width: 1280px) {
    .saop-livebar {
        flex-direction: column;
    }
    .saop-livebar-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
    }
    .saop-filterbar-3,
    .saop-filterbar-4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .saop-livebar-metrics,
    .saop-dual-row {
        grid-template-columns: 1fr;
    }
    .saop-health-score {
        align-items: flex-start;
        flex-direction: column;
    }
    .saop-health-score span {
        text-align: left;
    }
}


.superadmin-dashboard-parity .superadmin-refresh-controls .btn {
    min-width: 92px;
    transition: none;
}
.superadmin-dashboard-parity .superadmin-refresh-controls .btn:disabled {
    opacity: .72;
    cursor: wait;
}
.superadmin-dashboard-parity .superadmin-refresh-controls .badge.info {
    min-width: 72px;
    text-align: center;
}
.superadmin-ops-parity .saop-actions-readonly {
    align-items: center;
}
.superadmin-ops-parity .saop-grid,
.superadmin-ops-parity .saop-grid-main,
.saop-traffic-board,
.saop-database-board,
.saop-storage-board,
.saop-infrastructure-board {
    gap: 1.15rem;
}
.saop-traffic-board,
.saop-database-board,
.saop-storage-board,
.saop-infrastructure-board {
    display: flex;
    flex-direction: column;
}
.superadmin-ops-parity .saop-grid,
.superadmin-ops-parity .saop-metric-strip,
.superadmin-ops-parity .saop-grid-main {
    margin-bottom: 0;
}
.superadmin-ops-parity .saop-main-col,
.superadmin-ops-parity .saop-side-col {
    gap: 1.15rem;
}
.superadmin-ops-parity .saop-panel {
    min-width: 0;
}
.superadmin-ops-parity .saop-panel-body {
    min-width: 0;
}
.superadmin-ops-parity .saop-panel-head {
    min-height: 68px;
}
.superadmin-ops-parity .saop-card-strip .saop-info-card,
.superadmin-ops-parity .saop-metric-strip .saop-metric {
    min-height: 104px;
}
.saop-chart-dashboard-row .saop-panel-body,
.saop-storage-chart-grid .saop-panel-body {
    min-height: 210px;
}
.saop-database-board .saop-horizontal-chart,
.saop-storage-board .saop-horizontal-chart {
    margin-top: .25rem;
}
.saop-horizontal-chart {
    gap: .72rem;
}
.saop-hbar-row {
    grid-template-columns: minmax(145px, 240px) minmax(0, 1fr) 100px;
    gap: .85rem;
}
.saop-hbar-track {
    height: 11px;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.03);
}
.saop-hbar-track i {
    min-width: 6px;
}
.saop-dual-chart {
    gap: .95rem;
}
.saop-dual-row {
    grid-template-columns: minmax(190px, 280px) minmax(0, 1fr);
    padding: .35rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.saop-dual-row:last-child {
    border-bottom: 0;
}
.saop-dual-bar {
    grid-template-columns: 38px minmax(0, 1fr) 90px;
}
.saop-dual-bar i {
    height: 8px;
    min-width: 6px;
}
.saop-donut-wrap {
    min-height: 150px;
}
.saop-empty-state {
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    padding: 1rem;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.saop-empty-state strong {
    color: #0f172a;
    font-size: .92rem;
}
.saop-empty-state span {
    color: #64748b;
    font-size: .82rem;
    line-height: 1.45;
}
.saop-kv-grid-compact {
    margin-top: 1rem;
}
.saop-mini-bars-tight {
    margin-top: 1rem;
}
.saop-traffic-board .saop-livebar,
.saop-traffic-board .saop-filterbar,
.saop-traffic-board .saop-grid,
.saop-traffic-board > .saop-panel {
    margin-bottom: 0;
}
.saop-traffic-board .saop-grid + .saop-panel,
.saop-traffic-board .saop-panel + .saop-grid,
.saop-traffic-board .saop-filterbar + .saop-grid {
    margin-top: 0;
}
.saop-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
.saop-table {
    min-width: 680px;
}
.saop-storage-board .saop-table {
    min-width: 720px;
}
.saop-database-board .saop-table {
    min-width: 620px;
}
.storage-policy-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.saop-storage-chart-grid {
    grid-template-columns: 1.05fr .85fr 1.1fr;
}
.saop-overview-board .saop-panel-body > .saop-chart-line,
.saop-infrastructure-board > .saop-panel .saop-chart-line {
    margin-top: 0;
}
.saop-infrastructure-board > .saop-panel:first-of-type .saop-panel-body {
    padding-top: .95rem;
}
@media (max-width: 1500px) {
    .saop-storage-chart-grid {
        grid-template-columns: 1fr;
    }
    .saop-hbar-row,
    .saop-dual-row {
        grid-template-columns: minmax(135px, 210px) minmax(0, 1fr);
    }
}
@media (max-width: 900px) {
    .saop-hbar-row,
    .saop-dual-row,
    .saop-dual-bar,
    .storage-policy-grid-compact {
        grid-template-columns: 1fr;
    }
    .saop-hbar-row strong,
    .saop-dual-bar strong {
        text-align: left;
    }
}


.superadmin-ops-parity {
    gap: 1.25rem;
}
.superadmin-ops-parity .saop-header,
.superadmin-ops-parity .saop-metric-strip,
.superadmin-ops-parity .saop-grid-main,
.superadmin-ops-parity .saop-panel,
.superadmin-ops-parity .saop-info-card {
    min-width: 0;
}
.saop-section-stack {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    min-width: 0;
}
.saop-section-stack > .saop-panel,
.saop-section-stack > .saop-grid,
.saop-section-stack > .saop-info-card {
    margin: 0;
}
.superadmin-ops-parity .saop-panel-body > *:not(:last-child) {
    margin-bottom: 1rem;
}
.superadmin-ops-parity .saop-panel-body > .saop-table-wrap:last-child,
.superadmin-ops-parity .saop-panel-body > .saop-chart-line:last-child,
.superadmin-ops-parity .saop-panel-body > .saop-horizontal-chart:last-child,
.superadmin-ops-parity .saop-panel-body > .saop-dual-chart:last-child,
.superadmin-ops-parity .saop-panel-body > .saop-donut-wrap:last-child,
.superadmin-ops-parity .saop-panel-body > .saop-empty-state:last-child,
.superadmin-ops-parity .saop-panel-body > .saop-kv-grid:last-child,
.superadmin-ops-parity .saop-panel-body > .saop-ws-cards:last-child,
.superadmin-ops-parity .saop-panel-body > .saop-filterbar:last-child {
    margin-bottom: 0;
}
.saop-mode-overview .saop-main-col {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}
.saop-mode-overview .saop-overview-stack {
    width: 100%;
}
.saop-mode-overview .saop-main-col > .saop-grid,
.saop-mode-overview .saop-main-col > .saop-section-stack {
    margin: 0;
}
.saop-mode-overview .saop-panel .saop-table-wrap {
    max-height: 340px;
}
.saop-mode-overview .saop-panel .saop-table {
    min-width: 620px;
}
.saop-mode-infrastructure .saop-infrastructure-board,
.saop-mode-database .saop-database-board,
.saop-mode-traffic .saop-traffic-board,
.saop-mode-storage .saop-storage-board {
    gap: 1.25rem;
}
.saop-mode-database .saop-chart-dashboard-row,
.saop-mode-database .saop-database-bottom-row,
.saop-mode-traffic .saop-traffic-stack,
.saop-mode-storage .saop-storage-chart-grid,
.saop-mode-storage .saop-storage-data-row,
.saop-mode-storage .saop-storage-bottom-row {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    margin: 0;
}
.saop-mode-database .saop-chart-dashboard-row > .saop-panel,
.saop-mode-database .saop-database-bottom-row > .saop-panel,
.saop-mode-traffic .saop-traffic-stack > .saop-panel,
.saop-mode-storage .saop-storage-chart-grid > .saop-panel,
.saop-mode-storage .saop-storage-data-row > .saop-panel,
.saop-mode-storage .saop-storage-bottom-row > .saop-panel {
    width: 100%;
}
.saop-mode-database .saop-dual-chart,
.saop-mode-storage .saop-horizontal-chart,
.saop-mode-database .saop-horizontal-chart {
    max-width: 100%;
}
.saop-mode-websocket > .saop-panel > .saop-panel-body {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}
.saop-mode-websocket > .saop-panel > .saop-panel-body > * {
    margin-bottom: 0 !important;
}
.saop-mode-websocket .saop-ws-cards {
    margin: 0;
}
.saop-mode-websocket .saop-ws-live-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 1.15rem;
    margin: 0;
}
.saop-mode-websocket .saop-ws-admin-grid {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    margin: 0;
}
.saop-mode-websocket .saop-ws-admin-grid .saop-panel,
.saop-mode-websocket .saop-ws-live-grid .saop-panel {
    width: 100%;
}
.saop-mode-websocket .saop-filterbar {
    margin-bottom: 1rem;
}
.saop-mode-websocket .saop-table-wrap,
.saop-mode-traffic .saop-table-wrap,
.saop-mode-database .saop-table-wrap,
.saop-mode-storage .saop-table-wrap {
    background: #fff;
}
.saop-mode-websocket .saop-table,
.saop-mode-traffic .saop-table,
.saop-mode-database .saop-table,
.saop-mode-storage .saop-table {
    table-layout: fixed;
}
.saop-mode-websocket .saop-table td,
.saop-mode-traffic .saop-table td,
.saop-mode-database .saop-table td,
.saop-mode-storage .saop-table td {
    overflow-wrap: anywhere;
}
.saop-mode-storage .saop-storage-chart-grid .saop-panel-body,
.saop-mode-database .saop-chart-dashboard-row .saop-panel-body {
    min-height: 0;
}
.saop-mode-storage .saop-donut-wrap {
    max-width: 680px;
}
.saop-mode-security .saop-grid-2 {
    gap: 1.15rem;
}
@media (max-width: 1380px) {
    .saop-mode-websocket .saop-ws-live-grid,
    .saop-grid-4,
    .superadmin-ops-parity .saop-metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .saop-mode-websocket .saop-ws-live-grid,
    .saop-grid-4,
    .superadmin-ops-parity .saop-metric-strip,
    .saop-grid-main {
        grid-template-columns: 1fr;
    }
    .saop-section-stack {
        gap: 1rem;
    }
}
.saop-mode-websocket .saop-ws-live-grid > .saop-panel:first-child .saop-table { min-width: 760px; }
.saop-mode-websocket .saop-ws-live-grid > .saop-panel:last-child .saop-table { min-width: 420px; }
.saop-mode-websocket .saop-ws-admin-grid .saop-table { min-width: 520px; }
.saop-mode-websocket .saop-ws-live-grid .saop-panel-body,
.saop-mode-websocket .saop-ws-admin-grid .saop-panel-body {
    min-height: 0;
}


.gcf-notification-bell { position: relative; display: inline-flex; align-items: center; margin-right: .5rem; }
.gcf-bell-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); cursor: pointer; }
.gcf-bell-count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 11px; line-height: 18px; font-weight: 700; }
.gcf-notification-menu { position: absolute; top: 46px; right: 0; width: min(380px, calc(100vw - 24px)); max-height: 520px; overflow: auto; z-index: 3000; border: 1px solid var(--border); border-radius: 14px; background: var(--card); box-shadow: 0 20px 45px rgba(15,23,42,.18); padding: 10px; }
.gcf-notification-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.gcf-notification-actions { display: flex; gap: 6px; }
.gcf-notification-actions button, .gcf-notification-remove { border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; font-size: 12px; }
.gcf-notification-item { display: grid; grid-template-columns: 1fr 28px; gap: 4px; border-radius: 10px; padding: 6px; }
.gcf-notification-item.unread { background: rgba(59,130,246,.10); }
.gcf-notification-main { text-align: left; border: 0; background: transparent; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.gcf-notification-title { font-weight: 700; font-size: 13px; }
.gcf-notification-body, .gcf-notification-meta, .gcf-notification-empty, .gcf-notification-error { font-size: 12px; color: var(--muted-foreground); }
.gcf-notification-error { color: #b91c1c; padding: 8px; }
.gcf-notification-empty { padding: 16px 8px; }
.admin-notifications-page .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 14px; }
.admin-notifications-page label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.admin-notifications-page input, .admin-notifications-page select, .admin-notifications-page textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--background); color: var(--foreground); }
.admin-notifications-page .wide { grid-column: 1 / -1; }


.gcf-admin-notif-center .admin-card,
.sa-notif-center .settings-card { border-radius: 18px; box-shadow: 0 18px 45px rgba(15, 23, 42, .07); }
.gcf-admin-notif-hero { align-items: flex-start; gap: 18px; }
.gcf-admin-notif-actions,
.gcf-admin-notif-tabs,
.gcf-admin-notif-chiprow,
.gcf-admin-notif-searchline,
.gcf-admin-notif-previewbox,
.gcf-admin-notif-sendbar,
.gcf-admin-notif-history-head,
.sa-notif-searchline,
.sa-notif-chips,
.sa-notif-previewbar,
.sa-notif-history-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gcf-admin-notif-tabs { margin: 14px 0; }
.gcf-admin-notif-tabs button { border: 1px solid var(--border); background: var(--card); color: var(--foreground); border-radius: 999px; padding: 9px 16px; cursor: pointer; font-weight: 700; }
.gcf-admin-notif-tabs button.active { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground, #fff); }
.gcf-admin-notif-layout,
.sa-notif-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); gap: 18px; align-items: start; }
.gcf-admin-notif-card h2,
.sa-notif-center h3 { margin-top: 0; }
.gcf-admin-notif-modegrid,
.sa-notif-modegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 12px 0 16px; }
.gcf-admin-notif-modegrid button,
.sa-notif-modegrid button { border: 1px solid var(--border); background: var(--background); color: var(--foreground); border-radius: 14px; padding: 12px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: 78px; }
.gcf-admin-notif-modegrid button span,
.sa-notif-modegrid button span { font-size: 12px; color: var(--muted-foreground); line-height: 1.35; }
.gcf-admin-notif-modegrid button.active,
.sa-notif-modegrid button.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, .14); background: rgba(59, 130, 246, .08); }
.gcf-admin-notif-picker,
.sa-notif-selector { border: 1px dashed var(--border); border-radius: 16px; padding: 12px; margin: 12px 0; background: rgba(148, 163, 184, .06); }
.gcf-admin-notif-searchline input,
.sa-notif-searchline input,
.sa-notif-history-head input { flex: 1; min-width: 220px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--background); color: var(--foreground); }
.gcf-admin-notif-chiprow,
.sa-notif-chips { margin: 10px 0; }
.gcf-admin-notif-chip,
.sa-notif-chip { border: 0; border-radius: 999px; padding: 7px 10px 7px 12px; background: rgba(59, 130, 246, .12); color: var(--foreground); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.gcf-admin-notif-chip strong,
.sa-notif-chip b { color: #b91c1c; }
.gcf-admin-notif-options,
.sa-notif-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-top: 10px; }
.gcf-admin-notif-option,
.sa-notif-option { border: 1px solid var(--border); border-radius: 12px; padding: 10px; text-align: left; background: var(--card); color: var(--foreground); cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.gcf-admin-notif-option span,
.sa-notif-option span { font-size: 12px; color: var(--muted-foreground); }
.gcf-admin-notif-option.selected,
.sa-notif-option.selected { opacity: .55; cursor: default; }
.gcf-admin-notif-previewbox,
.sa-notif-previewbar { justify-content: space-between; border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px; }
.gcf-admin-notif-previewbox p,
.sa-notif-previewbar p { margin: 4px 0 0; }
.gcf-admin-notif-preview-result,
.sa-notif-preview-result { border: 1px solid rgba(34, 197, 94, .32); background: rgba(34, 197, 94, .08); border-radius: 16px; padding: 12px; margin-top: 12px; }
.gcf-admin-notif-preview-result ul { margin: 10px 0 0; padding-left: 18px; }
.gcf-admin-notif-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 9px; font-size: 12px; font-weight: 700; background: rgba(148, 163, 184, .18); color: var(--foreground); margin: 2px 4px 2px 0; }
.gcf-admin-notif-badge.blue { background: rgba(59, 130, 246, .15); }
.gcf-admin-notif-badge.green,
.gcf-admin-notif-badge.success { background: rgba(34, 197, 94, .15); }
.gcf-admin-notif-badge.warning { background: rgba(245, 158, 11, .16); }
.gcf-admin-notif-badge.critical,
.gcf-admin-notif-badge.danger { background: rgba(239, 68, 68, .16); }
.gcf-admin-notif-table td { vertical-align: top; }
.gcf-admin-notif-hint { margin: 8px 0; }
.gcf-admin-notif-modulepick,
.sa-notif-modulepick { display: flex; flex-direction: column; gap: 6px; font-weight: 700; margin: 12px 0; }
.gcf-admin-notif-modulepick select,
.sa-notif-modulepick select { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--background); color: var(--foreground); }
.sa-notif-grid .settings-card-wide { grid-column: 1 / -1; }
.sa-notif-broadcast-warning { border-radius: 14px; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .3); padding: 12px; color: var(--foreground); }
.sa-notif-tenant-preview-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-top: 10px; }
.sa-notif-tenant-preview-list > div { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 8px; }
@media (max-width: 980px) {
  .gcf-admin-notif-layout,
  .sa-notif-grid { grid-template-columns: 1fr; }
}


.admin-notifications-page.gcf-admin-notif-fullwidth {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 1.5rem clamp(1rem, 2vw, 2rem);
}
.gcf-admin-notif-compose-grid,
.sa-notif-compose-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, .55fr);
    gap: 1.25rem;
    align-items: start;
    width: 100%;
}
.gcf-admin-notif-message-card,
.sa-notif-message-card,
.gcf-admin-notif-history-card,
.sa-notif-history-card {
    width: 100%;
}
.gcf-admin-notif-card-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.gcf-admin-notif-card-title h2 { margin: 0; }
.gcf-admin-notif-card-title span { color: var(--muted-foreground); font-size: .875rem; }
.gcf-admin-notif-meta-grid,
.sa-notif-meta-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
}
.gcf-admin-notif-editor-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    gap: 1rem;
    align-items: stretch;
}
.gcf-admin-notif-editor {
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--card);
}
.gcf-admin-notif-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .65rem;
    border-bottom: 1px solid var(--border);
    background: rgba(148, 163, 184, .08);
}
.gcf-admin-notif-editor-toolbar button {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .42rem .65rem;
    background: var(--background);
    color: var(--foreground);
    cursor: pointer;
    font-weight: 700;
}
.gcf-admin-notif-editor textarea,
.sa-notif-editor textarea,
.admin-notifications-page .gcf-admin-notif-editor textarea {
    min-height: 300px;
    border: 0;
    border-radius: 0;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    line-height: 1.55;
}
.gcf-admin-notif-editor-help {
    border-top: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: .78rem;
    padding: .55rem .75rem;
    background: rgba(148, 163, 184, .06);
}
.gcf-admin-notif-live-preview {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1rem;
    background: var(--background);
    min-height: 100%;
}
.gcf-admin-notif-rich-preview,
.gcf-notification-rich {
    color: var(--foreground);
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.gcf-admin-notif-rich-preview p,
.gcf-notification-rich p { margin: .35rem 0; }
.gcf-admin-notif-rich-preview ul,
.gcf-notification-rich ul { margin: .35rem 0 .35rem 1.1rem; padding: 0; }
.gcf-admin-notif-rich-preview h4,
.gcf-notification-rich-heading { display: block; margin: .55rem 0 .35rem; font-size: .95rem; font-weight: 800; }
.gcf-admin-notif-rich-preview a,
.gcf-notification-rich a { color: var(--primary); text-decoration: underline; }
.gcf-admin-notif-rich-preview.compact { font-size: .87rem; color: var(--muted-foreground); max-width: 760px; }
.gcf-admin-notif-rich-preview.compact p { margin: .2rem 0; }
.gcf-notification-rich { font-size: 12px; color: var(--muted-foreground); }
.gcf-notification-rich p { margin: 0 0 .25rem; }
.gcf-notification-rich ul { margin: .1rem 0 .1rem 1rem; }
.sa-notif-fullwidth { width: 100%; max-width: none; }
.sa-notif-center .section-header { align-items: flex-start; }
.sa-notif-target-card h3 + .sa-notif-modegrid { margin-top: .6rem; }
@media (max-width: 1180px) {
    .gcf-admin-notif-compose-grid,
    .sa-notif-compose-grid,
    .gcf-admin-notif-editor-preview-grid {
        grid-template-columns: 1fr;
    }
    .gcf-admin-notif-meta-grid,
    .sa-notif-meta-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
    }
}
@media (max-width: 680px) {
    .gcf-admin-notif-meta-grid,
    .sa-notif-meta-grid {
        grid-template-columns: 1fr !important;
    }
}


.dashboard-main:has(.admin-notifications-page.gcf-admin-notif-fullwidth) {
    padding: 1rem 1.25rem;
}
.admin-notifications-page.gcf-admin-notif-fullwidth {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.gcf-admin-notif-shell {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.gcf-admin-notif-hero-card,
.gcf-admin-notif-statbar,
.gcf-admin-notif-card,
.sa-notif-center .settings-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 18px 50px rgba(15, 23, 42, .06);
}
.gcf-admin-notif-hero-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(255,255,255,0) 45%), var(--card);
}
.gcf-admin-notif-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .25rem .55rem;
    color: var(--muted-foreground);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .55rem;
}
.gcf-admin-notif-hero-card h1 {
    margin: 0;
    font-size: clamp(1.55rem, 2vw, 2.15rem);
    line-height: 1.08;
}
.gcf-admin-notif-hero-card p { margin: .45rem 0 0; color: var(--muted-foreground); }
.gcf-admin-notif-hero-actions { display: inline-flex; gap: .65rem; flex-wrap: wrap; justify-content: flex-end; }
.gcf-admin-notif-statbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    background: var(--border);
}
.gcf-admin-notif-statbar > div {
    background: var(--card);
    padding: .9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.gcf-admin-notif-statbar strong { font-size: 1rem; }
.gcf-admin-notif-statbar span { color: var(--muted-foreground); font-size: .82rem; }
.gcf-admin-notif-alert { margin: 0; }
.gcf-admin-notif-tabs {
    margin: 0;
    padding: .25rem;
    width: fit-content;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(148, 163, 184, .08);
}
.gcf-admin-notif-tabs button {
    border: 0;
    background: transparent;
    min-width: 96px;
}
.gcf-admin-notif-tabs button.active {
    background: var(--primary);
    color: var(--primary-foreground, #fff);
    box-shadow: 0 8px 22px rgba(37, 99, 235, .24);
}
.gcf-admin-notif-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
    gap: 1rem;
    align-items: start;
    width: 100%;
}
.gcf-admin-notif-maincolumn,
.gcf-admin-notif-sidecolumn { min-width: 0; }
.gcf-admin-notif-card { padding: 1rem; }
.gcf-admin-notif-card-title {
    border-bottom: 1px solid var(--border);
    padding-bottom: .85rem;
    margin-bottom: 1rem;
}
.gcf-admin-notif-card-title h2 { font-size: 1.2rem; letter-spacing: -.02em; }
.gcf-admin-notif-card-title span { display: block; margin-top: .2rem; }
.gcf-admin-notif-section-label { display: block; font-weight: 800; margin-bottom: .45rem; }
.gcf-admin-notif-meta-grid,
.sa-notif-meta-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .85rem !important;
}
.admin-notifications-page label { gap: .42rem; }
.admin-notifications-page input,
.admin-notifications-page select,
.admin-notifications-page textarea {
    border-radius: 12px;
    min-height: 42px;
}
.gcf-admin-notif-editor-preview-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
    gap: 1rem;
    margin-top: 1rem;
}
.gcf-admin-notif-editor-pro {
    min-height: 430px;
}
.gcf-admin-notif-editor textarea,
.admin-notifications-page .gcf-admin-notif-editor textarea {
    min-height: 345px;
    font-size: .92rem;
}
.gcf-admin-notif-live-preview {
    min-height: 430px;
    background: linear-gradient(180deg, rgba(148,163,184,.08), rgba(255,255,255,0) 38%), var(--background);
}
.gcf-admin-notif-preview-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: .75rem;
    margin-bottom: .75rem;
}
.gcf-admin-notif-preview-title span {
    border-radius: 999px;
    background: rgba(59, 130, 246, .12);
    padding: .25rem .55rem;
    color: var(--muted-foreground);
    font-size: .78rem;
    font-weight: 800;
}
.gcf-admin-notif-modegrid {
    grid-template-columns: 1fr;
    gap: .65rem;
}
.gcf-admin-notif-modegrid button {
    border-radius: 14px;
    min-height: auto;
    padding: .8rem .9rem;
    background: var(--background);
}
.gcf-admin-notif-modegrid button.active {
    background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(37,99,235,.04));
}
.gcf-admin-notif-picker,
.gcf-admin-notif-previewbox,
.gcf-admin-notif-preview-result,
.gcf-admin-notif-preview-empty,
.gcf-admin-notif-sendbar {
    border-radius: 14px;
}
.gcf-admin-notif-preview-empty {
    margin-top: .8rem;
    border: 1px dashed var(--border);
    background: rgba(148, 163, 184, .06);
    color: var(--muted-foreground);
    padding: .85rem;
    font-size: .9rem;
}
.gcf-admin-notif-preview-result.warning {
    border-color: rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .1);
}
.gcf-admin-notif-sendbar {
    justify-content: stretch;
    margin-top: .85rem;
}
.gcf-admin-notif-sendbar .btn { width: 100%; justify-content: center; }
.gcf-admin-notif-history-card { width: 100%; }
.gcf-admin-notif-history-head { justify-content: space-between; }
.gcf-admin-notif-history-head h2 { margin: 0; }
.gcf-admin-notif-filters {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    margin-top: .5rem;
}
.gcf-admin-notif-table { width: 100%; }
.gcf-admin-notif-table th,
.gcf-admin-notif-table td { padding: .85rem; }
.sa-notif-fullwidth {
    width: 100% !important;
    max-width: none !important;
}
.sa-notif-compose-grid {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 440px) !important;
    gap: 1rem !important;
}
.sa-notif-center .section-header,
.sa-notif-center .settings-card {
    border-radius: 18px;
}
.sa-notif-center .settings-card { padding: 1rem; }
@media (max-width: 1280px) {
    .gcf-admin-notif-workspace,
    .sa-notif-compose-grid,
    .gcf-admin-notif-editor-preview-grid {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 820px) {
    .dashboard-main:has(.admin-notifications-page.gcf-admin-notif-fullwidth) { padding: .75rem; }
    .gcf-admin-notif-hero-card { flex-direction: column; }
    .gcf-admin-notif-statbar,
    .gcf-admin-notif-meta-grid,
    .sa-notif-meta-grid,
    .gcf-admin-notif-filters { grid-template-columns: 1fr !important; }
    .gcf-admin-notif-tabs { width: 100%; }
    .gcf-admin-notif-tabs button { flex: 1; }
}


.core-user-dashboard-shell,
.dashboard-home-shell .tenant-admin-overview-v2242 {
    width: 100%;
    max-width: none;
}

.core-dashboard-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 28px;
    margin: 0 0 24px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(37, 99, 235, .11), rgba(15, 23, 42, .02)), #fff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
}
.core-dashboard-hero h1,
.core-dashboard-hero h2 {
    margin: 6px 0 8px;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #0f172a;
}
.core-dashboard-hero p { margin: 0; color: #475569; font-size: 15px; max-width: 780px; }
.core-eyebrow { color: #2563eb; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.core-hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

.core-metric-grid,
.tenant-admin-analytics-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.core-dash-card {
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 42px rgba(15, 23, 42, .06);
}
.core-metric-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 116px;
    padding: 18px;
}
.core-metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: #2563eb;
    background: rgba(37, 99, 235, .10);
}
.core-metric-card.warning .core-metric-icon { color: #b45309; background: rgba(245, 158, 11, .13); }
.core-metric-card.danger .core-metric-icon { color: #dc2626; background: rgba(239, 68, 68, .12); }
.core-metric-card.success .core-metric-icon { color: #16a34a; background: rgba(34, 197, 94, .12); }
.core-metric-card.purple .core-metric-icon { color: #7c3aed; background: rgba(124, 58, 237, .12); }
.core-metric-label { display: block; font-size: 12px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }
.core-metric-value { display: block; margin-top: 2px; font-size: 30px; line-height: 1; color: #0f172a; letter-spacing: -0.04em; }
.core-metric-card small { display: block; margin-top: 5px; color: #64748b; }

.core-user-workspace-grid,
.tenant-admin-dashboard-grid-v2242 {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(340px, .85fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}
.core-user-main-column,
.core-user-side-column { display: grid; gap: 18px; }
.core-dash-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px 0;
}
.core-dash-card-head h3 { margin: 0; font-size: 18px; color: #0f172a; letter-spacing: -0.02em; }
.core-dash-card-head p { margin: 5px 0 0; color: #64748b; font-size: 13px; }
.core-dash-chart-card,
.core-list-card,
.core-calendar-card,
.core-quick-actions-card,
.core-module-strip { padding-bottom: 18px; }

.core-mini-bars {
    height: 170px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 22px 20px 0;
}
.core-mini-bar-wrap { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 10px; }
.core-mini-bar { display: block; width: 100%; min-height: 8px; border-radius: 999px 999px 4px 4px; background: linear-gradient(180deg, #2563eb, #60a5fa); box-shadow: inset 0 -8px 14px rgba(15, 23, 42, .10); }

.core-list-stack,
.core-calendar-list { display: grid; gap: 10px; padding: 16px 18px 0; }
.core-list-row,
.core-calendar-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 14px;
    background: #f8fafc;
    text-align: left;
    color: #0f172a;
    cursor: pointer;
}
.core-list-row:disabled,
.core-calendar-row:disabled { cursor: default; }
.core-list-row:hover:not(:disabled),
.core-calendar-row:hover:not(:disabled) { border-color: rgba(37, 99, 235, .36); background: #eff6ff; }
.core-list-dot { width: 10px; height: 10px; border-radius: 999px; background: #2563eb; flex: 0 0 auto; }
.core-list-dot.labs { background: #7c3aed; }
.core-list-row.warning .core-list-dot { background: #f59e0b; }
.core-list-row.danger .core-list-dot { background: #ef4444; }
.core-list-body { min-width: 0; flex: 1; }
.core-list-body strong { display: block; font-size: 14px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.core-list-body small { display: block; margin-top: 2px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.core-calendar-date { width: 56px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: #e0edff; color: #1d4ed8; font-weight: 800; font-size: 12px; text-transform: uppercase; }
.core-empty-muted { color: #64748b; padding: 14px 18px 0; margin: 0; }

.core-quick-actions-grid,
.core-module-strip-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 18px 0; }
.core-quick-action,
.core-module-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 14px;
    background: #f8fafc;
    padding: 10px 12px;
    color: #0f172a;
    font-weight: 700;
    cursor: pointer;
}
.core-quick-action:hover,
.core-module-chip:hover { border-color: rgba(37, 99, 235, .4); background: #eff6ff; color: #1d4ed8; }

.tenant-admin-overview-v2242 .tenant-dashboard-panels { margin-top: 18px; }

@media (max-width: 1280px) {
    .core-metric-grid,
    .tenant-admin-analytics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .core-user-workspace-grid,
    .tenant-admin-dashboard-grid-v2242 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .core-dashboard-hero { flex-direction: column; padding: 22px; }
    .core-metric-grid,
    .tenant-admin-analytics-grid { grid-template-columns: 1fr; }
    .core-mini-bars { height: 120px; }
}


.gcf-storage-shell { width: 100%; max-width: none; padding: 24px clamp(18px, 2.4vw, 36px); box-sizing: border-box; }
.gcf-storage-hero, .sa-storage-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 26px; border: 1px solid rgba(148,163,184,.25); border-radius: 24px; background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,41,59,.92)); color: #fff; box-shadow: 0 20px 55px rgba(15,23,42,.16); margin-bottom: 20px; }
.gcf-storage-hero h1, .gcf-storage-hero h2, .sa-storage-hero h2 { margin: 4px 0 8px; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.04em; }
.gcf-storage-hero p, .sa-storage-hero p { margin: 0; color: rgba(226,232,240,.86); max-width: 820px; }
.gcf-storage-eyebrow, .sa-storage-eyebrow { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; color: #93c5fd; font-weight: 800; }
.gcf-storage-hero-actions, .sa-storage-hero-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.gcf-storage-badge { display: inline-flex; border-radius: 999px; padding: 8px 13px; font-weight: 800; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); }
.gcf-storage-badge.ok { color: #bbf7d0; } .gcf-storage-badge.warn { color: #fde68a; } .gcf-storage-badge.danger { color: #fecaca; }
.gcf-storage-message, .sa-storage-warning, .gcf-storage-warning, .sa-storage-result, .labs-cleanup-result { border: 1px solid rgba(245,158,11,.35); background: rgba(245,158,11,.08); color: #92400e; border-radius: 14px; padding: 12px 14px; margin: 12px 0; font-weight: 700; }
.gcf-storage-statgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.gcf-storage-stat { text-align: left; border: 1px solid rgba(148,163,184,.28); background: #fff; border-radius: 20px; padding: 18px; display: flex; gap: 12px; align-items: center; box-shadow: 0 12px 32px rgba(15,23,42,.06); cursor: pointer; }
.gcf-storage-stat:hover { transform: translateY(-1px); border-color: rgba(59,130,246,.45); }
.gcf-storage-stat-icon { width: 44px; height: 44px; border-radius: 14px; background: rgba(59,130,246,.10); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.gcf-storage-stat-body { display: flex; flex-direction: column; gap: 3px; } .gcf-storage-stat-body small { color: #64748b; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; } .gcf-storage-stat-body strong { font-size: 1.45rem; color: #0f172a; } .gcf-storage-stat-body em { color: #64748b; font-style: normal; }
.gcf-storage-tabs, .sa-storage-tabs, .labs-storage-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; padding: 8px; border-radius: 18px; background: rgba(241,245,249,.85); border: 1px solid rgba(148,163,184,.24); }
.gcf-storage-tab, .sa-storage-tab, .labs-storage-tab { border: 0; border-radius: 14px; padding: 10px 14px; font-weight: 800; color: #475569; background: transparent; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.gcf-storage-tab.active, .sa-storage-tab.active, .labs-storage-tab.active { background: #fff; color: #1d4ed8; box-shadow: 0 8px 20px rgba(15,23,42,.08); }
.gcf-storage-section-grid, .labs-storage-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; align-items: start; }
.gcf-storage-section-grid .wide, .labs-storage-grid .span-2 { grid-column: 1 / -1; }
.gcf-storage-status-grid { align-items: stretch; }
.gcf-storage-status-grid > .gcf-storage-status-equal { height: 100%; min-height: 0; }
.gcf-storage-panel, .labs-widget-card, .sa-storage-shell .saop-panel { border-radius: 20px; border: 1px solid rgba(148,163,184,.25); background: #fff; box-shadow: 0 12px 30px rgba(15,23,42,.06); }
.gcf-storage-panel { padding: 18px; }
.gcf-storage-panel-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.gcf-storage-panel-head h3 { margin: 0 0 4px; color: #0f172a; } .gcf-storage-panel-head p { margin: 0; color: #64748b; }
.gcf-storage-formgrid, .sa-storage-cleanup-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.gcf-storage-formgrid.cleanup { grid-template-columns: repeat(3, minmax(0,1fr)); }
.gcf-storage-field, .sa-storage-field { display: flex; flex-direction: column; gap: 7px; font-weight: 800; color: #334155; }
.gcf-storage-field input, .gcf-storage-field select, .gcf-storage-field textarea, .sa-storage-field input, .sa-storage-field select { border: 1px solid rgba(148,163,184,.35); border-radius: 12px; padding: 10px 12px; background: #fff; color: #0f172a; }
.gcf-storage-field small { color: #64748b; font-weight: 500; }
.gcf-storage-project-catalog { display: flex; flex-direction: column; gap: 7px; min-width: 0; font-weight: 800; color: #334155; }
.gcf-storage-project-catalog-label { display: block; }
.gcf-storage-project-catalog input, .gcf-storage-project-catalog select { width: 100%; min-width: 0; border: 1px solid rgba(148,163,184,.35); border-radius: 12px; padding: 10px 12px; background: #fff; color: #0f172a; }
.gcf-storage-project-catalog-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.gcf-storage-project-catalog-meta small { color: #64748b; font-weight: 500; overflow-wrap: anywhere; }
.gcf-storage-project-catalog-pager { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.gcf-storage-project-catalog-pager .btn { padding: 5px 8px; font-size: .76rem; }
.gcf-storage-checkbox, .sa-storage-check label { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.gcf-storage-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.gcf-storage-barlist { display: grid; gap: 10px; }
.gcf-storage-barrow { display: grid; grid-template-columns: minmax(120px,1fr) 3fr auto; gap: 10px; align-items: center; border: 0; background: rgba(248,250,252,.9); border-radius: 12px; padding: 10px; text-align: left; cursor: pointer; }
.gcf-storage-barrow:hover { background: rgba(219,234,254,.75); }
.gcf-storage-bartrack { height: 10px; border-radius: 999px; background: #e2e8f0; overflow: hidden; } .gcf-storage-bartrack i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563eb, #14b8a6); }
.gcf-storage-tablewrap, .labs-storage-table { overflow: auto; border-radius: 14px; border: 1px solid rgba(148,163,184,.2); }
.gcf-storage-table, .labs-storage-table table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.gcf-storage-table th, .gcf-storage-table td, .labs-storage-table th, .labs-storage-table td { padding: 10px 12px; border-bottom: 1px solid rgba(226,232,240,.8); text-align: left; }
.gcf-storage-table th, .labs-storage-table th { background: #f8fafc; color: #475569; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.gcf-storage-empty { color: #64748b; margin: 0; }
.tenant-storage-card-clickable { width: 100%; color: inherit; cursor: pointer; text-align: left; }
.tenant-storage-card-clickable:hover { border-color: rgba(37,99,235,.45); transform: translateY(-1px); }
.core-dash-chart-card-interactive .core-chart-periods { display: flex; gap: 6px; }
.core-chart-periods button, .core-chart-legend button { border: 1px solid rgba(148,163,184,.28); background: #fff; border-radius: 999px; padding: 7px 10px; cursor: pointer; font-weight: 800; color: #475569; }
.core-chart-periods button.active { color: #1d4ed8; border-color: rgba(37,99,235,.45); background: rgba(219,234,254,.7); }
.core-chart-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.core-chart-legend button { display: inline-flex; align-items: center; gap: 7px; }
.core-chart-legend .dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; } .core-chart-legend .created { background: #2563eb; } .core-chart-legend .completed { background: #16a34a; } .core-chart-legend .activity { background: #f59e0b; }
.core-series-bars { height: 210px; display: flex; gap: 9px; align-items: stretch; padding: 10px 0; border-bottom: 1px solid rgba(226,232,240,.85); }
.core-series-day { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; border: 0; background: transparent; cursor: pointer; min-width: 24px; }
.core-series-stack { width: 100%; height: 170px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.core-series-segment { width: 28%; min-width: 6px; border: 0; border-radius: 999px 999px 3px 3px; color: transparent; cursor: pointer; }
.core-series-segment.created { background: #2563eb; } .core-series-segment.completed { background: #16a34a; } .core-series-segment.activity { background: #f59e0b; }
.core-series-day small { color: #64748b; font-weight: 700; font-size: .72rem; }
.core-chart-drilldown { margin-top: 12px; color: #475569; border-radius: 12px; background: #f8fafc; padding: 10px 12px; }
.labs-storage-shell { width: 100%; } .labs-storage-shell .card { padding: 18px; } .labs-storage-tabs { margin-bottom: 16px; }
.sa-storage-shell { width: 100%; } .sa-storage-section-stack { display: grid; gap: 16px; } .sa-storage-cleanup-grid { margin-bottom: 14px; }
@media (max-width: 1100px) { .gcf-storage-statgrid, .gcf-storage-section-grid, .labs-storage-grid { grid-template-columns: 1fr 1fr; } .gcf-storage-formgrid.cleanup, .sa-storage-cleanup-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .gcf-storage-hero, .sa-storage-hero { flex-direction: column; } .gcf-storage-statgrid, .gcf-storage-section-grid, .labs-storage-grid, .gcf-storage-formgrid, .gcf-storage-formgrid.cleanup, .sa-storage-cleanup-grid { grid-template-columns: 1fr; } .gcf-storage-barrow { grid-template-columns: 1fr; } .gcf-storage-project-catalog-meta { align-items: flex-start; flex-direction: column; } }


.core-chartjs-card .core-dash-card-head { padding-bottom: 4px; }
.core-chart-legend-clean { padding: 0 18px; margin: 8px 0 4px; }
.core-chart-legend-clean button { border-radius: 12px; background: #f8fafc; box-shadow: none; }
.core-chartjs-canvas-wrap { height: 280px; padding: 8px 18px 0; }
.core-chartjs-canvas-wrap canvas { width: 100% !important; height: 100% !important; }
.core-series-fallback-list { display: grid; gap: 8px; padding: 4px 0; }
.core-series-fallback-row { display: grid; grid-template-columns: 72px 56px 1fr; align-items: center; gap: 10px; width: 100%; border: 1px solid rgba(148, 163, 184, .22); border-radius: 12px; background: #f8fafc; color: #0f172a; padding: 10px 12px; text-align: left; cursor: pointer; }
.core-series-fallback-row:hover { border-color: rgba(37, 99, 235, .35); background: #eff6ff; }
.core-series-fallback-row span { color: #64748b; font-weight: 800; }
.core-series-fallback-row strong { color: #0f172a; }
.core-series-fallback-row small { color: #64748b; }
.tenant-admin-dashboard-grid-main { grid-template-columns: minmax(0, 1.7fr) minmax(340px, .85fr); align-items: start; }
.tenant-admin-primary-stack,
.tenant-admin-side-stack { display: grid; gap: 18px; align-content: start; }
.tenant-admin-side-stack .tenant-panel-card,
.tenant-admin-side-stack .core-list-card { width: 100%; }
.core-user-main-column,
.core-user-side-column { align-content: start; }
.core-user-workspace-grid { grid-template-columns: minmax(0, 1.55fr) minmax(320px, .9fr); }
.core-list-card,
.core-calendar-card,
.core-quick-actions-card,
.core-dash-chart-card { min-width: 0; }
.core-calendar-list,
.core-list-stack { max-height: 420px; overflow: auto; padding-right: 14px; }
@media (max-width: 1280px) {
  .tenant-admin-dashboard-grid-main,
  .core-user-workspace-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .core-chartjs-canvas-wrap { height: 230px; padding-inline: 12px; }
  .core-chart-legend-clean { padding-inline: 12px; }
}


.dashboard-layout.topbar-hidden .main-content {
    min-width: 0;
}

.dashboard-layout.topbar-hidden .dashboard-main {
    padding-top: 0;
}


.tenant-admins-tab {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tenant-admin-form {
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: var(--radius);
    padding: 1rem;
}

.tenant-admin-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.875rem;
    align-items: end;
}

.tenant-admin-active-toggle {
    min-height: 2.75rem;
    align-items: center;
}

.tenant-admin-form-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-top: 0.9rem;
}

.tenant-admins-table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card);
}

.tenant-admin-actions {
    justify-content: flex-start;
}

@media (max-width: 980px) {
    .tenant-admin-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .tenant-admin-form-grid {
        grid-template-columns: 1fr;
    }

    .tenant-admin-form-actions {
        justify-content: stretch;
        flex-direction: column;
    }
}


.gcf-storage-readonly-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.gcf-storage-readonly-row {
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.8);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gcf-storage-readonly-row > span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gcf-storage-readonly-row > strong {
    color: #0f172a;
    font-size: 1.02rem;
    font-weight: 900;
}

.gcf-storage-readonly-row > small,
.gcf-storage-readonly-note {
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.45;
}

.gcf-storage-readonly-note {
    margin-top: 12px;
    border-left: 3px solid rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.06);
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 700;
}

@media (max-width: 720px) {
    .gcf-storage-readonly-grid {
        grid-template-columns: 1fr;
    }
}


.admin-users-p1-page .admin-users-p1-stats {
    margin-bottom: 1.5rem;
}

.admin-users-p1-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 1rem;
    align-items: start;
}

.admin-users-p1-main {
    min-width: 0;
}

.admin-users-p1-table-wrapper {
    margin-top: 0;
}

.admin-users-p1-table tbody tr {
    cursor: pointer;
}

.admin-users-p1-table tbody tr.selected-row,
.admin-users-p1-table tbody tr.selected-row:hover {
    background: #eef4ff;
}

.admin-users-p1-detail {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    min-height: 420px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    position: sticky;
    top: 1rem;
}

.admin-users-p1-empty {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    align-items: center;
    justify-content: center;
    color: #64748b;
    text-align: center;
    padding: 2rem;
}

.admin-users-p1-empty strong {
    color: #0f172a;
    font-size: 1rem;
}

.admin-users-p1-empty span {
    max-width: 250px;
    font-size: .875rem;
    line-height: 1.4;
}

.admin-users-p1-detail-head {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.admin-users-p1-user-title {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.admin-users-p1-user-title h2 {
    margin: 0;
    font-size: 1.05rem;
    color: #0f172a;
}

.admin-users-p1-user-title p {
    margin: .15rem 0 0;
    font-size: .82rem;
    color: #64748b;
    overflow-wrap: anywhere;
}

.admin-users-p1-avatar {
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 700;
}

.admin-users-p1-avatar.lg {
    width: 52px;
    height: 52px;
    font-size: 1.05rem;
}

.admin-users-p1-avatar.sm {
    width: 30px;
    height: 30px;
    font-size: .78rem;
}

.admin-users-p1-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.admin-users-p1-detail-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-users-p1-section {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.admin-users-p1-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    color: #64748b;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.admin-users-p1-count {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #475569;
    font-size: .7rem;
    padding: .1rem .45rem;
}

.admin-users-p1-kv {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: .45rem .75rem;
    margin: 0;
    font-size: .86rem;
}

.admin-users-p1-kv dt {
    color: #64748b;
}

.admin-users-p1-kv dd {
    margin: 0;
    color: #0f172a;
    min-width: 0;
    overflow-wrap: anywhere;
}

.admin-users-p1-relation-list {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.admin-users-p1-relation-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    border-radius: 10px;
    padding: .65rem .7rem;
}

.admin-users-p1-relation-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.admin-users-p1-relation-main strong {
    color: #0f172a;
    font-size: .88rem;
    overflow-wrap: anywhere;
}

.admin-users-p1-relation-main span {
    color: #64748b;
    font-size: .76rem;
}

.admin-users-p1-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.admin-users-p1-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 999px;
    padding: .25rem .6rem;
    font-size: .78rem;
    font-weight: 600;
}

.admin-users-p1-muted-box,
.admin-users-p1-inline-loading,
.admin-users-p1-inline-error {
    border-radius: 10px;
    padding: .75rem;
    font-size: .84rem;
}

.admin-users-p1-muted-box {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #64748b;
}

.admin-users-p1-inline-loading {
    margin: 1rem 1rem 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.admin-users-p1-inline-error {
    margin: 1rem 1rem 0;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.admin-users-p1-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 950;
    background: rgba(15, 23, 42, .42);
}

.admin-users-p1-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 951;
    width: min(520px, 96vw);
    height: 100vh;
    background: #fff;
    box-shadow: -18px 0 36px rgba(15, 23, 42, .16);
    display: flex;
    flex-direction: column;
}

.admin-users-p1-drawer-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.admin-users-p1-drawer-head > div {
    flex: 1;
    min-width: 0;
}

.admin-users-p1-drawer-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.admin-users-p1-drawer-head p {
    margin: .2rem 0 0;
    color: #64748b;
    font-size: .82rem;
}

.admin-users-p1-drawer-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 1rem 1.25rem;
}

.admin-users-p1-drawer-search {
    margin-bottom: 1rem;
}

.admin-users-p1-picker-list {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.admin-users-p1-picker-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: .7rem;
    cursor: pointer;
    background: #fff;
}

.admin-users-p1-picker-item:hover {
    background: #f8fafc;
}

.admin-users-p1-picker-item.selected {
    background: #eef4ff;
    border-color: #bfdbfe;
}

.admin-users-p1-picker-item input {
    width: 16px;
    height: 16px;
}

.admin-users-p1-picker-main {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    flex: 1;
}

.admin-users-p1-picker-main strong {
    color: #0f172a;
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.admin-users-p1-picker-main span {
    color: #64748b;
    font-size: .78rem;
}

.admin-users-p1-module-pill {
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: .7rem;
    padding: .15rem .45rem;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-users-p1-drawer-foot {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .85rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}

@media (max-width: 1180px) {
    .admin-users-p1-layout {
        grid-template-columns: 1fr;
    }

    .admin-users-p1-detail {
        position: static;
    }
}


.admin-users-p2-filter-bar {
    align-items: stretch;
    gap: .7rem;
    flex-wrap: wrap;
}

.admin-users-p2-search {
    min-width: min(460px, 100%);
    flex: 1 1 340px;
}

.admin-users-p2-filter-row {
    display: flex;
    align-items: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
    width: 100%;
}

.admin-users-p2-filter {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 210px;
    color: #64748b;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.admin-users-p2-filter.small {
    min-width: 130px;
}

.admin-users-p2-filter.tiny {
    min-width: 96px;
}

.admin-users-p2-filter .form-select,
.admin-users-p2-compact-select,
.admin-users-p2-group-tools .form-select {
    min-height: 38px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: .45rem .65rem;
    color: #0f172a;
    background: #fff;
    font-size: .86rem;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}

.admin-users-p2-group-count {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    border-radius: 999px;
    padding: .24rem .55rem;
    font-weight: 700;
    font-size: .82rem;
}

.admin-users-p2-group-count small {
    color: #64748b;
    font-weight: 600;
    font-size: .68rem;
}

.admin-users-p2-drawer-tools {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
    margin-bottom: 1rem;
}

.admin-users-p2-create-groups {
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
    margin-top: .25rem;
}

.admin-users-p2-create-groups-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .65rem;
}

.admin-users-p2-create-groups-head .form-label {
    margin-bottom: .15rem;
}

.admin-users-p2-selected-count {
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 999px;
    padding: .18rem .55rem;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-users-p2-group-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .65fr);
    gap: .6rem;
    margin-bottom: .65rem;
}

.admin-users-p2-create-group-list {
    max-height: 220px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding-right: .15rem;
}

.admin-users-p2-create-group-item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: .5rem .65rem;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    padding: .62rem .68rem;
    cursor: pointer;
}

.admin-users-p2-create-group-item:hover {
    background: #f8fafc;
}

.admin-users-p2-create-group-item.selected {
    background: #eef4ff;
    border-color: #bfdbfe;
}

.admin-users-p2-create-group-name {
    color: #0f172a;
    font-weight: 700;
    font-size: .86rem;
    overflow-wrap: anywhere;
}

.admin-users-p2-create-group-meta {
    grid-column: 2;
    color: #64748b;
    font-size: .76rem;
    overflow-wrap: anywhere;
}

.admin-users-p2-create-group-empty {
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
    padding: .75rem;
    font-size: .84rem;
}

@media (max-width: 760px) {
    .admin-users-p2-group-tools,
    .admin-users-p2-filter-row {
        grid-template-columns: 1fr;
    }

    .admin-users-p2-filter,
    .admin-users-p2-filter.small,
    .admin-users-p2-filter.tiny {
        min-width: 100%;
    }
}


.admin-users-p21-ou-chip {
    border-color: #ccfbf1;
    background: #f0fdfa;
    color: #0f766e;
}

.admin-users-p2-drawer-tools {
    grid-template-columns: 1fr;
}

@media (min-width: 680px) {
    .admin-users-p2-drawer-tools {
        grid-template-columns: minmax(0, 1fr) minmax(150px, .6fr) minmax(150px, .6fr);
    }
}

@media (min-width: 780px) {
    .admin-users-p2-group-tools {
        grid-template-columns: minmax(0, 1fr) minmax(170px, .6fr) minmax(170px, .6fr);
    }
}


.admin-groups-p1-page .page-header-section {
    margin-bottom: 1.25rem;
}

.admin-groups-p1-filter-bar {
    align-items: center;
    margin-bottom: 0.75rem;
}

.admin-groups-p1-summary {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    color: var(--text-muted, var(--muted-foreground));
    font-size: 0.8125rem;
}

.admin-groups-p1-layout {
    align-items: stretch;
}

.admin-groups-p1-table tbody tr {
    cursor: pointer;
}

.admin-groups-p1-name-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 240px;
}

.admin-groups-p1-name-cell > div:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-groups-p1-name-cell strong {
    color: var(--text-main, var(--foreground));
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-groups-p1-name-cell span {
    color: var(--text-muted, var(--muted-foreground));
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

.admin-groups-p1-member-count {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-main, var(--foreground));
    font-weight: 600;
}

.admin-groups-p1-detail .admin-users-p1-detail-head {
    gap: 1rem;
}

.admin-groups-p1-member-tools,
.admin-groups-p1-drawer-tools {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.admin-groups-p1-inline-search {
    min-width: 220px;
    flex: 1;
}

.admin-groups-p1-batch-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-hover, var(--muted));
    color: var(--text-muted, var(--muted-foreground));
    font-size: 0.8125rem;
}

.admin-groups-p1-member-list,
.admin-groups-p1-available-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-groups-p1-select-all,
.admin-groups-p1-member-item,
.admin-groups-p1-available-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card, var(--card));
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.admin-groups-p1-select-all:hover,
.admin-groups-p1-member-item:hover,
.admin-groups-p1-available-item:hover {
    background: var(--bg-hover, var(--muted));
    border-color: var(--primary);
}

.admin-groups-p1-select-all input,
.admin-groups-p1-member-item input,
.admin-groups-p1-available-item input {
    flex-shrink: 0;
    accent-color: var(--primary);
}

.admin-groups-p1-select-all {
    color: var(--text-muted, var(--muted-foreground));
    font-size: 0.8125rem;
    font-weight: 600;
}

.admin-groups-p1-member-item .badge,
.admin-groups-p1-available-item .badge {
    margin-left: auto;
    white-space: nowrap;
}

.admin-groups-p1-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    color: var(--text-muted, var(--muted-foreground));
    font-size: 0.8125rem;
}

.admin-groups-p1-pagination > div {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.admin-groups-p1-drawer {
    width: min(560px, 96vw);
}

.admin-groups-p1-drawer .admin-users-p1-drawer-body {
    gap: 1rem;
}

.btn.btn-danger:not(.gcf-module--civic .btn.btn-danger) {
    background: var(--danger, var(--destructive));
    border-color: var(--danger, var(--destructive));
    color: #fff;
}

.btn.btn-danger:not(.gcf-module--civic .btn.btn-danger):hover:not(:disabled) {
    filter: brightness(0.95);
}

@media (max-width: 1200px) {
    .admin-groups-p1-layout {
        grid-template-columns: 1fr;
    }

    .admin-groups-p1-detail {
        min-height: 520px;
    }
}

@media (max-width: 768px) {
    .admin-groups-p1-summary,
    .admin-groups-p1-pagination,
    .admin-groups-p1-batch-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-groups-p1-member-tools,
    .admin-groups-p1-drawer-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-groups-p1-inline-search {
        min-width: 0;
        width: 100%;
    }
}


.admin-groups-p11-workspace {
    min-height: calc(100vh - 64px);
    background: var(--bg, #f6f7fb);
    padding: 0;
}

.admin-groups-p11-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--border, #e5e7eb);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-groups-p11-title {
    flex: 1;
    min-width: 0;
}

.admin-groups-p11-title span {
    display: block;
    color: var(--text-muted, #64748b);
    font-size: 0.8rem;
    margin-bottom: 0.15rem;
}

.admin-groups-p11-title h1 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.2;
}

.admin-groups-p11-top-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.admin-groups-p11-error {
    margin: 1rem 1.5rem 0;
}

.admin-groups-p11-body {
    padding: 1.25rem 1.5rem 2rem;
}

.admin-groups-p11-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.admin-groups-p11-tabs button {
    border: 0;
    background: transparent;
    color: var(--text-muted, #64748b);
    padding: 0.75rem 1rem;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    cursor: pointer;
}

.admin-groups-p11-tabs button.active {
    color: var(--primary, #2563eb);
    border-bottom-color: var(--primary, #2563eb);
}

.admin-groups-p11-content {
    max-width: 1440px;
}

.admin-groups-p11-tab-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 1rem;
    align-items: start;
}

.admin-groups-p11-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-groups-p11-card h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.admin-groups-p11-card-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.admin-groups-p11-card-head p,
.admin-groups-p11-help {
    margin: 0 0 0.75rem;
    color: var(--text-muted, #64748b);
    font-size: 0.9rem;
}

.admin-groups-p11-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.6rem;
}

.admin-groups-p11-pick-grid.modules {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.admin-groups-p11-pick,
.admin-groups-p11-permission {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 0.75rem;
    align-items: start;
    padding: 0.75rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.admin-groups-p11-pick.selected,
.admin-groups-p11-permission.selected {
    border-color: var(--primary, #2563eb);
    background: rgba(37, 99, 235, 0.06);
}

.admin-groups-p11-pick small,
.admin-groups-p11-permission span {
    grid-column: 2;
    color: var(--text-muted, #64748b);
    font-size: 0.78rem;
    line-height: 1.35;
}

.admin-groups-p11-permission-grid {
    display: grid;
    gap: 0.6rem;
}

.admin-groups-p11-member-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto auto auto;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.admin-groups-p11-members-card {
    max-width: 100%;
}

.admin-groups-p11-members-table {
    max-height: none;
    overflow: auto;
}

.admin-groups-p11-add-drawer {
    width: min(760px, 96vw);
}

@media (max-width: 1100px) {
    .admin-groups-p11-tab-grid,
    .admin-groups-p11-member-toolbar {
        grid-template-columns: 1fr;
    }
    .admin-groups-p11-topbar {
        align-items: flex-start;
        flex-direction: column;
    }
    .admin-groups-p11-top-actions {
        width: 100%;
        justify-content: flex-end;
    }
}


.admin-groups-p12-org-search {
    width: 100%;
    max-width: 560px;
}

.admin-groups-p12-filter-note {
    display: block;
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.8125rem;
}

.admin-groups-p12-empty-cell {
    padding: 2rem !important;
    text-align: center;
}

.admin-groups-p12-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #475569;
    min-height: 96px;
}

.admin-groups-p12-empty-state strong {
    color: #0f172a;
    font-size: 0.95rem;
}

.admin-groups-p12-empty-state span {
    max-width: 460px;
    line-height: 1.45;
}

.admin-users-p1-muted-box.compact {
    padding: 0.75rem 0.875rem;
    font-size: 0.875rem;
}


.admin-groups-p13-org-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.admin-groups-p13-selection-summary {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0.75rem 0;
    padding: 0.75rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    background: #f8fafc;
}

.admin-groups-p13-summary-head {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.admin-groups-p13-mini-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}

.admin-groups-p13-selected-list {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.admin-groups-p13-selected-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    border: 1px solid rgba(37, 99, 235, 0.25);
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    border-radius: 999px;
    padding: 0.35rem 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.admin-groups-p13-selected-chip:hover {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
}

.admin-groups-p13-selected-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-groups-p13-pick-grid {
    max-height: 420px;
    overflow: auto;
    padding-right: 0.2rem;
}

@media (max-width: 1100px) {
    .admin-groups-p13-org-layout {
        grid-template-columns: 1fr;
    }
}


.admin-groups-p14-org-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.admin-groups-p14-assignment-card {
    min-height: 360px;
}

.admin-groups-p14-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.admin-groups-p14-card-head h3 {
    margin-bottom: 0.25rem;
}

.admin-groups-p14-counter {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 0.85rem;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-groups-p14-assignment-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.admin-groups-p14-assignment-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    background: #fff;
}

.admin-groups-p14-assignment-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    font-size: 0.75rem;
    font-weight: 800;
}

.admin-groups-p14-assignment-avatar.ou,
.admin-groups-p14-available-item .admin-users-p1-avatar.ou {
    background: rgba(14, 165, 164, 0.12);
    color: #0f766e;
}

.admin-groups-p14-assignment-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.admin-groups-p14-assignment-main strong,
.admin-groups-p14-assignment-main span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-groups-p14-assignment-main span {
    color: #64748b;
    font-size: 0.82rem;
}

.admin-groups-p14-empty-assignment {
    display: flex;
    min-height: 150px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.2rem;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
}

.admin-groups-p14-empty-assignment strong {
    color: #0f172a;
}

.admin-groups-p14-org-drawer {
    width: min(820px, 96vw);
}

.admin-groups-p14-org-toolbar {
    grid-template-columns: minmax(260px, 1fr) auto auto auto;
}

.admin-groups-p14-available-list {
    gap: 0.55rem;
}

.admin-groups-p14-available-item {
    min-height: 64px;
}

.admin-groups-p14-available-item .badge {
    margin-left: auto;
}

@media (max-width: 1100px) {
    .admin-groups-p14-org-layout {
        grid-template-columns: 1fr;
    }
    .admin-groups-p14-card-head,
    .admin-groups-p14-assignment-item {
        align-items: stretch;
        flex-direction: column;
    }
    .admin-groups-p14-org-toolbar {
        grid-template-columns: 1fr;
    }
}


.admin-groups-p15-org-workspace {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-groups-p15-org-tabs {
    display: inline-flex;
    width: fit-content;
    gap: 0.35rem;
    padding: 0.25rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    background: #f8fafc;
}

.admin-groups-p15-org-tabs button {
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #475569;
    cursor: pointer;
    font-weight: 700;
    padding: 0.55rem 0.85rem;
}

.admin-groups-p15-org-tabs button.active {
    background: #ffffff;
    color: var(--primary, #2563eb);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.admin-groups-p15-org-tabs button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    margin-left: 0.35rem;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    font-size: 0.76rem;
}

.admin-groups-p15-table-card {
    width: 100%;
    max-width: 100%;
}

.admin-groups-p15-org-toolbar {
    grid-template-columns: minmax(260px, 1fr) auto auto;
}

.admin-groups-p15-org-toolbar.ous {
    grid-template-columns: minmax(260px, 1fr) auto auto auto;
}

.admin-groups-p15-org-table {
    max-height: none;
    overflow: auto;
}

.admin-groups-p15-org-table .data-table td:first-child,
.admin-groups-p15-org-table .data-table th:first-child {
    width: 44px;
    text-align: center;
}

.admin-groups-p15-org-table .admin-users-p1-avatar.ou {
    background: rgba(14, 165, 164, 0.12);
    color: #0f766e;
}

@media (max-width: 1100px) {
    .admin-groups-p15-org-toolbar,
    .admin-groups-p15-org-toolbar.ous {
        grid-template-columns: 1fr;
    }
    .admin-groups-p15-org-tabs {
        width: 100%;
    }
    .admin-groups-p15-org-tabs button {
        flex: 1;
    }
}


.admin-org-p1-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: calc(100vh - 120px);
}

.admin-org-p1-page-head p {
    margin: 0.35rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
}

.admin-org-p1-layout {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.admin-org-p1-tree-card,
.admin-org-p1-workspace,
.admin-org-p1-card {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-org-p1-tree-card {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 150px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.admin-org-p1-tree-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.admin-org-p1-tree-head strong {
    display: block;
    font-size: 1rem;
    color: #0f172a;
}

.admin-org-p1-tree-head span,
.admin-org-p1-breadcrumb,
.admin-org-p1-help,
.admin-org-p1-card-head p,
.admin-org-p1-tree-label small {
    color: #64748b;
    font-size: 0.82rem;
}

.admin-org-p1-tree-search {
    margin: 0.85rem 1rem;
}

.admin-org-p1-tree-list {
    overflow: auto;
    padding: 0 0.6rem 1rem;
}

.admin-org-p1-tree-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 10px;
    min-height: 44px;
}

.admin-org-p1-tree-row:hover,
.admin-org-p1-tree-row.selected {
    background: rgba(37, 99, 235, 0.08);
}

.admin-org-p1-tree-toggle {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.admin-org-p1-tree-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0.45rem 0.45rem 0.45rem 0;
    text-align: left;
    cursor: pointer;
}

.admin-org-p1-tree-label strong,
.admin-org-p1-tree-label small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-org-p1-tree-icon,
.admin-org-p1-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    font-size: 0.72rem;
    font-weight: 800;
}

.admin-org-p1-tree-icon.ou,
.admin-org-p1-avatar.ou {
    background: rgba(14, 165, 164, 0.12);
    color: #0f766e;
}

.admin-org-p1-avatar.group {
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
}

.admin-org-p1-avatar.user {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.admin-org-p1-workspace {
    min-height: 620px;
    overflow: hidden;
}

.admin-org-p1-workspace.empty {
    display: grid;
    place-items: center;
}

.admin-org-p1-workspace-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.admin-org-p1-workspace-head h1 {
    margin: 0.1rem 0 0.25rem;
    color: #0f172a;
    font-size: 1.45rem;
}

.admin-org-p1-workspace-head p {
    margin: 0;
    color: #64748b;
}

.admin-org-p1-head-actions,
.admin-org-p1-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.admin-org-p1-tabs {
    display: flex;
    gap: 1.2rem;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: #f8fafc;
}

.admin-org-p1-tabs button {
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #475569;
    cursor: pointer;
    font-weight: 700;
    padding: 0.95rem 0.1rem;
}

.admin-org-p1-tabs button.active {
    border-bottom-color: var(--primary, #2563eb);
    color: var(--primary, #2563eb);
}

.admin-org-p1-tab-content {
    padding: 1.25rem;
}

.admin-org-p1-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.admin-org-p1-card {
    padding: 1rem;
}

.admin-org-p1-card.stat {
    min-height: 140px;
}

.admin-org-p1-card.stat span {
    display: block;
    color: #64748b;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-org-p1-card.stat strong {
    display: block;
    margin: 0.4rem 0;
    color: #0f172a;
    font-size: 1.35rem;
}

.admin-org-p1-card.stat small {
    color: #64748b;
    line-height: 1.45;
}

.admin-org-p1-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.admin-org-p1-card-head h3 {
    margin: 0 0 0.25rem;
    color: #0f172a;
}

.admin-org-p1-card-head p {
    margin: 0;
}

.admin-org-p1-toolbar {
    grid-template-columns: minmax(260px, 1fr) auto auto;
    margin-bottom: 1rem;
}

.admin-org-p1-table {
    max-height: none;
    overflow: auto;
}

.admin-org-p1-table .data-table th:first-child,
.admin-org-p1-table .data-table td:first-child {
    width: 44px;
    text-align: center;
}

.admin-org-p1-name-cell {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.admin-org-p1-name-cell strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-org-p1-empty {
    display: flex;
    min-height: 120px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
}

.admin-org-p1-empty.big {
    min-width: 320px;
    min-height: 220px;
}

.admin-org-p1-empty strong {
    color: #0f172a;
}

.admin-org-p1-form-grid {
    display: grid;
    gap: 0.85rem;
    max-width: 760px;
}

.admin-org-p1-form-grid label {
    display: grid;
    gap: 0.35rem;
    color: #334155;
    font-weight: 700;
}

.admin-org-p1-form-grid input,
.admin-org-p1-form-grid select,
.admin-org-p1-form-grid textarea,
.admin-org-p1-initial-ou-row input,
.admin-org-p1-initial-ou-row select {
    width: 100%;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    background: #fff;
    padding: 0.7rem 0.8rem;
    color: #0f172a;
    font: inherit;
}

.admin-org-p1-form-grid textarea {
    min-height: 110px;
    resize: vertical;
}

.admin-org-p1-form-drawer {
    width: min(820px, 96vw);
}

.admin-org-p1-inline-section {
    margin-top: 1.2rem;
}

.admin-org-p1-initial-ou-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 180px auto;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.55rem;
}

@media (max-width: 1200px) {
    .admin-org-p1-layout {
        grid-template-columns: 1fr;
    }
    .admin-org-p1-tree-card {
        position: static;
        max-height: none;
    }
    .admin-org-p1-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .admin-org-p1-workspace-head,
    .admin-org-p1-card-head,
    .admin-org-p1-initial-ou-row {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }
    .admin-org-p1-tabs {
        overflow-x: auto;
    }
    .admin-org-p1-overview-grid {
        grid-template-columns: 1fr;
    }
    .admin-org-p1-toolbar {
        grid-template-columns: 1fr;
    }
}


.gcf-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(2px);
}

.gcf-confirm-dialog {
    position: fixed;
    z-index: 5001;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 2rem));
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.26);
    overflow: hidden;
}

.gcf-confirm-head {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 0.85rem;
    padding: 1.15rem 1.25rem;
}

.gcf-confirm-head h3 {
    margin: 0 0 0.35rem;
    color: #0f172a;
    font-size: 1.08rem;
}

.gcf-confirm-head p {
    margin: 0;
    color: #475569;
    line-height: 1.48;
}

.gcf-confirm-icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.gcf-confirm-icon.danger {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.gcf-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.admin-org-p11-workspace-head {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.admin-org-p11-title-row {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
}

.admin-org-p11-type-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.35rem;
    border: 1px solid #dbeafe;
    background: #eff6ff;
}

.admin-org-p11-type-icon.ou {
    border-color: #ccfbf1;
    background: #f0fdfa;
}

.admin-org-p11-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.2rem;
}

.admin-org-p11-type-badge,
.admin-org-p11-node-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.admin-org-p11-type-badge.dept,
.admin-org-p11-node-badge.dept {
    color: #1d4ed8;
    background: #dbeafe;
}

.admin-org-p11-type-badge.ou,
.admin-org-p11-node-badge.ou {
    color: #0f766e;
    background: #ccfbf1;
}

.admin-org-p11-subtle {
    color: #64748b;
    font-size: 0.82rem;
}

.admin-org-p1-tree-row.dept {
    border-left: 3px solid transparent;
}

.admin-org-p1-tree-row.ou {
    border-left: 3px solid transparent;
}

.admin-org-p1-tree-row.dept.selected {
    border-left-color: #2563eb;
}

.admin-org-p1-tree-row.ou.selected {
    border-left-color: #0f766e;
}

.admin-org-p1-tree-text {
    min-width: 0;
}

.admin-org-p11-context-menu {
    position: fixed;
    z-index: 4900;
    min-width: 240px;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
    padding: 0.45rem;
}

.admin-org-p11-context-head {
    padding: 0.55rem 0.65rem 0.45rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0.35rem;
}

.admin-org-p11-context-head strong,
.admin-org-p11-context-head span {
    display: block;
}

.admin-org-p11-context-head strong {
    color: #0f172a;
}

.admin-org-p11-context-head span {
    color: #64748b;
    font-size: 0.78rem;
}

.admin-org-p11-context-menu button {
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #0f172a;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    padding: 0.58rem 0.65rem;
    text-align: left;
    font: inherit;
}

.admin-org-p11-context-menu button:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.admin-org-p11-context-menu button.danger {
    color: #dc2626;
}

.admin-org-p11-context-menu button.danger:hover {
    background: #fef2f2;
    color: #b91c1c;
}

.admin-org-p11-context-sep {
    height: 1px;
    background: #e2e8f0;
    margin: 0.35rem 0.2rem;
}


.admin-org-p12-shell {
    border: 1px solid #dbe4ef;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07);
    padding: 1rem;
    padding-bottom: 4.5rem;
    min-height: calc(100vh - 210px);
    overflow: visible;
}

.admin-org-p12-layout {
    align-items: stretch;
    min-height: calc(100vh - 260px);
}

.admin-org-p12-layout .admin-org-p1-tree-card,
.admin-org-p12-layout .admin-org-p1-workspace {
    border-color: #d8e2ee;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.admin-org-p12-layout .admin-org-p1-tree-card {
    max-height: calc(100vh - 238px);
    min-height: 540px;
    overflow: hidden;
}

.admin-org-p12-layout .admin-org-p1-tree-list {
    padding-bottom: 4.5rem;
    scrollbar-gutter: stable;
}

.admin-org-p12-layout .admin-org-p1-workspace {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 260px);
    overflow: hidden;
}

.admin-org-p12-layout .admin-org-p1-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-bottom: 4.5rem;
    scrollbar-gutter: stable;
}

.admin-org-p12-bottom-spacer {
    height: 4rem;
}

.admin-org-p11-context-menu {
    width: 286px;
    max-width: calc(100vw - 24px);
    max-height: none;
    overflow: visible;
}

.admin-org-p11-context-menu::before {
    content: '';
    position: absolute;
    inset: -6px;
    z-index: -1;
}

@media (max-width: 1200px) {
    .admin-org-p12-shell {
        min-height: auto;
        padding: 0.75rem;
        padding-bottom: 3rem;
    }
    .admin-org-p12-layout {
        min-height: auto;
    }
    .admin-org-p12-layout .admin-org-p1-tree-card,
    .admin-org-p12-layout .admin-org-p1-workspace {
        min-height: auto;
        max-height: none;
    }
    .admin-org-p12-layout .admin-org-p1-tab-content {
        overflow: visible;
        padding-bottom: 2rem;
    }
}


.admin-org-p1-page {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.admin-org-p13-shell {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 32rem),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-color: #d7e1ee;
    box-shadow: 0 18px 54px rgba(15, 23, 42, 0.09);
}

.admin-org-p13-layout {
    grid-template-columns: minmax(340px, 390px) minmax(0, 1fr);
}

.admin-org-p13-layout .admin-org-p1-tree-card,
.admin-org-p13-layout .admin-org-p1-workspace {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

.admin-org-p13-layout .admin-org-p1-tree-card {
    border-color: #d9e4f2;
}

.admin-org-p13-layout .admin-org-p1-workspace {
    border-color: #d9e4f2;
}

.admin-org-p1-tree-head {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.admin-org-p1-tree-head strong {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1.05rem;
}

.admin-org-p13-head-icon,
.admin-org-p13-search-icon {
    color: #475569;
    flex-shrink: 0;
}

.admin-org-p13-inline-icon-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 0.42rem;
}

.admin-org-p13-icon-only {
    width: 36px;
    height: 36px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

.admin-org-p1-tree-search {
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.admin-org-p1-tree-search input {
    font-size: 0.9rem;
}

.admin-org-p1-tree-list {
    padding: 0.4rem 0.7rem 4.5rem;
}

.admin-org-p1-tree-row {
    position: relative;
    margin: 0.14rem 0;
    border: 1px solid transparent;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.admin-org-p1-tree-row::before {
    content: '';
    position: absolute;
    left: 12px;
    top: -0.18rem;
    bottom: -0.18rem;
    width: 1px;
    background: rgba(148, 163, 184, 0.22);
    opacity: 0.65;
}

.admin-org-p1-tree-row.dept::before {
    opacity: 0;
}

.admin-org-p1-tree-row:hover {
    background: #f8fbff;
    border-color: #dbeafe;
}

.admin-org-p1-tree-row.selected {
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14);
}

.admin-org-p1-tree-row.dept.selected {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.admin-org-p1-tree-row.ou.selected {
    background: #f0fdfa;
    border-color: #99f6e4;
}

.admin-org-p1-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    z-index: 1;
}

.admin-org-p1-tree-toggle.has-children:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.admin-org-p1-tree-toggle.empty {
    cursor: default;
}

.admin-org-p13-tree-placeholder {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #cbd5e1;
    opacity: 0.45;
}

.admin-org-p1-tree-label {
    min-height: 42px;
}

.admin-org-p1-tree-icon,
.admin-org-p1-avatar,
.admin-org-p11-type-icon,
.admin-org-p11-context-head-icon {
    line-height: 1;
}

.admin-org-p1-tree-icon svg,
.admin-org-p1-avatar svg,
.admin-org-p11-type-icon svg,
.admin-org-p11-context-head-icon svg,
.admin-org-p11-context-menu button svg,
.gcf-confirm-icon svg,
.admin-org-p13-inline-icon-btn svg,
.admin-org-p13-icon-only svg {
    display: block;
    flex-shrink: 0;
}

.admin-org-p1-tree-icon.dept {
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.admin-org-p1-tree-icon.ou {
    background: linear-gradient(135deg, #ccfbf1, #f0fdfa);
    color: #0f766e;
    border: 1px solid #99f6e4;
}

.admin-org-p1-tree-text strong {
    color: #0f172a;
    font-size: 0.93rem;
}

.admin-org-p1-tree-text small {
    margin-top: 0.12rem;
}

.admin-org-p11-node-badge {
    border: 1px solid currentColor;
    background: rgba(255,255,255,0.75);
}

.admin-org-p11-workspace-head {
    border-bottom-color: #dbe4ef;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.09), transparent 24rem),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.admin-org-p11-type-icon.dept {
    color: #1d4ed8;
    border-color: #bfdbfe;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
}

.admin-org-p11-type-icon.ou {
    color: #0f766e;
    border-color: #99f6e4;
    background: linear-gradient(135deg, #ccfbf1, #f0fdfa);
}

.admin-org-p1-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    color: #475569;
    font-weight: 600;
}

.admin-org-p11-meta-row {
    margin-top: 0.35rem;
}

.admin-org-p1-tabs {
    background: #f8fafc;
    gap: 0.4rem;
    padding-top: 0.35rem;
}

.admin-org-p1-tabs button {
    border-radius: 10px 10px 0 0;
    padding: 0.78rem 0.85rem;
}

.admin-org-p1-tabs button:hover {
    background: #eef2ff;
    color: #1d4ed8;
}

.admin-org-p1-tabs button.active {
    background: #ffffff;
    box-shadow: inset 0 -2px 0 var(--primary, #2563eb);
}

.admin-org-p11-context-menu {
    width: 286px;
    max-width: calc(100vw - 24px);
    max-height: none !important;
    overflow: visible !important;
    padding: 0.45rem;
    border-color: #dbe4ef;
    border-radius: 14px;
}

.admin-org-p11-context-head {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 0.65rem;
}

.admin-org-p11-context-head-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.admin-org-p11-context-head-icon.dept {
    background: #dbeafe;
    color: #1d4ed8;
}

.admin-org-p11-context-head-icon.ou {
    background: #ccfbf1;
    color: #0f766e;
}

.admin-org-p11-context-menu button {
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
}

.admin-org-p11-context-menu button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-org-p12-layout .admin-org-p1-tab-content {
    overflow: auto;
    padding-bottom: 5rem;
}

.admin-org-p12-layout .admin-org-p1-workspace {
    min-height: calc(100vh - 245px);
}

.admin-org-p12-layout .admin-org-p1-tree-card {
    max-height: calc(100vh - 220px);
}

@media (max-width: 1200px) {
    .admin-org-p13-layout {
        grid-template-columns: 1fr;
    }
    .admin-org-p11-context-menu {
        width: min(286px, calc(100vw - 24px));
    }
}


.admin-org-p14-search-control {
    --org-search-border: #d9e4f2;
    --org-search-bg: #ffffff;
    --org-search-ring: rgba(37, 99, 235, 0.14);
    display: flex;
    align-items: center;
    gap: 0.62rem;
    min-height: 42px;
    width: 100%;
    padding: 0 0.78rem;
    border: 1px solid var(--org-search-border);
    border-radius: 14px;
    background: var(--org-search-bg);
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.admin-org-p14-search-control:hover {
    border-color: #c5d3e6;
    background: #fbfdff;
}

.admin-org-p14-search-control:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px var(--org-search-ring), 0 8px 18px rgba(37, 99, 235, 0.08);
    background: #ffffff;
}

.admin-org-p14-search-icon {
    width: 18px;
    height: 18px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.admin-org-p14-search-icon svg,
.admin-org-p14-search-clear svg {
    display: block;
}

.admin-org-p14-search-control input {
    appearance: none;
    -webkit-appearance: none;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #0f172a;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 40px;
    padding: 0;
    font-size: 0.93rem;
    line-height: 1.2;
    font-weight: 500;
}

.admin-org-p14-search-control input::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

.admin-org-p14-search-clear {
    border: 0;
    background: #f1f5f9;
    color: #64748b;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

.admin-org-p14-search-clear:hover {
    background: #e2e8f0;
    color: #0f172a;
    transform: scale(1.03);
}

.admin-org-p14-tree-search {
    margin: 0.85rem 0.85rem 0.7rem;
    min-height: 42px;
}

.admin-org-p14-toolbar-search {
    flex: 1 1 360px;
    min-width: min(100%, 280px);
}

.admin-org-p1-toolbar,
.admin-groups-p14-org-toolbar {
    align-items: center;
    gap: 0.7rem;
}

.admin-org-p14-filter-select {
    height: 42px;
    min-width: 145px;
    border: 1px solid #d9e4f2;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0 2.25rem 0 0.85rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-org-p14-filter-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.admin-org-p14-toolbar-button {
    min-height: 42px;
    border-radius: 12px;
    font-weight: 700;
}

.admin-users-p1-drawer .admin-org-p14-search-control {
    background: #ffffff;
}

@media (max-width: 900px) {
    .admin-org-p14-toolbar-search,
    .admin-org-p14-filter-select,
    .admin-org-p14-toolbar-button {
        flex: 1 1 100%;
        width: 100%;
    }
}


.gcf-page-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin: 0 0 1.35rem;
    padding: 1.2rem 1.25rem;
    border: 1px solid #dbe7f6;
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f8fbff 52%, #eff6ff 100%);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.gcf-page-hero-main {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}

.gcf-page-hero-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    border-radius: 15px;
    background: #eaf2ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.gcf-page-hero-kicker {
    margin: 0 0 0.18rem;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.gcf-page-hero h1 {
    margin: 0;
    color: #071226;
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    line-height: 1.16;
    letter-spacing: -0.035em;
}

.gcf-page-hero p {
    margin: 0.38rem 0 0;
    color: #52627a;
    font-size: 0.94rem;
    line-height: 1.45;
    max-width: 820px;
}

.gcf-page-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.42rem;
    margin-top: 0.68rem;
}

.gcf-page-hero-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.18rem 0.58rem;
    border-radius: 999px;
    border: 1px solid #dbe7f6;
    background: rgba(255, 255, 255, 0.78);
    color: #334155;
    font-size: 0.78rem;
    font-weight: 750;
}

.gcf-page-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    flex: 0 0 auto;
}

.gcf-page-hero-actions .btn {
    min-height: 42px;
    border-radius: 12px;
    font-weight: 800;
}

@media (max-width: 900px) {
    .gcf-page-hero {
        align-items: stretch;
        flex-direction: column;
    }
    .gcf-page-hero-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}


.dashboard-layout .sidebar .labs-kanban-active-project-card {
    margin: 1rem 0.75rem 0;
    padding: 1rem;
    border-radius: 1rem;
    background: linear-gradient(160deg, #075c9f 0%, #0b6fb8 58%, #07528e 100%);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.26);
    color: #fff;
}
.dashboard-layout .sidebar .labs-kanban-active-project-kicker {
    margin-bottom: 0.45rem;
    color: rgba(255,255,255,0.78);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.dashboard-layout .sidebar .labs-kanban-active-project-title {
    color: #fff;
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-layout .sidebar .labs-kanban-active-project-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.55rem;
    color: rgba(255,255,255,0.88);
    font-size: 0.84rem;
}
.dashboard-layout .sidebar .labs-kanban-active-project-progress {
    height: 0.38rem;
    margin-top: 0.45rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,0.22);
}
.dashboard-layout .sidebar .labs-kanban-active-project-progress span {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #38bdf8, #93c5fd);
}
.dashboard-layout .sidebar .labs-kanban-active-project-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    margin-top: 0.95rem;
}
.dashboard-layout .sidebar .labs-kanban-active-project-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.75rem;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 800;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.dashboard-layout .sidebar .labs-kanban-active-project-btn:hover {
    transform: translateY(-1px);
}
.dashboard-layout .sidebar .labs-kanban-active-project-btn.primary {
    color: #fff;
    background: #0ea5e9;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
}
.dashboard-layout .sidebar .labs-kanban-active-project-btn.secondary {
    color: #07528e;
    background: #fff;
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.16);
}
.dashboard-layout.sidebar-collapsed .sidebar .labs-kanban-active-project-card {
    display: none;
}


.dashboard-layout .sidebar.labs-kanban-sidebar .sidebar-nav {
    flex: 0 0 auto;
}
.dashboard-layout .sidebar.labs-kanban-sidebar .labs-kanban-active-project-card {
    margin-top: 1rem;
    margin-bottom: 0;
}
.dashboard-layout .sidebar .labs-kanban-quick-actions {
    margin: 1rem 0.75rem 0;
    padding: 0.55rem;
    border-radius: 1rem;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(226,232,240,0.9);
    box-shadow: 0 12px 24px rgba(2,6,23,0.18);
    display: grid;
    gap: 0.45rem;
}
.dashboard-layout .sidebar .labs-kanban-quick-action {
    min-height: 2.35rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.75rem;
    color: #ffffff;
    background: #0876bd;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.86rem;
    transition: transform 0.15s ease, background 0.15s ease;
}
.dashboard-layout .sidebar .labs-kanban-quick-action:hover {
    transform: translateY(-1px);
    background: #0369a1;
}
.dashboard-layout.sidebar-collapsed .sidebar .labs-kanban-quick-actions {
    display: none;
}


.core-user-dashboard-shell .core-user-hero {
    align-items: center;
    min-height: 78px;
    padding: 16px 20px;
    margin-bottom: 14px;
    border-radius: 20px;
}
.core-user-dashboard-shell .core-user-hero h1 {
    margin: 0 0 4px;
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1.08;
}
.core-user-dashboard-shell .core-user-hero p { font-size: 14px; }
.core-user-dashboard-shell .core-dashboard-alert { margin: 0 0 14px; }
.core-user-dashboard-shell .core-quick-actions-primary { margin-bottom: 14px; }
.core-user-dashboard-shell .core-quick-actions-primary .core-dash-card-head { padding-top: 14px; }
.core-user-dashboard-shell .core-quick-actions-primary .core-quick-actions-grid { padding-top: 12px; }
.core-user-dashboard-shell .core-quick-action,
.core-user-dashboard-shell .core-module-chip { text-decoration: none; }
.core-user-dashboard-shell .core-quick-actions-empty { padding: 0; }
.core-user-dashboard-shell .core-metric-card { min-height: 104px; padding: 16px; }
.core-user-dashboard-shell .core-metric-card small { line-height: 1.25; }
.core-user-focus-grid,
.core-user-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}
.core-user-focus-grid.single,
.core-user-detail-grid.single { grid-template-columns: minmax(0, 1fr); }
.core-user-dashboard-shell .core-list-card,
.core-user-dashboard-shell .core-calendar-card,
.core-user-dashboard-shell .core-chartjs-card-compact { height: 100%; }
.core-user-dashboard-shell .core-list-stack,
.core-user-dashboard-shell .core-calendar-list { max-height: 330px; }
.core-dash-card-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 18px 0;
}
.core-dash-card-footer .btn { padding-inline: 0; font-weight: 700; }
.core-calendar-date-time {
    width: 70px;
    height: 50px;
    flex-direction: column;
    gap: 1px;
    line-height: 1.05;
}
.core-calendar-date-time strong { font-size: 11px; }
.core-calendar-date-time small { font-size: 11px; font-weight: 700; }
.core-user-dashboard-shell .core-chartjs-card-compact .core-chartjs-canvas-wrap { height: 178px; }
.core-user-dashboard-shell .core-chartjs-card-compact .core-chart-drilldown { margin-inline: 18px; }
.core-user-dashboard-shell .core-module-strip { margin-top: 0; }

@media (max-width: 1280px) {
    .core-user-focus-grid,
    .core-user-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .core-user-dashboard-shell .core-user-hero {
        align-items: flex-start;
        padding: 14px 16px;
        gap: 12px;
    }
    .core-user-dashboard-shell .core-user-hero h1 { font-size: 24px; }
    .core-user-dashboard-shell .core-hero-actions { width: 100%; justify-content: space-between; }
    .core-user-dashboard-shell .core-quick-actions-grid { display: grid; grid-template-columns: 1fr; }
    .core-user-dashboard-shell .core-quick-action { width: 100%; justify-content: flex-start; }
    .core-user-dashboard-shell .core-metric-card { min-height: 92px; }
    .core-user-dashboard-shell .core-chartjs-card-compact .core-chartjs-canvas-wrap { height: 165px; }
    .core-user-dashboard-shell .core-chartjs-card-compact .core-chart-drilldown { margin-inline: 12px; }
    .core-calendar-date-time { width: 62px; }
}


/* GCF 2.51.1 Rev4 — Tenant Kanban governance */
.settings-page-refined .kanban-admin-settings-rev4{display:grid;gap:16px;background:transparent;border:0;box-shadow:none;padding:0}
.kanban-admin-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 22px;border:1px solid #dbe4ef;border-radius:16px;background:linear-gradient(145deg,#fff,#f8fbff)}
.kanban-admin-intro-copy{max-width:760px}.kanban-admin-eyebrow,.kanban-admin-card-kicker{display:block;margin-bottom:5px;color:#2563eb;font-size:10px;font-weight:850;letter-spacing:.11em;text-transform:uppercase}.kanban-admin-intro h2{margin:0 0 6px;color:#0f172a;font-size:21px}.kanban-admin-intro p{margin:0;color:#64748b;font-size:13px;line-height:1.5}
.kanban-admin-responsibility-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.kanban-admin-responsibility{display:grid;gap:2px;padding:12px 14px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.kanban-admin-responsibility strong{color:#0f172a;font-size:12px}.kanban-admin-responsibility span{color:#64748b;font-size:11.5px}
.kanban-admin-card{display:grid;gap:16px;padding:18px 20px;border:1px solid #dbe4ef;border-radius:16px;background:#fff;box-shadow:0 7px 22px rgba(15,23,42,.035)}.kanban-admin-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.kanban-admin-card-head h3{margin:0 0 4px;color:#0f172a;font-size:16px}.kanban-admin-card-head p{margin:0;color:#64748b;font-size:12px;line-height:1.45}
.kanban-admin-policy-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:12px}.kanban-admin-field{display:grid;align-content:start;gap:6px;min-width:0}.kanban-admin-field>span{color:#334155;font-size:11.5px;font-weight:750}.kanban-admin-field small{color:#64748b;font-size:11px;line-height:1.4}.kanban-admin-field .form-input{min-height:40px}.kanban-admin-switch-row{display:flex;align-items:flex-start;gap:10px;padding:13px 14px;border:1px solid #dbe4ef;border-radius:11px;background:#f8fafc}.kanban-admin-switch-row input{margin-top:3px}.kanban-admin-switch-row span{display:grid;gap:3px}.kanban-admin-switch-row strong{color:#0f172a;font-size:12px}.kanban-admin-switch-row small{color:#64748b;font-size:11px;line-height:1.4}
.kanban-admin-enforcement{display:grid;gap:10px;padding-top:3px}.kanban-admin-enforcement-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px}.kanban-admin-enforcement-head strong{color:#0f172a;font-size:12px}.kanban-admin-enforcement-head span{color:#64748b;font-size:11px}.kanban-admin-enforced-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.kanban-admin-field-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.kanban-admin-field-grid.is-three{grid-template-columns:repeat(3,minmax(0,1fr))}.kanban-admin-field-grid.is-two{grid-template-columns:repeat(2,minmax(0,1fr))}.kanban-admin-number-wrap{display:flex;align-items:center;gap:6px}.kanban-admin-number-wrap .form-input{min-width:0;flex:1}.kanban-admin-number-wrap em{min-width:38px;color:#64748b;font-size:10.5px;font-style:normal;text-align:right}
.kanban-admin-visual-grid{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:16px;align-items:stretch}.kanban-admin-visual-preview{display:flex;align-items:flex-end;min-height:180px;padding:14px;border:1px solid #dbe4ef;border-radius:13px;color:#334155;font-size:11px;font-weight:750;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}.kanban-admin-color-input{padding:5px!important;height:40px}
.kanban-admin-card-maintenance{border-color:#fed7aa;background:#fffdfa}.kanban-admin-maintenance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.kanban-admin-maintenance-grid>div{padding:14px;border:1px solid #fed7aa;border-radius:12px;background:#fff}.kanban-admin-maintenance-grid strong{color:#7c2d12;font-size:12.5px}.kanban-admin-maintenance-grid p{margin:4px 0 12px;color:#78716c;font-size:11.5px;line-height:1.4}
.kanban-admin-actions-rev4{position:sticky;bottom:12px;z-index:3;display:flex!important;align-items:center;justify-content:space-between;gap:16px;padding:13px 15px!important;border:1px solid #dbe4ef!important;border-radius:13px;background:rgba(255,255,255,.96)!important;box-shadow:0 10px 28px rgba(15,23,42,.09);backdrop-filter:blur(8px)}.kanban-admin-actions-rev4>div:first-child{display:grid;gap:2px}.kanban-admin-actions-rev4 strong{color:#0f172a;font-size:11.5px}.kanban-admin-actions-rev4 span{color:#64748b;font-size:10.5px}.kanban-admin-actions-buttons{display:flex;gap:8px}
@media(max-width:980px){.kanban-admin-policy-grid,.kanban-admin-visual-grid{grid-template-columns:1fr}.kanban-admin-field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kanban-admin-enforced-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:680px){.kanban-admin-intro{flex-direction:column}.kanban-admin-intro .btn{width:100%}.kanban-admin-responsibility-grid,.kanban-admin-maintenance-grid,.kanban-admin-field-grid,.kanban-admin-field-grid.is-three,.kanban-admin-field-grid.is-two,.kanban-admin-enforced-grid{grid-template-columns:1fr!important}.kanban-admin-card{padding:15px}.kanban-admin-enforcement-head{align-items:flex-start;flex-direction:column;gap:3px}.kanban-admin-actions-rev4{position:static;align-items:stretch;flex-direction:column}.kanban-admin-actions-buttons{display:grid;grid-template-columns:1fr}.kanban-admin-actions-buttons .btn{width:100%}}


/* Tenant security gate shown before protected tenant surfaces. */
.tenant-security-gate-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #f3f6fa;
}
.tenant-security-gate-card {
    width: min(540px, 100%);
    padding: 34px;
    text-align: center;
    background: #fff;
    border: 1px solid #dce5ee;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(18, 38, 63, .10);
}
.tenant-security-gate-card h2 { margin: 14px 0 8px; color: #12263f; }
.tenant-security-gate-card p { color: #5e7086; line-height: 1.6; }
.tenant-security-gate-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #206bc4;
    background: #e9f2fd;
}
.tenant-security-gate-icon.error { color: #b42318; background: #feeceb; }
.tenant-security-gate-help { font-size: 13px; }
.tenant-security-gate-actions { margin-top: 22px; display: flex; justify-content: center; gap: 10px; }
@media (max-width: 600px) {
    .tenant-security-gate-screen { align-items: stretch; padding: 0; background: #fff; }
    .tenant-security-gate-card { border: 0; border-radius: 0; box-shadow: none; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 28px 20px; }
}

/* Global Tenant Vault status in the authenticated tenant shell. */
.gcf-vault-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-height: 30px;
    padding: 0.3rem 0.62rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--muted-foreground);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}
button.gcf-vault-status-pill { cursor: pointer; }
button.gcf-vault-status-pill:hover { background: var(--muted); }
.gcf-vault-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9aa7b5;
    box-shadow: 0 0 0 3px rgba(154, 167, 181, .14);
}
.gcf-vault-status-pill.unlocked { color: #157347; border-color: rgba(21, 115, 71, .25); background: rgba(25, 135, 84, .08); }
.gcf-vault-status-pill.unlocked .gcf-vault-status-dot { background: #198754; box-shadow: 0 0 0 3px rgba(25, 135, 84, .13); }
.gcf-vault-status-pill.locked { color: #9a6700; border-color: rgba(154, 103, 0, .25); background: rgba(255, 193, 7, .12); }
.gcf-vault-status-pill.locked .gcf-vault-status-dot { background: #d99b00; box-shadow: 0 0 0 3px rgba(217, 155, 0, .13); }
.gcf-vault-status-pill.not-configured { color: #8a3b12; border-color: rgba(138, 59, 18, .22); background: rgba(253, 126, 20, .08); }
.gcf-vault-status-pill.not-configured .gcf-vault-status-dot { background: #fd7e14; box-shadow: 0 0 0 3px rgba(253, 126, 20, .12); }
@media (max-width: 900px) {
    .gcf-vault-status-pill span:last-child { display: none; }
    .gcf-vault-status-pill { min-width: 30px; justify-content: center; padding-left: 0.48rem; padding-right: 0.48rem; }
}