/* ==================================================
   Constellation – Aurora Glass Theme
   Extended with auth, admin, calendar, kanban, modals
================================================== */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

/* ── CSS Variables ─────────────────────────────────── */
:root {
    --bg-primary: #0d0d12;
    --bg-secondary: rgba(20, 20, 28, 0.6);
    --bg-tertiary: rgba(30, 30, 40, 0.5);
    --bg-hover: rgba(255, 255, 255, 0.08);
    --bg-active: rgba(255, 255, 255, 0.12);

    --text-primary: #f0f0f5;
    --text-secondary: #a8a8b3;
    --text-muted: #6d6e78;
    --text: #f0f0f5;

    --accent-primary: #7c5cff;
    --accent-hover: #6a4de6;
    --accent-subtle: rgba(124, 92, 255, 0.15);
    --primary: #7c5cff;
    --primary-glow: rgba(124, 92, 255, 0.4);

    --glass: rgba(25, 25, 35, 0.65);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --blur: 20px;
    --card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));

    --border-color: rgba(255, 255, 255, 0.1);
    --border-subtle: rgba(255, 255, 255, 0.06);

    --status-todo: #6d6e72;
    --status-progress: #f0b132;
    --status-done: #3ba55c;
    --status-blocked: #ed4245;

    --priority-low: #3ba55c;
    --priority-medium: #f0b132;
    --priority-high: #ed4245;
    --priority-critical: #ff6b6b;

    --severity-low: #3ba55c;
    --severity-medium: #f0b132;
    --severity-high: #ed4245;
    --severity-critical: #ff6b6b;

    --sidebar-width: 260px;
    --detail-panel-width: 420px;
    --dock-gap: 12px;
    --dock-radius: 18px;
    --dock-padding: 12px;
    --item-height: 44px;
    --item-radius: 12px;
    --item-gap: 6px;
    --icon-size: 22px;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;

    --transition: 0.3s ease;
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;
}

@media (prefers-reduced-motion: reduce) {
    :root { --transition:0s; --transition-fast:0s; --transition-normal:0s; --transition-slow:0s; }
}

/* ── Reset ─────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body {
    height:100%;
    font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size:14px; font-weight:500; line-height:1.5;
    color:var(--text-primary); background:var(--bg-primary); overflow:hidden;
}
.fa,.fas,.far,.fal,.fab,i[class^="fa-"] {
    font-family:"Font Awesome 6 Free","Font Awesome 6 Brands"!important; font-weight:900;
}

/* ── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.25); }
* { scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.15) transparent; }

/* ── Glass ─────────────────────────────────────────── */
.liquid-glass {
    background:var(--glass);
    backdrop-filter:blur(var(--blur)) saturate(1.3);
    -webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);
    border:1px solid var(--glass-border);
    box-shadow:var(--glass-shadow);
}

/* ══════════════════════════════════════════════════════
   APP LAYOUT
   ══════════════════════════════════════════════════════ */
.app {
    display:flex; height:100vh; position:relative;
    background:linear-gradient(135deg,#0d0d12 0%,#1a1a24 50%,#0d0d12 100%);
}
.app::before {
    content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
    background:
        radial-gradient(ellipse at 20% 20%,rgba(124,92,255,.08) 0%,transparent 50%),
        radial-gradient(ellipse at 80% 80%,rgba(124,92,255,.05) 0%,transparent 50%),
        radial-gradient(ellipse at 50% 50%,rgba(100,100,150,.03) 0%,transparent 70%);
}

/* ── Sidebar ───────────────────────────────────────── */
.sidebar {
    position:relative; width:var(--sidebar-width);
    margin:var(--dock-gap); margin-right:0;
    border-radius:var(--dock-radius);
    display:flex; flex-direction:column; flex-shrink:0; z-index:10;
    transition:width var(--transition),margin var(--transition);
}
.org-switcher {
    display:flex; align-items:center; gap:12px;
    padding:16px; margin:var(--dock-padding); margin-bottom:0;
    border-radius:var(--item-radius); cursor:pointer;
    transition:all var(--transition); border:1px solid transparent;
}
.org-switcher:hover { background:var(--card-gradient); border-color:var(--glass-border); box-shadow:0 4px 12px rgba(0,0,0,.2); }
.org-icon {
    width:42px; height:42px;
    background:linear-gradient(135deg,var(--accent-primary),#9b7cff);
    border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center;
    font-size:18px; color:#fff; box-shadow:0 4px 12px var(--primary-glow); flex-shrink:0;
}
.org-info { flex:1; display:flex; flex-direction:column; min-width:0; }
.org-name { font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.org-handle { font-size:12px; font-weight:500; color:var(--text-secondary); }
.org-dropdown { color:var(--text-muted); font-size:12px; transition:transform var(--transition); }
.org-switcher:hover .org-dropdown { transform:translateY(2px); }

/* Org dropdown menu */
.org-menu {
    display:none; position:absolute; top:82px; left:var(--dock-padding); right:var(--dock-padding);
    background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--item-radius);
    box-shadow:var(--glass-shadow); z-index:100; padding:8px; backdrop-filter:blur(var(--blur));
}
.org-menu.open { display:block; }
.org-menu-item {
    display:flex; align-items:center; gap:10px; width:100%;
    padding:10px 12px; border-radius:var(--radius-sm);
    background:none; border:none; color:var(--text-secondary); font:inherit; cursor:pointer;
    transition:all var(--transition);
}
.org-menu-item:hover { background:var(--bg-hover); color:var(--text-primary); }
.org-menu-item.active { color:var(--accent-primary); }
.org-menu-item i { width:18px; text-align:center; }

.sidebar-separator { width:60%; height:1px; background:var(--glass-border); margin:8px auto; }

/* Projects nav */
.projects-nav { flex:1; overflow-y:auto; padding:var(--dock-padding); padding-top:8px; }
.nav-header { padding:8px 12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); }
.projects-list { list-style:none; }
.project-item { margin:2px 0; }
.project-header {
    display:flex; align-items:center; gap:10px; padding:10px 14px; height:var(--item-height);
    border-radius:var(--item-radius); cursor:pointer; transition:all var(--transition);
    color:var(--text-secondary); border:1px solid transparent; font-weight:600;
}
.project-header:hover { background:var(--card-gradient); border-color:var(--glass-border); color:var(--text-primary); box-shadow:0 4px 12px rgba(0,0,0,.2); }
.project-header.expanded { background:var(--bg-active); color:var(--text-primary); }
.project-icon {
    width:28px; height:28px; border-radius:var(--radius-sm);
    display:flex; align-items:center; justify-content:center;
    font-size:13px; color:#fff; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.project-name { flex:1; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-toggle { font-size:10px; color:var(--text-muted); transition:transform var(--transition); }
.project-header.expanded .project-toggle { transform:rotate(90deg); }

/* Feed list */
.feed-list {
    list-style:none; overflow:hidden; max-height:0;
    transition:max-height var(--transition-normal);
    margin-left:20px; border-left:1px solid var(--glass-border); padding-left:8px;
}
.feed-list.expanded { max-height:500px; }
.feed-item {
    display:flex; align-items:center; gap:10px; padding:8px 14px; margin:2px 0;
    border-radius:var(--item-radius); cursor:pointer; color:var(--text-secondary);
    font-size:13px; font-weight:500; transition:all var(--transition); border:1px solid transparent;
}
.feed-item:hover { background:var(--card-gradient); border-color:var(--glass-border); color:var(--text-primary); }
.feed-item.active {
    background:linear-gradient(135deg,rgba(124,92,255,.2),rgba(124,92,255,.1));
    border-color:rgba(124,92,255,.3); color:var(--accent-primary);
    box-shadow:0 0 20px var(--primary-glow);
}
.feed-item i { width:18px; font-size:13px; }

/* Sidebar bottom */
.sidebar-bottom {
    display:flex; flex-direction:column; gap:2px;
    padding:var(--dock-padding); border-top:1px solid var(--glass-border);
}
.sidebar-bottom-btn {
    display:flex; align-items:center; gap:10px; width:100%;
    padding:10px 14px; border-radius:var(--item-radius);
    background:none; border:none; color:var(--text-secondary);
    font:inherit; font-size:13px; font-weight:600; cursor:pointer;
    transition:all var(--transition);
}
.sidebar-bottom-btn:hover { background:var(--card-gradient); color:var(--text-primary); }
.sidebar-bottom-btn i { width:18px; font-size:14px; }

/* ── Main Panel ────────────────────────────────────── */
.main-panel {
    flex:1; display:flex; flex-direction:column; min-width:0;
    margin:var(--dock-gap); border-radius:var(--dock-radius); z-index:5; overflow:hidden;
}
.main-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 24px; border-bottom:1px solid var(--glass-border); background:rgba(0,0,0,.2);
}
.header-left { display:flex; align-items:center; gap:12px; }
.header-title { display:flex; align-items:center; gap:12px; }
.header-title i { font-size:20px; color:var(--accent-primary); filter:drop-shadow(0 0 8px var(--primary-glow)); }
.header-title h1 { font-size:18px; font-weight:700; }
.header-actions { display:flex; gap:8px; align-items:center; }

.btn-icon {
    width:38px; height:38px; border:1px solid transparent; background:transparent;
    color:var(--text-secondary); border-radius:var(--item-radius); cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:all var(--transition);
}
.btn-icon:hover { background:var(--card-gradient); border-color:var(--glass-border); color:var(--text-primary); box-shadow:0 4px 12px rgba(0,0,0,.2); }

/* Small text button */
.btn-sm {
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 14px; border-radius:var(--radius-sm); font:inherit;
    font-size:12px; font-weight:600; cursor:pointer; transition:all var(--transition);
    border:1px solid var(--glass-border); background:var(--card-gradient); color:var(--text-secondary);
}
.btn-sm:hover { background:var(--bg-hover); color:var(--text-primary); }
.btn-sm.active,.btn-sm.btn-accent { background:var(--accent-subtle); color:var(--accent-primary); border-color:rgba(124,92,255,.3); }
.btn-sm.btn-primary-sm { background:var(--accent-primary); color:#fff; border-color:var(--accent-primary); }
.btn-sm.btn-primary-sm:hover { background:var(--accent-hover); }
.btn-sm.btn-danger { background:rgba(237,66,69,.15); color:#ed4245; border-color:rgba(237,66,69,.3); }
.btn-sm.btn-danger:hover { background:rgba(237,66,69,.25); }

/* ── Feed ──────────────────────────────────────────── */
.feed-container { flex:1; overflow-y:auto; padding:24px; }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--text-muted); gap:16px; }
.empty-state i { font-size:56px; opacity:.4; filter:drop-shadow(0 0 20px var(--primary-glow)); }
.empty-state p { font-size:15px; font-weight:500; }

/* ── Cards ─────────────────────────────────────────── */
.card {
    background:var(--card-gradient); border:1px solid var(--glass-border);
    border-radius:var(--radius-lg); padding:18px; margin-bottom:14px;
    cursor:pointer; transition:all var(--transition); backdrop-filter:blur(10px);
    animation:slideUp var(--transition-normal) ease-out;
}
.card:hover {
    background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
    border-color:rgba(255,255,255,.15); transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 0 1px rgba(124,92,255,.1);
}
.card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.card-title { font-weight:600; font-size:15px; line-height:1.4; }
.card-meta { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; font-weight:500; color:var(--text-secondary); }
.card-meta-item { display:flex; align-items:center; gap:6px; }
.card-meta-item i { font-size:11px; color:var(--text-muted); }
.card-content { color:var(--text-secondary); font-size:14px; font-weight:500; line-height:1.7; }

/* Decision outcome */
.decision-outcome {
    background:linear-gradient(135deg,rgba(124,92,255,.15),rgba(124,92,255,.05));
    border-left:3px solid var(--accent-primary); padding:14px; margin-top:12px;
    border-radius:0 var(--radius-md) var(--radius-md) 0; font-size:13px; font-weight:500; color:var(--text-primary);
}

/* ── Badges ────────────────────────────────────────── */
.badge {
    display:inline-flex; align-items:center; padding:5px 10px; border-radius:var(--radius-sm);
    font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; border:1px solid transparent;
}
.badge-status-todo       { background:rgba(109,110,114,.2); color:var(--status-todo); }
.badge-status-in-progress{ background:rgba(240,177,50,.15); color:var(--status-progress); }
.badge-status-done       { background:rgba(59,165,92,.15);  color:var(--status-done); }
.badge-status-blocked    { background:rgba(237,66,69,.15);  color:var(--status-blocked); }
.badge-priority-low      { background:rgba(59,165,92,.15);  color:var(--priority-low); }
.badge-priority-medium   { background:rgba(240,177,50,.15); color:var(--priority-medium); }
.badge-priority-high     { background:rgba(237,66,69,.15);  color:var(--priority-high); }
.badge-priority-critical { background:rgba(255,107,107,.15);color:var(--priority-critical); }
.badge-severity-low      { background:rgba(59,165,92,.15);  color:var(--severity-low); }
.badge-severity-medium   { background:rgba(240,177,50,.15); color:var(--severity-medium); }
.badge-severity-high     { background:rgba(237,66,69,.15);  color:var(--severity-high); }
.badge-severity-critical { background:rgba(255,107,107,.15);color:var(--severity-critical); }
.badge-role-admin        { background:rgba(124,92,255,.15); color:var(--accent-primary); }
.badge-role-member       { background:rgba(109,110,114,.2); color:var(--text-secondary); }

/* ── Avatar ────────────────────────────────────────── */
.avatar {
    width:26px; height:26px; border-radius:50%;
    background:linear-gradient(135deg,var(--accent-primary),#9b7cff);
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:700; color:#fff; box-shadow:0 2px 8px var(--primary-glow); flex-shrink:0;
}
.avatar-lg { width:42px; height:42px; font-size:14px; }

/* ── Detail Panel ──────────────────────────────────── */
.detail-panel {
    position:fixed; top:var(--dock-gap); right:var(--dock-gap); bottom:var(--dock-gap);
    width:var(--detail-panel-width);
    border-radius:var(--dock-radius);
    box-shadow:var(--glass-shadow),0 0 40px rgba(0,0,0,.4);
    transform:translateX(calc(100% + var(--dock-gap)));
    transition:transform var(--transition-slow); z-index:100;
    display:flex; flex-direction:column;
}
.detail-panel.open { transform:translateX(0); }
.detail-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 22px; border-bottom:1px solid var(--glass-border); background:rgba(0,0,0,.2);
}
.detail-header h2 { font-size:16px; font-weight:700; }
.btn-close { color:var(--text-muted); }
.btn-close:hover { color:var(--text-primary); background:rgba(255,107,107,.15); }
.detail-content { flex:1; overflow-y:auto; padding:22px; }

/* Detail sections */
.detail-section { margin-bottom:24px; }
.detail-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin-bottom:12px; }
.detail-title { font-size:20px; font-weight:700; line-height:1.4; margin-bottom:16px; }
.detail-description { color:var(--text-secondary); line-height:1.7; font-size:14px; font-weight:500; }

.detail-meta {
    display:flex; flex-direction:column; gap:14px;
    background:var(--card-gradient); border:1px solid var(--glass-border);
    border-radius:var(--radius-md); padding:16px;
}
.detail-meta-row { display:flex; align-items:center; justify-content:space-between; }
.detail-meta-label { font-size:13px; font-weight:500; color:var(--text-muted); }
.detail-meta-value { font-size:13px; font-weight:600; color:var(--text-primary); display:flex; align-items:center; gap:8px; }

/* Comments */
.comments-list { display:flex; flex-direction:column; gap:16px; }
.comment {
    display:flex; gap:12px; padding:14px;
    background:var(--card-gradient); border:1px solid var(--glass-border); border-radius:var(--radius-md);
}
.comment-avatar { flex-shrink:0; }
.comment-content { flex:1; min-width:0; }
.comment-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.comment-author { font-weight:700; font-size:13px; }
.comment-time { font-size:12px; font-weight:500; color:var(--text-muted); }
.comment-text { font-size:13px; font-weight:500; color:var(--text-secondary); line-height:1.6; }

/* Comment form */
.comment-form { display:flex; gap:8px; margin-top:12px; }
.comment-form input {
    flex:1; padding:10px 14px; border-radius:var(--radius-sm);
    background:var(--bg-tertiary); border:1px solid var(--glass-border);
    color:var(--text-primary); font:inherit; font-size:13px; outline:none;
    transition:border-color var(--transition);
}
.comment-form input:focus { border-color:var(--accent-primary); }

/* Repro steps */
.repro-steps {
    background:var(--card-gradient); border:1px solid var(--glass-border);
    border-radius:var(--radius-md); padding:18px;
}
.repro-steps ol { margin:0; padding-left:20px; color:var(--text-secondary); font-weight:500; }
.repro-steps li { margin-bottom:10px; line-height:1.6; }
.repro-steps li:last-child { margin-bottom:0; }

/* ── Overlay ───────────────────────────────────────── */
.overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.6);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:all var(--transition-normal); z-index:50;
}
.overlay.visible { opacity:1; visibility:visible; }

/* ══════════════════════════════════════════════════════
   AUTH PAGES
   ══════════════════════════════════════════════════════ */
.auth-page {
    display:flex; align-items:center; justify-content:center; min-height:100vh;
    background:linear-gradient(135deg,#0d0d12 0%,#1a1a24 50%,#0d0d12 100%);
    padding:20px;
}
.auth-page::before {
    content:''; position:fixed; inset:0; pointer-events:none;
    background:
        radial-gradient(ellipse at 30% 30%,rgba(124,92,255,.1) 0%,transparent 50%),
        radial-gradient(ellipse at 70% 70%,rgba(124,92,255,.06) 0%,transparent 50%);
}
.auth-card {
    width:100%; max-width:420px; padding:40px; border-radius:var(--dock-radius);
    position:relative; z-index:1;
}
.auth-header { text-align:center; margin-bottom:32px; }
.auth-logo {
    width:64px; height:64px; margin:0 auto 16px;
    background:linear-gradient(135deg,var(--accent-primary),#9b7cff);
    border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center;
    font-size:28px; color:#fff; box-shadow:0 8px 24px var(--primary-glow);
}
.auth-header h1 { font-size:24px; font-weight:800; margin-bottom:4px; }
.auth-header p { color:var(--text-secondary); font-size:14px; }
.auth-form { display:flex; flex-direction:column; gap:18px; }
.auth-footer { text-align:center; margin-top:24px; color:var(--text-muted); font-size:13px; }
.auth-footer a { color:var(--accent-primary); text-decoration:none; font-weight:600; }
.auth-footer a:hover { text-decoration:underline; }

/* Flash messages */
.flash-container { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:8px; }
.flash-message {
    padding:12px 20px; border-radius:var(--radius-md); font-size:13px; font-weight:600;
    backdrop-filter:blur(16px); border:1px solid var(--glass-border); min-width:280px; text-align:center;
}
.flash-error { background:rgba(237,66,69,.2); color:#ff6b6b; border-color:rgba(237,66,69,.3); }
.flash-success { background:rgba(59,165,92,.2); color:#3ba55c; border-color:rgba(59,165,92,.3); }

/* ── Form elements ─────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:12px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.3px; }
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="datetime-local"], input[type="number"],
input[type="tel"], input[type="url"],
textarea, select {
    width:100%; padding:12px 16px; border-radius:var(--item-radius);
    background:var(--bg-tertiary); border:1px solid var(--glass-border);
    color:var(--text-primary); font:inherit; font-size:14px; outline:none;
    transition:border-color var(--transition),box-shadow var(--transition);
}
input:focus, textarea:focus, select:focus {
    border-color:var(--accent-primary); box-shadow:0 0 0 3px var(--accent-subtle);
}
input::placeholder, textarea::placeholder { color:var(--text-muted); }
textarea { min-height:100px; resize:vertical; }
select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236d6e78' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
select option { background:var(--bg-primary); color:var(--text-primary); }

.btn-primary {
    width:100%; padding:14px; border:none; border-radius:var(--item-radius);
    background:linear-gradient(135deg,var(--accent-primary),#9b7cff);
    color:#fff; font:inherit; font-size:15px; font-weight:700; cursor:pointer;
    transition:all var(--transition); box-shadow:0 4px 16px var(--primary-glow);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 8px 24px var(--primary-glow); }

.form-row { display:flex; gap:12px; }
.form-row .form-group { flex:1; }

/* ══════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════ */
.modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
    display:none; align-items:center; justify-content:center; z-index:200; padding:20px;
}
.modal-overlay.open { display:flex; }
.modal {
    width:100%; max-width:560px; max-height:85vh; border-radius:var(--dock-radius);
    display:flex; flex-direction:column; overflow:hidden;
}
.modal-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 22px; border-bottom:1px solid var(--glass-border); background:rgba(0,0,0,.2);
}
.modal-header h2 { font-size:16px; font-weight:700; }
.modal-body {
    flex:1; overflow-y:auto; padding:22px;
    display:flex; flex-direction:column; gap:18px;
}

/* ══════════════════════════════════════════════════════
   VIEW TOGGLES
   ══════════════════════════════════════════════════════ */
.view-toggle { display:flex; gap:4px; background:var(--bg-tertiary); border-radius:var(--radius-sm); padding:3px; }
.view-toggle .btn-sm { border:none; background:transparent; padding:6px 12px; border-radius:4px; }
.view-toggle .btn-sm.active { background:var(--accent-primary); color:#fff; }

/* ══════════════════════════════════════════════════════
   GRID VIEW
   ══════════════════════════════════════════════════════ */
.grid-view { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.grid-view .card { margin-bottom:0; }

/* ══════════════════════════════════════════════════════
   KANBAN BOARD
   ══════════════════════════════════════════════════════ */
.kanban-board { display:flex; gap:16px; overflow-x:auto; padding-bottom:12px; min-height:400px; }
.kanban-column {
    flex:0 0 280px; display:flex; flex-direction:column;
    background:var(--bg-tertiary); border:1px solid var(--glass-border);
    border-radius:var(--radius-lg); overflow:hidden;
}
.kanban-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; border-bottom:1px solid var(--glass-border);
    background:rgba(0,0,0,.15);
}
.kanban-status { font-size:13px; font-weight:700; text-transform:capitalize; }
.kanban-count {
    width:24px; height:24px; border-radius:50%; background:var(--bg-hover);
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700; color:var(--text-muted);
}
.kanban-cards { flex:1; padding:12px; display:flex; flex-direction:column; gap:10px; min-height:80px; }
.kanban-cards.drag-over { background:rgba(124,92,255,.08); }
.kanban-card {
    padding:14px; border-radius:var(--radius-md); cursor:grab;
    background:var(--card-gradient); border:1px solid var(--glass-border);
    transition:all var(--transition);
}
.kanban-card:hover { border-color:rgba(255,255,255,.15); transform:translateY(-1px); }
.kanban-card.dragging { opacity:.5; }
.kanban-card .card-title { font-size:13px; margin-bottom:8px; display:block; }

/* Kanban column status colours */
.kanban-column[data-status="todo"] .kanban-header        { border-bottom-color:var(--status-todo); }
.kanban-column[data-status="in-progress"] .kanban-header { border-bottom-color:var(--status-progress); }
.kanban-column[data-status="done"] .kanban-header        { border-bottom-color:var(--status-done); }
.kanban-column[data-status="blocked"] .kanban-header     { border-bottom-color:var(--status-blocked); }

/* ══════════════════════════════════════════════════════
   CALENDAR
   ══════════════════════════════════════════════════════ */
.calendar-view { display:flex; flex-direction:column; gap:16px; }
.calendar-nav { display:flex; align-items:center; gap:12px; }
.calendar-nav h3 { flex:1; text-align:center; font-size:16px; font-weight:700; }
.calendar-grid {
    display:grid; grid-template-columns:repeat(7,1fr); gap:1px;
    background:var(--glass-border); border:1px solid var(--glass-border);
    border-radius:var(--radius-md); overflow:hidden;
}
.cal-header {
    padding:10px; text-align:center; font-size:11px; font-weight:700;
    text-transform:uppercase; color:var(--text-muted); background:rgba(0,0,0,.2);
}
.cal-day {
    min-height:90px; padding:8px; background:var(--bg-tertiary); cursor:pointer;
    transition:background var(--transition); position:relative;
}
.cal-day:hover { background:var(--bg-hover); }
.cal-day.today { box-shadow:inset 0 0 0 2px var(--accent-primary); }
.cal-day.other-month { opacity:.35; }
.cal-day.selected { background:var(--accent-subtle); }
.day-number { font-size:12px; font-weight:600; color:var(--text-secondary); }
.day-events { margin-top:4px; display:flex; flex-direction:column; gap:2px; }
.day-event {
    padding:2px 6px; border-radius:3px; font-size:10px; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff;
}
.calendar-events-panel {
    background:var(--card-gradient); border:1px solid var(--glass-border);
    border-radius:var(--radius-md); padding:16px; margin-top:8px;
}
.calendar-events-panel h4 { font-size:13px; font-weight:700; margin-bottom:12px; }
.cal-event-card {
    display:flex; align-items:center; gap:12px; padding:10px;
    border-radius:var(--radius-sm); background:var(--bg-tertiary); margin-bottom:8px;
    border-left:3px solid var(--accent-primary); cursor:pointer;
    transition:background var(--transition);
}
.cal-event-card:hover { background:var(--bg-hover); }
.cal-event-time { font-size:11px; font-weight:600; color:var(--text-muted); min-width:70px; }
.cal-event-info { flex:1; }
.cal-event-title { font-size:13px; font-weight:600; }
.cal-event-project { font-size:11px; color:var(--text-muted); }

/* ══════════════════════════════════════════════════════
   TEAM VIEW
   ══════════════════════════════════════════════════════ */
.team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.team-card {
    display:flex; align-items:center; gap:14px; padding:16px;
    background:var(--card-gradient); border:1px solid var(--glass-border);
    border-radius:var(--radius-lg); transition:all var(--transition);
}
.team-card:hover { border-color:rgba(255,255,255,.15); }
.team-card .avatar { width:42px; height:42px; font-size:14px; }
.team-info { flex:1; }
.team-name { font-weight:600; font-size:14px; }
.team-username { font-size:12px; color:var(--text-muted); }

/* ══════════════════════════════════════════════════════
   GITHUB LOG
   ══════════════════════════════════════════════════════ */
.git-timeline { display:flex; flex-direction:column; gap:0; position:relative; padding-left:24px; }
.git-timeline::before { content:''; position:absolute; left:8px; top:0; bottom:0; width:2px; background:var(--glass-border); }
.git-entry {
    position:relative; padding:12px 16px; margin-bottom:8px;
    background:var(--card-gradient); border:1px solid var(--glass-border);
    border-radius:var(--radius-md);
}
.git-entry::before {
    content:''; position:absolute; left:-20px; top:18px; width:10px; height:10px;
    background:var(--accent-primary); border-radius:50%; box-shadow:0 0 8px var(--primary-glow);
}
.git-title { font-size:13px; font-weight:600; margin-bottom:4px; }
.git-desc { font-size:12px; color:var(--text-secondary); margin-bottom:6px; }
.git-meta { font-size:11px; color:var(--text-muted); display:flex; gap:12px; }

/* ══════════════════════════════════════════════════════
   ADMIN PANEL
   ══════════════════════════════════════════════════════ */
.admin-tabs {
    display:flex; gap:4px; border-bottom:1px solid var(--glass-border);
    margin-bottom:20px; padding-bottom:0;
}
.admin-tab {
    padding:10px 18px; border:none; background:none; color:var(--text-muted);
    font:inherit; font-size:13px; font-weight:600; cursor:pointer;
    border-bottom:2px solid transparent; transition:all var(--transition);
    margin-bottom:-1px;
}
.admin-tab:hover { color:var(--text-primary); }
.admin-tab.active { color:var(--accent-primary); border-bottom-color:var(--accent-primary); }
.admin-section { display:none; }
.admin-section.active { display:block; }
.admin-form { display:flex; flex-direction:column; gap:16px; max-width:500px; }

.member-row {
    display:flex; align-items:center; gap:14px; padding:12px 16px;
    background:var(--card-gradient); border:1px solid var(--glass-border);
    border-radius:var(--radius-md); margin-bottom:8px;
}
.member-row .avatar { width:36px; height:36px; font-size:12px; }
.member-info { flex:1; }
.member-name { font-weight:600; font-size:14px; }
.member-handle { font-size:12px; color:var(--text-muted); }
.member-actions { display:flex; gap:8px; align-items:center; }
.member-actions select { padding:6px 30px 6px 10px; font-size:12px; min-width:100px; }

/* ══════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════ */
.mobile-nav {
    display:none; position:fixed; bottom:0; left:0; right:0; height:64px;
    background:var(--glass); backdrop-filter:blur(var(--blur)) saturate(1.3);
    -webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);
    border-top:1px solid var(--glass-border); z-index:300; padding:0 8px;
    padding-bottom:env(safe-area-inset-bottom,0);
}
.mobile-nav-inner { display:flex; align-items:center; justify-content:space-around; height:100%; max-width:400px; margin:0 auto; }
.mobile-nav-item {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; padding:8px 16px; border-radius:var(--item-radius);
    background:transparent; border:none; color:var(--text-muted);
    font-size:10px; font-weight:600; font-family:'Poppins',sans-serif; cursor:pointer;
    transition:all var(--transition);
}
.mobile-nav-item i { font-size:20px; }
.mobile-nav-item:hover,.mobile-nav-item.active { color:var(--accent-primary); }
.mobile-nav-item.active { background:var(--accent-subtle); }

.mobile-back {
    display:none; align-items:center; gap:8px; padding:8px 12px; margin:12px; margin-bottom:0;
    border-radius:var(--item-radius); background:var(--card-gradient); border:1px solid var(--glass-border);
    color:var(--text-secondary); font-size:13px; font-weight:600; font-family:'Poppins',sans-serif;
    cursor:pointer; transition:all var(--transition);
}
.mobile-back:hover { background:var(--bg-hover); color:var(--text-primary); }
.mobile-back i { font-size:14px; }

@media (max-width:768px) {
    .app { flex-direction:column; }
    .app::before { z-index:-1; }
    .mobile-nav { display:block; }
    .mobile-back { display:flex; }
    .sidebar,.main-panel,.detail-panel {
        position:fixed; top:0; left:0; right:0; bottom:64px;
        width:100%; margin:0; border-radius:0; border:none; z-index:10;
    }
    .sidebar { z-index:20; transform:translateX(0); transition:transform var(--transition-slow),opacity var(--transition-slow); }
    .sidebar.hidden { transform:translateX(-100%); opacity:0; pointer-events:none; }
    .main-panel { z-index:30; transform:translateX(100%); opacity:0; pointer-events:none; transition:transform var(--transition-slow),opacity var(--transition-slow); }
    .main-panel.active { transform:translateX(0); opacity:1; pointer-events:auto; }
    .detail-panel { top:0; bottom:64px; z-index:40; transform:translateX(100%); border-radius:0; }
    .detail-panel.open { transform:translateX(0); }
    .org-dropdown { display:none; }
    .org-switcher { margin:8px; padding:14px; }
    .sidebar-separator { margin:4px auto; }
    .projects-nav { padding:8px; }
    .feed-container { padding:16px; padding-bottom:24px; }
    .card { padding:14px; margin-bottom:12px; }
    .detail-content { padding:16px; padding-bottom:24px; }
    .overlay { display:none; }
    .main-header { padding:14px 16px; }
    .header-title h1 { font-size:16px; }
    .detail-header { padding:14px 16px; }
    .detail-panel .btn-close { display:none; }
    .kanban-board { min-height:300px; }
    .kanban-column { flex:0 0 240px; }
    .calendar-grid .cal-day { min-height:60px; }
}
@media (max-width:380px) {
    .org-name { font-size:13px; }
    .org-handle { font-size:11px; }
    .project-header { padding:8px 10px; }
    .project-name { font-size:13px; }
    .card-title { font-size:14px; }
    .mobile-nav-item { padding:8px 12px; }
    .mobile-nav-item span { display:none; }
}
@supports (padding:env(safe-area-inset-bottom)) {
    .mobile-nav { padding-bottom:env(safe-area-inset-bottom); height:calc(64px + env(safe-area-inset-bottom)); }
    @media (max-width:768px) { .sidebar,.main-panel,.detail-panel { bottom:calc(64px + env(safe-area-inset-bottom)); } }
}

/* ── Animations ────────────────────────────────────── */
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ── Focus & Selection ─────────────────────────────── */
button:focus-visible,.project-header:focus-visible,.feed-item:focus-visible,.card:focus-visible {
    outline:2px solid var(--accent-primary); outline-offset:2px; box-shadow:0 0 0 4px var(--primary-glow);
}
.sidebar,.org-switcher,.project-header,.feed-item,.card,.detail-panel,.mobile-nav { user-select:none; -webkit-user-select:none; }
.card-content,.detail-description,.comment-text { user-select:text; -webkit-user-select:text; }