/* =====================================================================
   SSO Portal — Design Tokens
   الفكرة البصرية: "المحور المركزي" (Hub) — نقطة واحدة تتفرّع منها كل الأنظمة،
   بنفس منطق SSO تحديدًا، وليس ديكورًا عشوائيًا.
   ===================================================================== */

:root {
    /* Color */
    --ink:        #0B1220;   /* خلفية أساسية أعمق */
    --panel:      #141F35;   /* بطاقات وأسطح */
    --panel-2:    #1B2A47;   /* أسطح مرتفعة */
    --panel-3:    #24365A;   /* أعلى مستوى ارتفاع (Hover/Active) */
    --accent:     #00C2A8;   /* اللون المميز — Hub Teal */
    --accent-rgb: 0, 194, 168;
    --accent-2:   #F2A93B;   /* تنبيهات/تمييز ثانوي */
    --danger:     #E5484D;
    --success:    #2FBF71;
    --text:       #EEF2FA;
    --muted:      #8592AC;
    --border:     rgba(232, 237, 245, 0.09);

    /* Type */
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --radius: 14px;
    --radius-sm: 10px;
    --shadow-1: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-2: 0 10px 30px rgba(0,0,0,0.32);
    --ease: cubic-bezier(.22,1,.36,1);
}

[data-theme="light"] {
    --ink:      #F3F5FA;
    --panel:    #FFFFFF;
    --panel-2:  #EEF1F8;
    --panel-3:  #E4E9F5;
    --text:     #0E1526;
    --muted:    #5B667E;
    --border:   rgba(16, 24, 40, 0.09);
    --shadow-1: 0 1px 2px rgba(16,24,40,0.06);
    --shadow-2: 0 16px 32px rgba(16,24,40,0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background:
        radial-gradient(1200px 600px at 90% -10%, rgba(var(--accent-rgb), 0.08), transparent 60%),
        var(--ink);
    color: var(--text);
    font-family: var(--font-body);
    transition: background .25s ease, color .25s ease;
    animation: page-fade-in .35s var(--ease);
}
@keyframes page-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

h1, h2, h3, h4, h5, h6, .brand-font {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}
h4.brand-font { font-weight: 600; }
p { line-height: 1.65; }

code, .mono, .token-display { font-family: var(--font-mono); }

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

/* ---------------- Hub Signature Graphic ---------------- */
.hub-node circle { transition: r .3s ease; }
.hub-line {
    stroke: var(--accent);
    stroke-width: 1.5;
    opacity: 0.35;
    stroke-dasharray: 4 4;
    animation: dash-flow 3s linear infinite;
}
@keyframes dash-flow { to { stroke-dashoffset: -40; } }
.hub-pulse {
    animation: pulse-ring 2.4s ease-out infinite;
    transform-origin: center;
}
@keyframes pulse-ring {
    0%   { opacity: .55; transform: scale(1); }
    100% { opacity: 0;   transform: scale(2.4); }
}

/* ---------------- Layout ---------------- */
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
}
@media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } }

.auth-visual {
    background:
        radial-gradient(circle at 30% 30%, var(--panel-2), var(--ink) 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 3rem;
}
.auth-visual::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(var(--accent-rgb), 0.14) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(circle at 50% 45%, black 0%, transparent 65%);
    pointer-events: none;
}

.auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.glass-card {
    background: rgba(20, 31, 53, 0.6);
    border: 1px solid var(--border);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-radius: var(--radius);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-2);
}
[data-theme="light"] .glass-card { background: rgba(255,255,255,0.8); }

.form-label { font-size: .85rem; font-weight: 500; margin-bottom: .4rem; }

.form-control, .form-select {
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: .7rem 1rem;
    border-radius: var(--radius-sm);
    font-size: .92rem;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-control:focus, .form-select:focus {
    background: var(--panel-2);
    color: var(--text);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}
.form-control::placeholder { color: var(--muted); }
.form-control:disabled { opacity: .55; }
.form-control-color { height: 42px; padding: .3rem; }

/* ---------------- Buttons ---------------- */
.btn { border-radius: var(--radius-sm); font-weight: 500; }
.btn-hub {
    background: linear-gradient(135deg, var(--accent), #0aa38d);
    color: #04211C;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    padding: .72rem 1.4rem;
    transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.btn-hub:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.32);
    color: #04211C;
    filter: brightness(1.04);
}
.btn-hub:active { transform: translateY(0); filter: brightness(.97); }
.btn-outline-danger { border-radius: var(--radius-sm); }

/* ---------------- Dashboard ---------------- */
.topbar {
    background: rgba(20, 31, 53, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    padding: .9rem 1.75rem;
    position: sticky; top: 0; z-index: 900;
}
[data-theme="light"] .topbar { background: rgba(255,255,255,0.78); }

.app-tile {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: transform .2s var(--ease), border-color .2s ease, box-shadow .2s ease;
    cursor: pointer;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.app-tile::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06), transparent 55%);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.app-tile:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--accent-rgb), 0.5);
}
.app-tile:hover::after { opacity: 1; }
.app-tile .icon-wrap {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), #0aa38d);
    display: flex; align-items: center; justify-content: center;
    color: #04211C; font-weight: 700; font-family: var(--font-display);
    overflow: hidden;
}

.stat-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    transition: border-color .2s ease, transform .2s ease;
}
.stat-card:hover { border-color: rgba(var(--accent-rgb), 0.35); transform: translateY(-2px); }
.stat-value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; }

.sidebar {
    background: var(--panel);
    border-inline-end: 1px solid var(--border);
    min-height: 100vh;
    position: sticky; top: 0;
}
.sidebar .nav-link {
    color: var(--muted);
    border-radius: var(--radius-sm);
    padding: .62rem .9rem;
    margin-bottom: .2rem;
    font-size: .92rem;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.sidebar .nav-link:hover { transform: translateX(-2px); }
.sidebar .nav-link.active, .sidebar .nav-link:hover {
    background: var(--panel-2);
    color: var(--text);
}
.sidebar .nav-link.active {
    border-inline-start: 3px solid var(--accent);
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.12), transparent);
    font-weight: 600;
}

.badge-fav { color: var(--accent-2); }
.badge { font-weight: 500; border-radius: 999px; padding: .38em .75em; font-size: .74rem; }

/* ---------------- Tables ---------------- */
.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { background: transparent; }
.table thead th { text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; font-weight: 600; padding-block: .9rem; }
.table tbody tr { border-top: 1px solid var(--border); transition: background .15s ease; }
.table tbody tr:hover { background: var(--panel-2); }
.table td, .table th { padding-block: .85rem; vertical-align: middle; }

/* ---------------- Modals ---------------- */
.modal-content { border-radius: var(--radius); box-shadow: var(--shadow-2); }
.modal-backdrop.show { opacity: .65; }

/* ---------------- Pagination ---------------- */
.page-link {
    background: var(--panel); border-color: var(--border); color: var(--text);
    border-radius: var(--radius-sm); margin-inline: 2px;
}
.page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: #04211C; }

/* ---------------- Brand / Logo ---------------- */
.brand-logo {
    width: 34px; height: 34px;
    border-radius: 8px;
    object-fit: contain;
    background: var(--panel-2);
}
.brand-logo-lg {
    width: 64px; height: 64px;
    border-radius: 16px;
    object-fit: contain;
    background: #FFFFFF;
    padding: 6px;
    border: 1px solid var(--border);
}
.brand-fallback {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    color: #04211C; font-weight: 700; font-family: var(--font-display);
}

/* ---------------- App Tile Logo ---------------- */
.app-tile .icon-wrap img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.app-tile .icon-wrap:has(img) { background: #FFFFFF; padding: 6px; }

/* أيقونات الأنظمة داخل بطاقات الاختيار (Picker Cards) بخلفية بيضاء دائمًا عند وجود شعار مرفوع */
.picker-icon:has(img) { background: #FFFFFF; padding: 4px; }
.picker-icon img { width: 100%; height: 100%; object-fit: contain; }

/* ---------------- Launch Transition Overlay ---------------- */
.launch-overlay {
    position: fixed; inset: 0;
    background:
        radial-gradient(900px 500px at 50% 30%, rgba(var(--accent-rgb), 0.10), transparent 60%),
        var(--ink);
    z-index: 3000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .35s var(--ease);
}
.launch-overlay.show { opacity: 1; pointer-events: all; }

/* سبينر دائري حقيقي يلف حول الأيقونة */
.launch-overlay .spinner-wrap {
    position: relative;
    width: 110px; height: 110px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.75rem;
}
.launch-overlay .spinner-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 3px solid var(--panel-2);
    border-top-color: var(--accent);
    border-inline-end-color: var(--accent);
    animation: spin-rotate 1s linear infinite;
}
@keyframes spin-rotate { to { transform: rotate(360deg); } }
.launch-overlay .launch-icon {
    width: 74px; height: 74px;
    border-radius: 18px;
    background: var(--panel);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: var(--shadow-1);
}
.launch-overlay .launch-icon:has(img) { background: #FFFFFF; padding: 8px; }
.launch-overlay .launch-icon img { width: 100%; height: 100%; object-fit: contain; }
.launch-overlay .launch-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: .4rem;
    animation: fade-up .4s var(--ease);
}
.launch-overlay .launch-sub { color: var(--muted); font-size: .9rem; animation: fade-up .5s var(--ease); }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.launch-overlay .launch-bar {
    width: 240px; height: 5px;
    background: var(--panel-2);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 1.75rem;
}
.launch-overlay .launch-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    width: 0%;
    border-radius: 999px;
    transition: width linear;
}

/* ---------------- Polish ---------------- */
.app-tile, .stat-card, .glass-card { box-shadow: var(--shadow-1); }
.app-tile:hover { box-shadow: var(--shadow-2); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--panel-2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--panel-3); }

/* ---------------- Picker Cards (Roles / Applications selection) ---------------- */
.picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .6rem;
}
.picker-card {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: var(--panel-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .65rem .8rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
    position: relative;
}
.picker-card:hover { border-color: rgba(var(--accent-rgb), 0.4); transform: translateY(-1px); }
.picker-card.selected {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
}
.picker-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.picker-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--panel-3);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted);
    flex-shrink: 0;
    overflow: hidden;
    font-size: .95rem;
}
.picker-card.selected .picker-icon { background: var(--accent); color: #04211C; }
.picker-icon img { width: 100%; height: 100%; object-fit: contain; }
.picker-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex-grow: 1; }
.picker-title { font-size: .88rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-sub { font-size: .74rem; color: var(--muted); }
.picker-system-badge {
    font-size: .65rem;
    background: var(--panel-3);
    color: var(--accent-2);
    padding: .1rem .4rem;
    border-radius: 999px;
    margin-inline-start: .3rem;
}
.picker-check { color: transparent; transition: color .15s ease; flex-shrink: 0; }
.picker-card.selected .picker-check { color: var(--accent); }

/* ---------------- Permissions Preview Chips ---------------- */
.perms-preview {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .8rem;
    min-height: 48px;
}
.perm-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 999px;
    padding: .25rem .65rem;
    font-size: .76rem;
    font-weight: 500;
}

/* ---------------- Status Chip Picker ---------------- */
.status-picker { display: flex; gap: .5rem; flex-wrap: wrap; }
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--panel-2);
    color: var(--muted);
    font-size: .85rem;
    cursor: pointer;
    transition: all .15s ease;
}
.status-chip:hover { border-color: rgba(var(--accent-rgb), 0.4); }
.status-chip.selected {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
    font-weight: 600;
}

/* ---------------- Session Cards ---------------- */
.session-card {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel-2);
    margin-bottom: .6rem;
    transition: border-color .15s ease;
}
.session-card:last-child { margin-bottom: 0; }
.session-card.session-current {
    border-color: rgba(var(--accent-rgb), 0.45);
    background: rgba(var(--accent-rgb), 0.06);
}
.session-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: var(--panel-3);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    color: var(--muted);
    flex-shrink: 0;
}
.session-current .session-icon { background: var(--accent); color: #04211C; }
.session-body { flex-grow: 1; min-width: 0; }
.session-device { font-size: .92rem; font-weight: 600; }
.session-browser { font-size: .82rem; color: var(--muted); margin-top: 2px; display: flex; align-items: center; gap: .3rem; }
.session-meta {
    display: flex; flex-wrap: wrap; gap: .9rem;
    font-size: .78rem; color: var(--muted);
    margin-top: .5rem;
}
.session-meta span { display: flex; align-items: center; gap: .3rem; }
.session-meta-sub { font-size: .72rem; color: var(--muted); opacity: .75; margin-top: .2rem; }
.session-badge-current {
    display: inline-flex; align-items: center; gap: .25rem;
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent);
    font-size: .7rem; font-weight: 600;
    padding: .15rem .55rem;
    border-radius: 999px;
}
.session-badge-active {
    display: inline-flex; align-items: center;
    color: var(--success);
    font-size: .72rem;
}
.session-badge-active .bi-dot { font-size: 1.3rem; margin-inline-end: -.2rem; }
.session-current-hint {
    font-size: .74rem;
    color: var(--muted);
    white-space: nowrap;
    align-self: center;
}