:root {
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --indigo-50: #eef2ff;
    --indigo-200: #c7d2fe;
    --indigo-500: #6366f1;
    --indigo-600: #4f46e5;
    --indigo-700: #4338ca;
    --indigo-800: #3730a3;
    --blue-50: #eff6ff;
    --blue-200: #bfdbfe;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --amber-50: #fffbeb;
    --amber-200: #fde68a;
    --amber-700: #b45309;
    --emerald-50: #ecfdf5;
    --emerald-200: #a7f3d0;
    --emerald-600: #059669;
    --emerald-700: #047857;
    --emerald-800: #065f46;
    --violet-50: #f5f3ff;
    --violet-600: #7c3aed;
    --rose-50: #fff1f2;
    --rose-200: #fecdd3;
    --rose-700: #be123c;
    --rose-800: #9f1239;
    --page-bg: #f7f9fc;
    --surface: #ffffff;
    --surface-muted: #fbfcff;
    --line-soft: #e6edf5;
    --shadow-soft: 0 10px 30px rgba(15, 23, 42, .06);
    --shadow-lift: 0 18px 45px rgba(15, 23, 42, .1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    color: var(--slate-800);
    font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
    background: var(--page-bg);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
a { color: inherit; text-decoration: none; }

::-webkit-scrollbar {
    width: .7rem;
    height: .7rem;
}

::-webkit-scrollbar-track {
    background: #f3f6fa;
}

::-webkit-scrollbar-thumb {
    border: 2px solid #f3f6fa;
    border-radius: 9999px;
    background: #cbd5e1;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.absolute { position: absolute; }
.fixed { position: fixed; }
.relative { position: relative; }
.inset-0 { inset: 0; }
.left-3 { left: .75rem; }
.top-1\/2 { top: 50%; }
.-translate-y-1\/2 { transform: translateY(-50%); }
.z-50 { z-index: 50; }

.block { display: block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }

.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.space-y-1 > * + * { margin-top: .25rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

.mx-auto { margin-left: auto; margin-right: auto; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-0\.5 { margin-top: .125rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }

.h-2 { height: .5rem; }
.h-3\.5 { height: .875rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-9 { height: 2.25rem; }
.min-h-screen { min-height: 100vh; }
.max-h-\[90vh\] { max-height: 90vh; }
.max-h-\[calc\(90vh-140px\)\] { max-height: calc(90vh - 140px); }

.w-2 { width: .5rem; }
.w-3\.5 { width: .875rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-9 { width: 2.25rem; }
.w-64 { width: 16rem; }
.w-full { width: 100%; }
.max-w-md { max-width: 28rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-5xl { max-width: 64rem; }

.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.resize-none { resize: none; }

.rounded-lg { border-radius: .5rem; }
.rounded-xl { border-radius: .5rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }

.border { border: 1px solid var(--slate-200); }
.border-b { border-bottom: 1px solid var(--slate-200); }
.border-t { border-top: 1px solid var(--slate-200); }
.border-r { border-right: 1px solid var(--slate-200); }
.border-slate-200 { border-color: var(--slate-200); }
.border-slate-300 { border-color: var(--slate-300); }
.border-indigo-200 { border-color: var(--indigo-200); }
.border-emerald-200 { border-color: var(--emerald-200); }
.border-rose-200 { border-color: var(--rose-200); }
.divide-y > * + * { border-top: 1px solid var(--slate-200); }
.divide-slate-200 > * + * { border-color: var(--slate-200); }

.bg-white { background: #fff; }
.bg-slate-50 { background: var(--slate-50); }
.bg-slate-100 { background: var(--slate-100); }
.bg-slate-900 { background: var(--slate-900); }
.bg-slate-900\/50 { background: rgba(15, 23, 42, .5); }
.bg-indigo-50 { background: var(--indigo-50); }
.bg-indigo-600 { background: var(--indigo-600); }
.bg-blue-50 { background: var(--blue-50); }
.bg-emerald-50 { background: var(--emerald-50); }
.bg-violet-50 { background: var(--violet-50); }
.bg-rose-50 { background: var(--rose-50); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--gradient-from), var(--gradient-to)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--gradient-from), var(--gradient-to)); }
.from-indigo-500 { --gradient-from: var(--indigo-500); }
.from-indigo-600 { --gradient-from: var(--indigo-600); }
.from-slate-50 { --gradient-from: var(--slate-50); }
.to-blue-500 { --gradient-to: var(--blue-500); }
.to-blue-600 { --gradient-to: var(--blue-600); }
.to-slate-100 { --gradient-to: var(--slate-100); }
.bg-clip-text { -webkit-background-clip: text; background-clip: text; }
.text-transparent { color: transparent; }

.p-2 { padding: .5rem; }
.p-2\.5 { padding: .625rem; }
.p-3 { padding: .75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-2\.5 { padding-top: .625rem; padding-bottom: .625rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.pl-10 { padding-left: 2.5rem; }
.pr-4 { padding-right: 1rem; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-xs { font-size: .75rem; line-height: 1rem; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-mono { font-family: Consolas, "Courier New", monospace; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: .05em; }

.text-white { color: #fff; }
.text-slate-400 { color: var(--slate-400); }
.text-slate-500 { color: var(--slate-500); }
.text-slate-600 { color: var(--slate-600); }
.text-slate-700 { color: var(--slate-700); }
.text-slate-800 { color: var(--slate-800); }
.text-slate-900 { color: var(--slate-900); }
.text-indigo-600 { color: var(--indigo-600); }
.text-indigo-800 { color: var(--indigo-800); }
.text-blue-600 { color: var(--blue-600); }
.text-emerald-600 { color: var(--emerald-600); }
.text-emerald-700 { color: var(--emerald-700); }
.text-emerald-800 { color: var(--emerald-800); }
.text-violet-600 { color: var(--violet-600); }
.text-rose-700 { color: var(--rose-700); }
.text-rose-800 { color: var(--rose-800); }

.shadow-sm { box-shadow: var(--shadow-soft); }
.shadow-lg { box-shadow: 0 10px 25px rgba(15, 23, 42, .12); }
.shadow-2xl { box-shadow: 0 25px 50px rgba(15, 23, 42, .18); }

.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
.transition {
    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}
.focus\:border-indigo-500:focus { border-color: var(--indigo-500); }
.focus\:ring-2:focus,
.focus\:ring-indigo-500:focus { box-shadow: 0 0 0 2px rgba(99, 102, 241, .25); }
.hover\:bg-slate-50:hover { background: var(--slate-50); }
.hover\:bg-slate-100:hover { background: var(--slate-100); }
.hover\:bg-slate-200:hover { background: var(--slate-200); }
.hover\:bg-indigo-700:hover { background: var(--indigo-700); }
.hover\:text-indigo-600:hover { color: var(--indigo-600); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }

body.bg-white {
    background:
        linear-gradient(180deg, #ffffff 0, #f8fafc 18rem, var(--page-bg) 100%);
}

aside.bg-white {
    border-color: var(--line-soft);
    background:
        linear-gradient(180deg, #ffffff 0, #fbfcff 100%);
    box-shadow: 10px 0 30px rgba(15, 23, 42, .035);
}

aside .border-b,
aside .border-t,
header.border-b,
article .border-b,
article .border-t {
    border-color: var(--line-soft);
}

header.bg-white {
    position: sticky;
    top: 0;
    z-index: 20;
    border-color: var(--line-soft);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 8px 28px rgba(15, 23, 42, .045);
    backdrop-filter: blur(14px);
}

main.bg-slate-50 {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(247, 249, 252, .95));
}

main > .view-panel {
    width: 100%;
    max-width: 96rem;
    margin-right: auto;
    margin-left: auto;
}

#assign-view {
    max-width: 100rem;
}

.nav-button {
    position: relative;
    color: var(--slate-600);
    border: 1px solid transparent;
}

.nav-button:hover {
    border-color: var(--line-soft);
    background: #fff;
    color: var(--slate-900);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .055);
}

.nav-button.bg-indigo-50 {
    border-color: rgba(99, 102, 241, .18);
    background: linear-gradient(135deg, #ffffff, var(--indigo-50));
    color: var(--indigo-700);
    box-shadow: 0 10px 24px rgba(79, 70, 229, .12);
}

aside .nav-button.bg-indigo-50::before {
    position: absolute;
    top: .65rem;
    bottom: .65rem;
    left: .45rem;
    width: .2rem;
    border-radius: 9999px;
    background: var(--indigo-600);
    content: "";
}

.admin-profile-trigger {
    display: inline-flex;
    min-width: 14.25rem;
    align-items: center;
    gap: .75rem;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: .75rem;
    background:
        linear-gradient(135deg, #ffffff 0, #f8fbff 100%);
    padding: .65rem .75rem;
    color: var(--slate-800);
    text-align: left;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .07);
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.admin-profile-trigger:hover {
    border-color: rgba(99, 102, 241, .28);
    box-shadow: 0 18px 38px rgba(79, 70, 229, .13);
    transform: translateY(-1px);
}

.admin-profile-avatar {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: .8rem;
    background: linear-gradient(135deg, var(--indigo-600), var(--blue-600));
    color: #fff;
    font-size: .88rem;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(79, 70, 229, .2);
}

.admin-profile-copy {
    display: grid;
    min-width: 0;
    gap: .15rem;
}

.admin-profile-name {
    overflow: hidden;
    color: var(--slate-800);
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-profile-role {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--slate-500);
    font-size: .76rem;
    font-weight: 600;
}

.admin-profile-cue {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: 1px solid rgba(99, 102, 241, .14);
    border-radius: .65rem;
    background: var(--indigo-50);
    color: var(--indigo-600);
}

main article.bg-white {
    border-color: var(--line-soft);
    background:
        linear-gradient(180deg, #ffffff 0, var(--surface-muted) 100%);
    box-shadow: var(--shadow-soft);
}

main article.bg-white:hover {
    box-shadow: var(--shadow-lift);
}

main h3 {
    letter-spacing: -.01em;
}

#dashboard-view > .grid article {
    position: relative;
    overflow: hidden;
}

#dashboard-view > .grid article::after {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: 4.5rem;
    height: .25rem;
    border-radius: 9999px;
    background: linear-gradient(90deg, rgba(99, 102, 241, .28), rgba(37, 99, 235, .08));
    content: "";
}

.profile-shell {
    display: grid;
    gap: 1.5rem;
}

.profile-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    border-radius: .75rem;
    padding: 1.5rem;
    background:
        linear-gradient(135deg, #ffffff 0, #fbfcff 62%, var(--indigo-50) 100%);
}

.profile-avatar {
    display: inline-flex;
    width: 5rem;
    height: 5rem;
    align-items: center;
    justify-content: center;
    border: 4px solid #fff;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, var(--indigo-600), var(--blue-600));
    color: #fff;
    font-size: 1.45rem;
    font-weight: 800;
    box-shadow: 0 18px 34px rgba(79, 70, 229, .22);
}

.profile-main {
    min-width: 0;
}

.profile-main h3 {
    margin: 0;
}

.profile-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid rgba(79, 70, 229, .16);
    border-radius: .5rem;
    background: var(--slate-900);
    padding: .7rem 1rem;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    box-shadow: 0 14px 26px rgba(15, 23, 42, .16);
    transition:
        background-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.profile-edit-button:hover {
    background: var(--indigo-700);
    box-shadow: 0 18px 34px rgba(79, 70, 229, .24);
    transform: translateY(-1px);
}

.profile-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1.4fr) minmax(20rem, .8fr);
}

.profile-card {
    border-radius: .75rem;
    padding: 1.5rem;
    background:
        linear-gradient(180deg, #ffffff 0, var(--surface-muted) 100%);
}

.profile-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.profile-card-header h3 {
    margin: 0;
}

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

.profile-detail,
.profile-stat {
    border: 1px solid var(--line-soft);
    border-radius: .6rem;
    background: #fff;
    padding: .95rem;
}

.profile-detail-wide {
    grid-column: 1 / -1;
}

.profile-detail span,
.profile-stat span {
    display: block;
    margin-bottom: .35rem;
    color: var(--slate-500);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.profile-detail strong,
.profile-stat strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--slate-800);
    font-size: .92rem;
}

.profile-stat-list {
    display: grid;
    gap: .9rem;
}

.profile-password-box {
    display: grid;
    gap: 1rem;
    border: 1px solid var(--line-soft);
    border-radius: .75rem;
    background: #fbfcff;
    padding: 1rem;
}

table {
    width: 100%;
}

thead.bg-slate-50,
thead.border-b.bg-slate-50 {
    background: #f9fbfe;
}

th {
    color: var(--slate-500);
    font-size: .72rem;
    letter-spacing: .08em;
}

td {
    vertical-align: middle;
}

tbody.divide-y > * + *,
.divide-slate-200 > * + * {
    border-color: var(--line-soft);
}

tbody tr {
    transition:
        background-color .18s ease,
        box-shadow .18s ease;
}

tbody tr:hover {
    background: #fbfdff;
    box-shadow: inset 3px 0 0 rgba(99, 102, 241, .24);
}

label {
    color: var(--slate-700);
}

input,
select,
textarea,
.assignment-trigger,
.assignment-status-select {
    border-color: #dbe4ef;
    background-color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

input::placeholder,
textarea::placeholder {
    color: var(--slate-400);
}

input:hover,
select:hover,
textarea:hover,
.assignment-trigger:hover,
.assignment-status-select:hover {
    border-color: var(--slate-300);
}

input:focus,
select:focus,
textarea:focus {
    background: #fff;
}

button.bg-indigo-600 {
    box-shadow: 0 12px 24px rgba(79, 70, 229, .2);
}

button.bg-indigo-600:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(79, 70, 229, .26);
}

button.border.bg-slate-50,
a.rounded-lg.p-2,
button[data-close-modal] {
    border: 1px solid var(--line-soft);
    border-color: var(--line-soft);
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .045);
}

button.border.bg-slate-50:hover,
a.rounded-lg.p-2:hover,
button[data-close-modal]:hover {
    background: #f8fafc;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
}

.mb-6.rounded-xl.border {
    border-color: var(--line-soft);
    box-shadow: var(--shadow-soft);
}

.modal-card {
    display: flex;
    max-height: calc(100vh - 2rem);
    flex-direction: column;
    border: 1px solid rgba(226, 232, 240, .86);
    box-shadow: 0 30px 80px rgba(15, 23, 42, .24);
}
.modal-form {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}
.modal-header,
.modal-footer {
    flex: 0 0 auto;
}
.modal-body {
    min-height: 0;
    flex: 1 1 auto;
    scrollbar-gutter: stable;
}
.modal-footer {
    background: #fbfcff;
}

.profile-modal-card {
    max-width: 60rem;
}

.profile-modal-header {
    background:
        linear-gradient(135deg, #ffffff 0, #fbfdff 58%, var(--indigo-50) 100%);
}

.profile-modal-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 1rem;
}

.profile-modal-avatar {
    display: inline-flex;
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--indigo-600), var(--blue-600));
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: 0 16px 32px rgba(79, 70, 229, .18);
}

.profile-modal-eyebrow {
    margin: 0 0 .2rem;
    color: var(--indigo-600);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.profile-modal-body {
    background:
        linear-gradient(180deg, #ffffff 0, #fbfcff 100%);
}

.profile-details-panel {
    display: grid;
    gap: 1rem;
}

.profile-details-panel.hidden,
.profile-edit-panel.hidden,
[data-profile-edit-footer].hidden {
    display: none;
}

.profile-summary-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--line-soft);
    border-radius: .8rem;
    background:
        linear-gradient(135deg, #ffffff 0, var(--surface-muted) 100%);
    padding: 1rem;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .055);
}

.profile-summary-kicker {
    margin: 0 0 .15rem;
    color: var(--slate-500);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.profile-summary-hero h4 {
    margin: 0;
    color: var(--slate-900);
    font-size: 1.35rem;
    font-weight: 800;
}

.profile-summary-hero p:last-child {
    margin: .25rem 0 0;
    color: var(--slate-500);
    font-size: .9rem;
}

.profile-summary-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: .55rem;
    background: var(--slate-900);
    padding: .72rem 1rem;
    color: #fff;
    font-size: .88rem;
    font-weight: 800;
    box-shadow: 0 14px 26px rgba(15, 23, 42, .16);
    transition:
        background-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.profile-summary-edit:hover {
    background: var(--indigo-700);
    box-shadow: 0 18px 34px rgba(79, 70, 229, .24);
    transform: translateY(-1px);
}

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

.profile-info-tile {
    display: grid;
    gap: .38rem;
    min-height: 5.6rem;
    align-content: center;
    border: 1px solid var(--line-soft);
    border-radius: .7rem;
    background: #fff;
    padding: .95rem 1rem;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}

.profile-info-tile-wide {
    grid-column: 1 / -1;
}

.profile-info-tile span {
    color: var(--slate-500);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.profile-info-tile strong {
    overflow-wrap: anywhere;
    color: var(--slate-900);
    font-size: .98rem;
}

.project-status-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--slate-200);
    border-radius: 9999px;
    padding: .3rem .7rem;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.project-status-badge::before {
    width: .45rem;
    height: .45rem;
    margin-right: .45rem;
    border-radius: 9999px;
    background: currentColor;
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .85);
    content: "";
}

.project-status-badge.is-unassigned {
    background: var(--slate-50);
    color: var(--slate-600);
}

.project-status-badge.is-ongoing {
    border-color: var(--indigo-200);
    background: var(--indigo-50);
    color: var(--indigo-800);
}

.project-status-badge.is-in-process {
    border-color: var(--blue-200);
    background: var(--blue-50);
    color: var(--blue-600);
}

.project-status-badge.is-on-hold {
    border-color: var(--amber-200);
    background: var(--amber-50);
    color: var(--amber-700);
}

.project-status-badge.is-completed {
    border-color: var(--emerald-200);
    background: var(--emerald-50);
    color: var(--emerald-700);
}

.assignment-status-form {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 13rem;
}

.assignment-status-select {
    min-width: 8.75rem;
    border: 1px solid #dbe4ef;
    border-radius: .5rem;
    background: #fff;
    padding: .5rem .75rem;
    color: var(--slate-700);
    font-size: .75rem;
    font-weight: 600;
    outline: none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.assignment-status-select:focus {
    border-color: var(--indigo-500);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .25);
}

.assignment-status-button {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: .5rem;
    background: var(--slate-900);
    padding: .5rem .8rem;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    transition:
        background-color .18s ease,
        transform .18s ease;
}

.assignment-status-button:hover {
    background: var(--indigo-700);
    transform: translateY(-1px);
}

.assignment-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    color: #fff;
    background: linear-gradient(135deg, var(--indigo-500), var(--violet-600));
}

.assignment-picker {
    position: relative;
    width: 100%;
}

.assignment-trigger {
    display: flex;
    width: 100%;
    min-height: 2.9rem;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid var(--slate-200);
    border-radius: .5rem;
    background: #fff;
    padding: .625rem 1rem;
    color: var(--slate-700);
    text-align: left;
    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.assignment-trigger:focus {
    border-color: var(--indigo-500);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .25);
    outline: none;
}

.assignment-trigger span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assignment-trigger svg {
    flex: 0 0 auto;
}

.assignment-dropdown {
    position: absolute;
    z-index: 30;
    top: calc(100% + .5rem);
    left: 0;
    right: 0;
    width: 100%;
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid var(--line-soft);
    border-radius: .5rem;
    background: #fff;
    padding: .35rem;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .16);
}

.assignment-employee-option {
    display: flex;
    align-items: center;
    gap: .625rem;
    border-radius: .45rem;
    padding: .7rem .75rem;
    transition:
        background-color .18s ease,
        color .18s ease;
}

.assignment-employee-option:not(.is-busy):hover {
    background: var(--indigo-50);
}

.assignment-employee-option:has(.assignment-employee-checkbox:checked) {
    box-shadow: inset 3px 0 0 var(--indigo-600);
    background: var(--indigo-50);
    color: var(--indigo-800);
}

.assignment-employee-option.is-busy {
    cursor: not-allowed;
    background: var(--slate-50);
    opacity: .72;
}

.assignment-employee-checkbox {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--indigo-600);
}

.assignment-avatar {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: .6rem;
    background: linear-gradient(135deg, var(--indigo-500), var(--violet-600));
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.assignment-employee-option.is-busy .assignment-avatar {
    background: var(--slate-400);
}

.assignment-employee-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.assignment-employee-copy strong {
    color: var(--slate-800);
    font-size: .875rem;
    line-height: 1.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assignment-employee-copy small,
.assignment-employee-copy em {
    color: var(--slate-500);
    font-size: .75rem;
    font-style: normal;
}

.assignment-busy-badge {
    border: 1px solid var(--rose-200);
    border-radius: 9999px;
    background: var(--rose-50);
    padding: .2rem .55rem;
    color: var(--rose-700);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.assignment-empty-option {
    margin: 0;
    padding: .8rem .75rem;
    color: var(--slate-500);
    font-size: .875rem;
}

.assignment-preview-row {
    background: linear-gradient(90deg, rgba(248, 250, 252, .98), rgba(238, 242, 255, .82));
}

.assignment-preview-status {
    display: inline-flex;
    border-radius: 9999px;
    background: var(--indigo-600);
    padding: .35rem .7rem;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.assignment-preview-status.is-ready {
    background: var(--emerald-600);
}

.assignment-preview-employees {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.assignment-preview-avatars {
    display: flex;
    align-items: center;
}

.assignment-preview-avatar {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--indigo-500), var(--violet-600));
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

.assignment-preview-avatar + .assignment-preview-avatar {
    margin-left: -.5rem;
}

.assignment-preview-more {
    background: var(--slate-400);
}

.assignment-preview-names {
    color: var(--slate-600);
    font-size: .875rem;
}

.view-panel { display: none; }
.view-panel.active { display: block; animation: fadeIn .25s ease-in-out; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 640px) {
    .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; }
    .sm\:p-8 { padding: 2rem; }
}
@media (max-width: 767px) {
    .admin-profile-trigger {
        min-width: 0;
        padding: .55rem;
    }

    .admin-profile-copy,
    .admin-profile-cue {
        display: none;
    }

    .profile-modal-header {
        align-items: flex-start;
        gap: 1rem;
    }

    .profile-modal-avatar {
        width: 3rem;
        height: 3rem;
        border-radius: .85rem;
    }

    .profile-summary-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-summary-edit {
        width: 100%;
    }

    .profile-details-grid {
        grid-template-columns: 1fr;
    }

    .profile-info-tile-wide {
        grid-column: auto;
    }

    .profile-hero {
        grid-template-columns: 1fr;
    }

    .profile-avatar {
        width: 4.25rem;
        height: 4.25rem;
        border-radius: 1rem;
        font-size: 1.2rem;
    }

    .profile-edit-button {
        width: 100%;
    }

    .profile-grid,
    .profile-detail-list {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 1024px) {
    .lg\:flex { display: flex; }
    .lg\:flex-row { flex-direction: row; }
    .lg\:items-center { align-items: center; }
    .lg\:justify-between { justify-content: space-between; }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
}
@media (min-width: 1280px) {
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}