:root {
    --bg: #f2f3f8;
    --shell: #fbfcff;
    --card: #ffffff;
    --ink: #1e2233;
    --muted: #727b91;
    --border: #eceff6;
    --accent: #6b5cff;
    --accent-soft: #f0edff;
    --ok: #b7e336;
    --sky: #59c8ff;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', 'Rubik', sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 8% 8%, #dcd8f1 0%, transparent 35%),
        radial-gradient(circle at 92% 88%, #d7ebff 0%, transparent 32%),
        var(--bg);
    height: 100vh;
    overflow: hidden;
}

.shell {
    width: 100%;
    height: 100vh;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0.9rem;
    overflow: hidden;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1rem;
    box-shadow: 0 12px 40px rgba(35, 48, 90, 0.06);
}

.login-card {
    max-width: 390px;
    margin: 7vh auto;
    background: rgba(255, 255, 255, 0.95);
    padding: 2rem 1.5rem 2.5rem;
}

.login-logo {
    width: 146px;
    height: 52px;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0.3rem 0 -0.12rem;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

.login-card h1 {
    margin-top: 0.5rem;
    margin-bottom: 0.7rem;
    line-height: 1.15;
    font-size: 1.8rem;
}

.login-card p {
    margin-bottom: 1.15rem;
}

.login-card label {
    margin: 0.82rem 0 0.48rem;
}

.login-card input {
    padding: 0.72rem 0.85rem;
}

.login-card button[type="submit"] {
    margin-top: 1.1rem;
    margin-bottom: 0.3rem;
}

.password-wrap {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.password-wrap input {
    flex: 1;
}

.small-btn {
    width: auto;
    min-width: 72px;
    padding: 0.6rem 0.8rem;
}

.eye-btn {
    width: 44px;
    min-width: 44px;
    padding: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.eye-icon {
    width: 18px;
    height: 12px;
    border: 2px solid #5d688a;
    border-radius: 14px / 10px;
    position: relative;
    display: inline-block;
}

.eye-icon::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    background: #5d688a;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

#togglePasswordBtn.is-visible .eye-icon::after {
    content: '';
    position: absolute;
    left: -2px;
    top: 50%;
    width: 22px;
    height: 2px;
    background: #5d688a;
    transform: rotate(-32deg);
    transform-origin: center;
}

.login-error {
    margin: 0.2rem 0 0;
    color: #c0392b;
    font-size: 0.9rem;
    font-weight: 500;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 0.6rem;
    font-weight: 600;
}

p {
    margin: 0 0 0.9rem;
    color: var(--muted);
}

label {
    display: block;
    margin: 0.5rem 0 0.35rem;
    font-size: 0.86rem;
    color: #575f75;
}

input,
select,
textarea,
button {
    width: 100%;
    font-family: inherit;
    border-radius: 10px;
    border: 1px solid #dfe5f3;
    padding: 0.66rem 0.8rem;
    background: #fff;
}

.muted-input,
input:disabled.muted-input {
    background: #eef1f7 !important;
    color: #7b86a2 !important;
    cursor: not-allowed;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #c7c0ff;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

button {
    cursor: pointer;
    font-weight: 500;
    border: none;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), #866cff);
}

button:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

button.ghost {
    background: #fff;
    color: #535f79;
    border: 1px solid #d9dfef;
}

button.ghost:hover {
    background: #f2eeff;
    color: #403e66;
}

.app-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1rem;
    background: var(--shell);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 1rem;
    height: 100%;
    overflow: hidden;
}

.side-nav {
    padding: 1rem 0.7rem;
    min-height: 0;
    height: 100%;
    position: relative;
    z-index: 3;
    background: linear-gradient(180deg, #7569ff 0%, #6e62fb 60%, #675bf7 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 16px 36px rgba(72, 55, 184, 0.35);
    overflow-y: auto;
    overflow-x: hidden;
}

.brand-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.35rem 0.5rem 0.6rem;
    color: #ffffff;
}

.brand-block strong {
    color: #ffffff;
    margin-bottom: 0.35rem;
}

.brand-dot {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--accent), #9d8cff);
}

.brand-logo {
    width: 190px;
    height: auto;
    max-width: 100%;
    object-fit: cover;
    object-position: left center;
    border-radius: 0;
    background: transparent;
    border: 0;
    padding: 0;
    display: block;
    margin: 0 0 6px 0;
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: stretch;
}

.menu .menu-item {
    display: block;
    width: 100%;
    text-align: left;
    text-decoration: none;
    color: #eef1ff;
    padding: 0.62rem 0.7rem;
    border-radius: 10px;
    font-size: 0.94rem;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    margin: 0;
    font-weight: 500;
    position: relative;
}

.menu .menu-item.has-chat-unread::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #26d964;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.menu .menu-item.active {
    color: #ffffff !important;
    background: rgba(22, 28, 64, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.2);
    font-weight: 500;
}

.menu .menu-item:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: transparent;
    color: #ffffff;
    transform: none;
}

.content-shell {
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.topbar {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
}

.grid {
    min-height: 0;
    overflow: visible;
    padding-right: 0.2rem;
}

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

.topbar-tools {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-left: auto;
    min-width: 0;
    flex-wrap: nowrap;
}

.top-search {
    position: relative;
    display: flex;
    align-items: center;
    width: clamp(220px, 32vw, 430px);
    overflow: visible;
}

.top-search::before {
    content: none;
}

.search-glyph {
    position: absolute;
    left: 0.72rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #5b698f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.search-glyph svg {
    width: 18px;
    height: 18px;
}

#globalSearchInput {
    height: 44px;
    border-radius: 999px;
    padding-left: 2.2rem;
    padding-right: 1rem;
    background: #ffffff;
    border: 1px solid #e5e9f4;
    box-shadow: inset 0 2px 8px rgba(36, 50, 88, 0.05);
}

.search-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    border: 1px solid #dfe6f8;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(32, 45, 79, 0.16);
    z-index: 1400;
    overflow: hidden;
    max-height: 290px;
    overflow-y: auto;
}

.search-suggest-item {
    width: 100%;
    border: 0;
    background: #fff;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.6rem;
    padding: 0.62rem 0.74rem;
    border-bottom: 1px solid #edf2fb;
    color: #2d3757;
    cursor: pointer;
}

.search-suggest-item:last-child {
    border-bottom: 0;
}

.search-suggest-item:hover {
    background: #f5f8ff;
}

.search-suggest-main {
    font-weight: 500;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-suggest-kind {
    color: #6f7ea7;
    font-size: 0.78rem;
    font-weight: 600;
}

.top-search-go {
    display: none;
}

.top-icon-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.top-create-btn {
    width: auto;
    min-width: 118px;
    height: 44px;
    padding: 0 1.35rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #635bff, #7a6dff);
    box-shadow: 0 8px 20px rgba(99, 91, 255, 0.3);
    border-color: transparent;
    color: #fff;
}

.notif-wrap {
    position: relative;
}

.notif-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    position: relative;
    background: #ffffff;
    color: #2d3448;
    border: 1px solid #e3e8f5;
    box-shadow: 0 3px 12px rgba(36, 50, 88, 0.08);
}

.notif-glyph {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notif-glyph svg {
    width: 18px;
    height: 18px;
}

.notif-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ff5c6a;
    color: #fff;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    padding: 0 0.26rem;
    border: 2px solid #fff;
}

.notif-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: min(360px, calc(100vw - 2rem));
    border: 1px solid #dfe6f8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 34px rgba(32, 45, 79, 0.2);
    z-index: 1300;
    overflow: hidden;
}

.notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid #edf1f8;
}

.notif-head button {
    width: auto;
    min-width: 96px;
    padding: 0.4rem 0.55rem;
    font-size: 0.78rem;
}

.notif-list {
    max-height: 320px;
    overflow: auto;
}

.notif-item {
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid #f0f3fb;
    border-radius: 0;
    background: #fff;
    color: #2f3d66;
    padding: 0.62rem 0.74rem;
    display: grid;
    gap: 0.14rem;
}

.notif-item:hover {
    transform: none;
    filter: none;
    background: #f8f9ff;
}

.notif-item.read {
    opacity: 0.75;
}

.notif-item-title {
    font-weight: 600;
    font-size: 0.84rem;
}

.notif-item-msg {
    font-size: 0.79rem;
    color: #606c8f;
}

.notif-item-time {
    font-size: 0.72rem;
    color: #8a95b3;
}

.notif-empty {
    padding: 0.8rem;
    color: #7883a4;
    font-size: 0.84rem;
}

.profile-avatar-wrap {
    position: relative;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
}

.profile-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6b5cff, #8f7cff);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid #e7ecfb;
    background-size: cover;
    background-position: center;
}

.profile-avatar-plus {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
    border: 1px solid #d5dcf0;
    background: #fff;
    color: #4e5d86;
}

.profile-avatar-plus:hover {
    background: #f1edff;
    color: #3f3b75;
}

.profile-photo-menu {
    position: fixed;
    z-index: 1200;
    min-width: 170px;
    border: 1px solid #dfe6f8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(31, 41, 71, 0.2);
    padding: 0.45rem;
    display: grid;
    gap: 0.35rem;
}

.profile-photo-menu button {
    width: 100%;
}

#logoutBtn {
    width: auto;
    min-width: 96px;
    height: 44px;
    padding: 0 1rem;
    border-radius: 12px;
}

.topbar h2 {
    margin-bottom: 0.18rem;
}

.topbar p {
    margin: 0;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.grid:last-of-type {
    grid-template-columns: 1fr 1fr;
}

.grid:last-of-type > .section-card[data-section="profile"] {
    grid-column: 1 / -1;
}

.actions {
    display: flex;
    gap: 0.55rem;
    margin-top: 0.8rem;
}

.actions > * {
    flex: 1;
}

.table-wrap {
    overflow-x: auto;
    margin-top: 0.75rem;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
}

th,
td {
    text-align: left;
    padding: 0.62rem 0.52rem;
    border-bottom: 1px solid #edf1f8;
    vertical-align: top;
}

th {
    color: #7d86a0;
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.task-cards-grid {
    margin-top: 0.7rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.task-card {
    border: 1px solid #e8ecf8;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(36, 52, 95, 0.07);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.46rem;
    cursor: pointer;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.task-card:hover {
    box-shadow: 0 14px 30px rgba(36, 52, 95, 0.13);
    transform: translateY(-1px);
}

/* Staff-side visual marker for tasks assigned by admin/department head.
   Keep card neutral and show only a small orange strip accent. */
.task-card.admin-source,
.task-card.admin-assigned-task {
    position: relative;
    background: #ffffff;
    border-color: #e8ecf8;
}

.task-card.admin-source::before,
.task-card.admin-assigned-task::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 14px;
    width: 4px;
    height: 22px;
    border-radius: 999px;
    background: #ff8a00;
}

.task-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.task-card-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
    color: #1f2947;
}

.task-card-menu {
    position: relative;
}

.task-card-menu summary {
    list-style: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #e2e8f7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4d5b84;
    cursor: pointer;
    background: #fff;
    font-size: 1rem;
}

.task-card-menu summary::-webkit-details-marker {
    display: none;
}

.task-card-menu[open] summary {
    background: #f5f8ff;
}

.task-card-menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 116px;
    z-index: 5;
    border: 1px solid #dfe6f8;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(32, 45, 79, 0.18);
    padding: 0.35rem;
    display: grid;
    gap: 0.25rem;
}

.task-card-menu-list button {
    width: 100%;
    text-align: left;
    padding: 0.38rem 0.5rem;
    font-size: 0.82rem;
}

.task-card-menu-list button:hover {
    background: #f3f7ff;
}

.task-card-menu-list button.danger {
    color: #b0364c;
}

.task-card-desc {
    margin: 0;
    color: #5f6b8f;
    font-size: 0.83rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-card-schedule {
    color: #334065;
    font-size: 0.8rem;
}

.task-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    color: #5f6b8f;
    font-size: 0.78rem;
}

.task-mini-avatar {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #eef2ff;
    border: 1px solid #d8e1fb;
    color: #344a86;
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.task-meta-sep {
    color: #9aa4c2;
}

.task-card-foot {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: flex-end;
    margin-top: 0.2rem;
}

.task-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.task-activity {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    color: #657195;
    font-size: 0.76rem;
}

@media (max-width: 1240px) {
    .task-cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .task-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .task-cards-grid {
        grid-template-columns: 1fr;
    }
}

.section-card[data-section="reports"] .table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #e8ecf8;
    border-radius: 14px;
    background: #fbfcff;
    padding: 0.35rem 0.45rem 0.5rem;
}

.section-card[data-section="reports"] table {
    min-width: 980px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.section-card[data-section="reports"] th {
    white-space: nowrap;
    border-bottom: 0;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    color: #7d86a0;
    padding: 0.32rem 0.5rem;
}

.section-card[data-section="reports"] td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    background: #ffffff;
    border-top: 1px solid #e8ecf8;
    border-bottom: 1px solid #e8ecf8;
    padding: 0.72rem 0.52rem;
    vertical-align: top;
    line-height: 1.28;
}

.section-card[data-section="reports"] tbody tr td:first-child {
    border-left: 1px solid #e8ecf8;
    border-top-left-radius: 11px;
    border-bottom-left-radius: 11px;
}

.section-card[data-section="reports"] tbody tr td:last-child {
    border-right: 1px solid #e8ecf8;
    border-top-right-radius: 11px;
    border-bottom-right-radius: 11px;
}

.filters {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    align-items: stretch;
}

.filters > * {
    min-width: 0;
}

.filters.compact {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

#reportFilters {
    grid-template-columns: repeat(6, minmax(135px, 1fr));
}

#reportFilters > * {
    min-width: 0;
}

#reportFilters #loadReportBtn,
#reportFilters #exportCsvBtn,
#reportFilters #toggleInfographicsBtn {
    width: 100%;
    min-width: 0;
}

#loadReportBtn {
    background: linear-gradient(135deg, #171d34, #2a355f);
}

#exportCsvBtn,
#refreshEventsBtn {
    border-color: #d5dcf0;
}

#reportBody button.ghost {
    min-width: 110px;
    width: auto;
    border-radius: 10px;
    background: #f9fbff;
    border-color: #d7dff1;
    font-weight: 600;
}

#reportInfographics {
    margin-top: 0.75rem;
}

.report-table-tools {
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 0.6rem;
    align-items: center;
}

.report-table-tools input {
    min-height: 42px;
}

.report-table-pager {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    background: #f6f8ff;
    border: 1px solid #e1e6f5;
    border-radius: 12px;
    padding: 0.28rem;
}

.report-table-pager span {
    min-width: 84px;
    text-align: center;
    font-weight: 600;
    color: #2e395f;
}

.report-table-pager .ghost {
    min-width: 90px;
    border-radius: 10px;
    background: #ffffff;
}

.report-task-main {
    font-weight: 600;
    color: #1f2947;
}

.report-task-sub {
    margin-top: 0.22rem;
    font-size: 0.78rem;
    color: #7b84a1;
}

.report-time-main {
    font-weight: 600;
    color: #2c3658;
    font-size: 0.84rem;
}

.report-time-sub {
    margin-top: 0.22rem;
    color: #6f7a99;
    font-size: 0.79rem;
}

.calendar-toolbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    align-items: center;
}

.calendar-studio {
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    border-color: #e7ecfb;
    grid-column: 1 / -1;
}

.events-list-card {
    grid-column: 1 / -1;
}

.section-card[data-section="messages"] {
    grid-column: 1 / -1;
}

.section-card[data-section="staff"] {
    grid-column: 1 / -1;
}

.section-card[data-section="staff"] .staff-layout,
.staff-layout {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 1.1rem;
    margin-top: 0.75rem;
    align-items: start;
}

.section-card[data-section="staff"] .staff-panel,
.staff-panel {
    border: 1px solid #e7ebf8;
    border-radius: 14px;
    padding: 0.85rem;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    min-width: 0;
    width: 100% !important;
}

.staff-layout .staff-panel:first-child {
    width: 100%;
}

.staff-layout .staff-panel:last-child {
    width: 100%;
}

.staff-panel h4 {
    margin: 0 0 0.6rem;
    font-size: 1.02rem;
}

.staff-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.staff-list-head p {
    margin: 0;
    font-size: 0.82rem;
    color: #6a7597;
}

.section-card[data-section="staff"] .table-wrap {
    margin-top: 0.4rem;
    max-width: 100%;
    overflow-x: auto;
}

.section-card[data-section="staff"] table {
    min-width: 560px;
}

.section-card[data-section="staff"] td:last-child {
    white-space: nowrap;
}

.section-card[data-section="staff"] td:last-child button {
    width: auto;
    min-width: 74px;
    margin-right: 0.35rem;
}

.section-card[data-section="staff"] td:last-child button:last-child {
    margin-right: 0;
}

.staff-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 0.9rem;
    align-items: start;
}

.staff-form-field {
    min-width: 0;
}

.staff-form-field.full,
#userForm .actions {
    grid-column: 1 / -1;
}

.staff-form-field label {
    display: block;
    margin-bottom: 0.28rem;
}

.extension-requests-card {
    grid-column: 1 / -1;
    background: linear-gradient(180deg, #ffffff, #fbfcff);
}

.extension-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.extension-head p {
    margin-bottom: 0;
    max-width: 60ch;
}

.extension-kpi-grid {
    margin-top: 0.9rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 0.85rem;
}

.extension-kpi-card {
    border: 1px solid #e4e9f8;
    border-radius: 12px;
    padding: 1rem 1.05rem;
    background: #fff;
    display: flex;
    align-items: flex-start;
    gap: 0.62rem;
    min-height: 88px;
    box-shadow: 0 6px 16px rgba(90, 102, 148, 0.08);
}

.extension-kpi-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
    background: #eef3ff;
    color: #314a8a;
    margin-top: 0.06rem;
    flex: 0 0 auto;
}

.extension-kpi-card.tone-pending .extension-kpi-icon { background: #fff1df; color: #b76b13; }
.extension-kpi-card.tone-total .extension-kpi-icon { background: #e8f1ff; color: #2d5fb2; }
.extension-kpi-card.tone-risk-staff .extension-kpi-icon { background: #ffe8eb; color: #c63b59; }
.extension-kpi-card.tone-risk-task .extension-kpi-icon { background: #efe8ff; color: #6a4fd4; }

.extension-kpi-card .label {
    display: block;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7180a6;
}

.extension-kpi-card strong {
    display: block;
    margin-top: 0.34rem;
    font-size: 1.72rem;
    line-height: 1;
    color: #1f2a4d;
}

.extension-panel {
    margin-top: 1rem;
    border: 1px solid #e4e9f8;
    border-radius: 14px;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 6px 14px rgba(90, 102, 148, 0.07);
}

.extension-panel h4 {
    margin: 0 0 0.7rem;
    font-size: 1rem;
    color: #1f2a4d;
}

.extension-panel .table-wrap {
    margin-top: 0.25rem;
}

.extension-tracking-wrap table,
.extension-pending-table table {
    width: 100%;
    min-width: 0;
}

.extension-tracking-wrap table {
    table-layout: auto;
}

.extension-tracking-wrap th:nth-child(1),
.extension-tracking-wrap td:nth-child(1) { width: 34%; }
.extension-tracking-wrap th:nth-child(2),
.extension-tracking-wrap td:nth-child(2) { width: 14%; }
.extension-tracking-wrap th:nth-child(3),
.extension-tracking-wrap td:nth-child(3) { width: 16%; }
.extension-tracking-wrap th:nth-child(4),
.extension-tracking-wrap td:nth-child(4) { width: 9%; }
.extension-tracking-wrap th:nth-child(5),
.extension-tracking-wrap td:nth-child(5) { width: 11%; }
.extension-tracking-wrap th:nth-child(6),
.extension-tracking-wrap td:nth-child(6) { width: 16%; }

.extension-tracking-wrap th,
.extension-pending-table th {
    font-size: 0.76rem;
    color: #7b87aa;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.extension-tracking-wrap td,
.extension-pending-table td {
    white-space: normal;
    word-break: break-word;
    vertical-align: top;
}

.extension-tracking-wrap td:nth-child(1) {
    font-weight: 600;
    color: #24345d;
}

.extension-task-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.28;
}

.extension-tracking-wrap td:nth-child(3),
.extension-tracking-wrap td:nth-child(4),
.extension-tracking-wrap td:nth-child(5),
.extension-tracking-wrap td:nth-child(6) {
    white-space: nowrap;
}

.extension-tracking-wrap tbody tr:hover,
.extension-pending-table tbody tr:hover {
    background: #f8faff;
}

.extension-action-cell {
    min-width: 196px;
    white-space: nowrap;
    text-align: right;
}

.extension-action-stack {
    display: grid;
    gap: 0.45rem;
    justify-items: end;
}

.extension-action-stack > button {
    min-width: 88px;
    white-space: nowrap;
}

.extension-request-actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.extension-request-actions button {
    width: auto;
    min-width: 86px;
    padding: 0.36rem 0.65rem;
    white-space: nowrap;
}

.extension-main-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
    gap: 1rem;
    align-items: start;
}

.extension-recent {
    margin-top: 1.05rem;
}

.extension-empty {
    border: 1px dashed #d9e1f5;
    border-radius: 12px;
    padding: 1rem 0.9rem;
    text-align: left;
    color: #66739a;
    background: #fafcff;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.65rem;
}

.extension-empty .icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f9ec;
    color: #2f9e57;
    font-weight: 700;
}

.extension-empty strong {
    color: #25335b;
}

.extension-empty p {
    margin: 0.1rem 0 0;
    font-size: 0.9rem;
    color: #69779f;
}

.extension-recent h4 {
    margin: 0 0 0.55rem;
    font-size: 0.98rem;
}

#extensionRecentList {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.extension-recent-item {
    border: 1px solid #edf1fb;
    border-radius: 10px;
    padding: 0.8rem 0.85rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    background: linear-gradient(180deg, #ffffff, #fcfdff);
}

.extension-recent-main {
    min-width: 0;
    display: grid;
    gap: 0.14rem;
}

.extension-recent-item strong {
    color: #1f2a4d;
    font-size: 1.02rem;
    line-height: 1.25;
    word-break: break-word;
}

.extension-recent-item span {
    color: #5f6b8f;
    font-size: 0.84rem;
}

.extension-recent-item .meta-line {
    font-size: 0.89rem;
    color: #61709a;
}

.extension-risk-list {
    display: grid;
    gap: 0.64rem;
}

.extension-risk-item {
    border: 1px solid #e9eefb;
    border-radius: 12px;
    padding: 0.66rem 0.72rem;
    background: #fcfdff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.extension-risk-meta {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.extension-risk-meta strong {
    color: #1f2a4d;
}

.extension-risk-meta span {
    font-size: 0.9rem;
    color: #65739b;
}

.risk-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.22rem 0.62rem;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
}

.risk-pill.warn {
    color: #b76b13;
    background: #fff3e3;
    border-color: #f1d3ac;
}

.risk-pill.limit {
    color: #b1273f;
    background: #ffe7ed;
    border-color: #f3b8c4;
}

@media (max-width: 1180px) {
    .staff-layout {
        grid-template-columns: 1fr;
    }

    .staff-form-grid {
        grid-template-columns: 1fr;
    }

    .extension-kpi-grid {
        grid-template-columns: 1fr;
    }

    .extension-main-grid {
        grid-template-columns: 1fr;
    }

    #extensionRecentList {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .extension-tracking-wrap td:nth-child(3),
    .extension-tracking-wrap td:nth-child(4),
    .extension-tracking-wrap td:nth-child(5),
    .extension-tracking-wrap td:nth-child(6) {
        white-space: normal;
    }

    .extension-action-cell {
        min-width: 0;
        text-align: left;
    }

    .extension-action-stack {
        justify-items: start;
    }

    .extension-request-actions {
        justify-content: flex-start;
    }
}

.photo-upload-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.45rem;
    align-items: center;
}

.photo-upload-row button {
    width: auto;
    min-width: 84px;
}

.profile-layout {
    display: flex;
    gap: 1.15rem;
    margin-top: 0.5rem;
    align-items: flex-start;
    width: 100%;
}

.profile-left,
.profile-right {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    min-width: 0;
}

.profile-left {
    flex: 1 1 68%;
}

.profile-right {
    flex: 0 0 34%;
    max-width: 420px;
}

.profile-form,
.profile-password-form {
    margin: 0;
}

.profile-card {
    background: #fff;
    border: 1px solid #e3e9f8;
    border-radius: 12px;
    padding: 0.95rem;
    box-shadow: 0 8px 24px rgba(31, 54, 117, 0.05);
}

.profile-form.profile-card {
    padding: 1rem;
}

.profile-nested-card {
    margin-top: 0.95rem;
    box-shadow: none;
    background: #fbfcff;
}

.profile-card-title {
    margin: 0 0 0.7rem;
    font-size: 1rem;
    font-weight: 700;
    color: #162754;
}

.profile-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 0.65rem 0.8rem;
}

.profile-grid-single {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

.profile-grid-two label,
.profile-grid-single label,
.profile-summary-grid label,
.profile-kpi label {
    display: block;
    margin-bottom: 0.32rem;
}

.profile-summary-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}

.profile-summary-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid #d8e1fa;
    background: linear-gradient(135deg, #6b5cff, #8f7cff);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.profile-summary-text {
    min-width: 0;
}

.profile-summary-text strong,
.profile-summary-text span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-summary-text strong {
    font-size: 1rem;
    color: #182957;
}

.profile-summary-text span {
    color: #5f6f99;
    font-size: 0.82rem;
}

.profile-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.profile-summary-grid p {
    margin: 0;
    color: #1f2f5d;
    font-weight: 600;
}

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

.profile-kpi {
    border: 1px solid #dbe4fb;
    background: #f8faff;
    border-radius: 10px;
    padding: 0.55rem 0.62rem;
}

.profile-kpi strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.25rem;
    color: #1a2b58;
}

.profile-password-form .actions button,
.profile-form .actions button {
    width: 100%;
}

.section-card[data-section="profile"] {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

@media (max-width: 1380px) {
    .profile-layout {
        flex-direction: column;
    }

    .profile-right {
        flex: 1 1 auto;
        max-width: none;
        width: 100%;
    }
}

.quick-department-other {
    margin-top: 0.45rem;
}

.quick-assign-dept-picker-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4rem;
    align-items: center;
}

.quick-dept-add-btn {
    min-width: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
}

.quick-dept-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 34px;
    margin-top: 0.45rem;
}

.quick-dept-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid #c8d5fb;
    background: #eef3ff;
    color: #24345e;
    border-radius: 999px;
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
}

.quick-dept-chip button {
    border: 0;
    background: transparent;
    color: #4a5f93;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 0.82rem;
}

.quick-assign-empty {
    color: #66749a;
    font-size: 0.78rem;
    align-self: center;
}

.quick-assign-helper {
    display: block;
    margin: 0.25rem 0 0.5rem;
    color: #66749a;
    font-size: 0.78rem;
}

.quick-assignee-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.quick-assignee-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4rem;
    align-items: center;
}

.quick-assignee-row select {
    width: 100%;
}

.quick-assignee-remove {
    min-width: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
}

.quick-add-assignee-btn {
    margin-top: 0.45rem;
    width: auto;
    min-width: 120px;
}

.calendar-note {
    margin-bottom: 0.6rem;
    color: #5b6788;
    font-size: 0.85rem;
}

.calendar-nav-buttons,
.calendar-actions {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.calendar-nav-buttons button,
.calendar-actions button {
    width: auto;
    min-width: 72px;
}

#calendarRangeLabel {
    margin: 0;
    text-align: center;
}

.full-calendar {
    margin-top: 0.9rem;
    border: 1px solid #dce5fb;
    border-radius: 16px;
    padding: 0.7rem;
    background: linear-gradient(180deg, #f8fbff 0%, #f4f7ff 100%);
    box-shadow: inset 0 1px 0 #ffffff;
}

.calendar-grid.month .cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.calendar-grid.month .cal-weekdays div {
    text-align: center;
    font-size: 0.78rem;
    color: #6f7994;
    font-weight: 500;
}

.calendar-grid.month .cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 124px;
    gap: 0.3rem;
}

.cal-day {
    border: 1px solid #dfe6f8;
    border-radius: 12px;
    background: #fff;
    height: 100%;
    padding: 0.45rem;
    text-align: left;
    overflow: hidden;
}

.cal-day.muted {
    background: #f7f8fd;
}

.cal-day.selected {
    border-color: #8b9cff;
    box-shadow: 0 0 0 2px #e9efff;
}

.cal-day.has-events.pastel-0,
.week-day.has-events.pastel-0,
.calendar-grid.day.day-pastel.has-events.pastel-0 .day-mode-head {
    background: linear-gradient(135deg, #e6f5ff, #f3fbff);
}

.cal-day.has-events.pastel-1,
.week-day.has-events.pastel-1,
.calendar-grid.day.day-pastel.has-events.pastel-1 .day-mode-head {
    background: linear-gradient(135deg, #f2ecff, #faf7ff);
}

.cal-day.has-events.pastel-2,
.week-day.has-events.pastel-2,
.calendar-grid.day.day-pastel.has-events.pastel-2 .day-mode-head {
    background: linear-gradient(135deg, #e9fff0, #f4fff8);
}

.cal-day.has-events.pastel-3,
.week-day.has-events.pastel-3,
.calendar-grid.day.day-pastel.has-events.pastel-3 .day-mode-head {
    background: linear-gradient(135deg, #fff3e6, #fffaf2);
}

.cal-day.has-events.pastel-4,
.week-day.has-events.pastel-4,
.calendar-grid.day.day-pastel.has-events.pastel-4 .day-mode-head {
    background: linear-gradient(135deg, #ffeaf3, #fff5fa);
}

.cal-day.has-events.pastel-5,
.week-day.has-events.pastel-5,
.calendar-grid.day.day-pastel.has-events.pastel-5 .day-mode-head {
    background: linear-gradient(135deg, #edf2ff, #f7f9ff);
}

.cal-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.cal-day-num {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #49506a;
}

.cal-day-events {
    margin-top: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 82px;
    overflow: hidden;
}

.cal-day-events span {
    display: block;
    font-size: 0.72rem;
    padding: 0.14rem 0.32rem;
    border-radius: 999px;
    background: #efeaff;
    color: #443f74;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-grid.week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.45rem;
    align-items: stretch;
}

.week-day {
    border: 1px solid #dfe6f8;
    border-radius: 12px;
    padding: 0.4rem;
    background: #fff;
    min-height: 180px;
    min-width: 0;
}

.week-day.selected {
    border-color: #8b9cff;
    box-shadow: 0 0 0 2px #e9efff;
}

.week-day-head-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.week-day-head {
    width: 100%;
    text-align: left;
    color: #2f3558;
    font-weight: 600;
    border: 0;
    padding: 0;
    background: transparent;
}

.week-day-events {
    margin-top: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.34rem;
    min-width: 0;
}

.week-day-events span {
    display: block;
    padding: 0.24rem 0.34rem;
    border-radius: 8px;
    font-size: 0.75rem;
    background: #eef4ff;
    color: #39405d;
}

.calendar-grid.day .day-mode-head {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.day-mode-events {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.day-mode-item {
    border: 1px solid #e7ebf8;
    border-radius: 10px;
    padding: 0.55rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.84rem;
}

.day-mode-item.pill-tone-0 { background: #fff4ea; border-color: #ffd9be; color: #8a5400; }
.day-mode-item.pill-tone-1 { background: #edf6ff; border-color: #cde7ff; color: #1f5b8a; }
.day-mode-item.pill-tone-2 { background: #f3efff; border-color: #dfd4ff; color: #4f3f99; }
.day-mode-item.pill-tone-3 { background: #ecfff5; border-color: #c7f0da; color: #1c6a46; }
.day-mode-item.pill-tone-4 { background: #fff0f6; border-color: #ffd0e0; color: #8a2d5c; }
.day-mode-item.pill-tone-5 { background: #f0f4ff; border-color: #d3defe; color: #3a4d94; }
.day-mode-item.pill-tone-6 { background: #fff6e8; border-color: #ffe0b8; color: #8a5a1f; }
.day-mode-item.pill-tone-7 { background: #effbff; border-color: #cdefff; color: #1f6079; }

.day-events-panel {
    margin-top: 0.75rem;
    border: 1px solid #e6ebf7;
    border-radius: 12px;
    padding: 0.65rem;
    background: #fff;
}

.calendar-report-infographic {
    margin: 0.5rem 0 0.7rem;
    border: 1px solid #e5eafb;
    border-radius: 14px;
    padding: 0.65rem;
    background: linear-gradient(135deg, #f7fbff, #f4efff);
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0.7rem;
    align-items: center;
}

.calendar-report-donut {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    margin: 0 auto;
    background: conic-gradient(var(--donut, #dfe6fb 0deg 360deg));
    position: relative;
}

.calendar-report-donut::after {
    content: attr(data-total);
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: #2c3555;
}

.calendar-report-right h4 {
    margin: 0;
}

.calendar-report-sub {
    margin: 0.15rem 0 0.45rem;
    font-size: 0.8rem;
    color: #67739a;
}

.calendar-report-legend {
    display: grid;
    gap: 0.35rem;
}

.calendar-report-item {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: 0.45rem;
    align-items: center;
    font-size: 0.82rem;
}

.calendar-report-item .dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.calendar-report-item .dot.scheduled { background: #63b3ff; }
.calendar-report-item .dot.pending { background: #ffb84d; }
.calendar-report-item .dot.submitted { background: #4bd08a; }

.day-events-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.day-events-list li {
    border: 1px solid #e7ebf8;
    border-radius: 10px;
    padding: 0.45rem 0.55rem;
    font-size: 0.82rem;
    color: #404967;
}

.day-events-list .day-event-head {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
}

.day-events-list .day-event-head span {
    font-weight: 500;
    color: #657094;
}

.empty {
    color: #7b84a3;
}

.insights {
    margin-top: 0.7rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: 0.55rem;
}

.report-infographics {
    margin-top: 1.45rem;
    border: 1px solid #e5eafb;
    border-radius: 14px;
    padding: 0.95rem 0.75rem 0.75rem;
    background: linear-gradient(135deg, #f7fbff, #f4efff);
}

.report-infographics-head {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.6rem;
    margin: 0.5rem 0 0.75rem;
}

.report-infographics-head-meta {
    display: grid;
    gap: 0.12rem;
}

.report-infographics h4 {
    margin: 0;
}

.report-infographics p {
    margin: 0;
    font-size: 0.83rem;
    color: #5d6789;
}

.info-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.65rem;
}

.info-cards.kpi-extended {
    grid-template-columns: repeat(4, minmax(130px, 1fr));
}

.info-card {
    border-radius: 12px;
    padding: 0.55rem;
    color: #1f2944;
    border: 1px solid #dbe4fa;
    background: #fff;
}

.info-card:nth-child(1) { background: linear-gradient(135deg, #ddf4ff, #edf9ff); }
.info-card:nth-child(2) { background: linear-gradient(135deg, #e8fce9, #f0fff2); }
.info-card:nth-child(3) { background: linear-gradient(135deg, #fff1de, #fff8ef); }
.info-card:nth-child(4) { background: linear-gradient(135deg, #ffe9e9, #fff5f5); }

.info-label { font-size: 0.78rem; color: #56607f; }
.info-value { font-size: 1.15rem; font-weight: 700; margin-top: 0.2rem; }

.info-split {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0.8rem;
}

.info-donut {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    margin: 0 auto;
    background: conic-gradient(var(--donut, #6b5cff 0deg 360deg));
    position: relative;
}

.info-donut::after {
    content: attr(data-total);
    position: absolute;
    inset: 22px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: #2a355d;
}

.info-legend {
    display: grid;
    gap: 0.45rem;
    align-content: start;
    max-width: 440px;
}

.info-legend-item {
    display: grid;
    grid-template-columns: 16px auto auto;
    gap: 0.5rem;
    align-items: center;
    justify-content: start;
    font-size: 0.82rem;
}

.info-legend-item strong {
    margin-left: 0.2rem;
}

.info-legend-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: #2b3558;
    margin-top: 0.25rem;
}

.info-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
}

.info-dot.status-scheduled { background: #63b3ff; }
.info-dot.status-report_pending { background: #ffb84d; }
.info-dot.status-completed { background: #4bd08a; }
.info-dot.status-overdue { background: #ff6b6b; }

.report-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.35rem;
}

.chart-card {
    border: 1px solid #e3e9fb;
    border-radius: 12px;
    background: #fff;
    padding: 0.75rem;
}

.chart-card h5 {
    margin: 0 0 0.55rem;
    font-size: 0.95rem;
}

.bar-list {
    display: grid;
    gap: 0.5rem;
}

.bar-row {
    display: grid;
    grid-template-columns: minmax(86px, 120px) 1fr auto;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.79rem;
}

.bar-label {
    color: #546084;
}

.bar-track {
    width: 100%;
    height: 10px;
    background: #edf2ff;
    border-radius: 999px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 999px;
}

.bar-fill.bar-faculty { background: linear-gradient(90deg, #6b5cff, #8f85ff); }
.bar-fill.bar-trend { background: linear-gradient(90deg, #36c2ff, #7ad8ff); }
.bar-fill.bar-dept { background: linear-gradient(90deg, #4bd08a, #8de4b5); }

.insight-summary {
    margin-top: 0.65rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 0.55rem;
}

.insight-summary > div {
    border: 1px solid #e4eaf9;
    border-radius: 10px;
    background: #ffffff;
    padding: 0.55rem 0.65rem;
    display: grid;
    gap: 0.15rem;
}

.insight-summary span {
    font-size: 0.76rem;
    color: #657195;
}

.insight-summary strong {
    font-size: 0.92rem;
    color: #253056;
}

.insight-card {
    border: 1px solid #e5eaf8;
    border-radius: 10px;
    padding: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    background: #fbfcff;
}

.status {
    min-height: 1.1rem;
    margin: 0.2rem 0 0;
    color: #596585;
    font-size: 0.86rem;
}

.hidden {
    display: none !important;
}

@media (max-width: 1120px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .side-nav {
        min-height: auto;
    }

    .menu {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .calendar-grid.week {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 920px) {
    .grid,
    .grid:last-of-type {
        grid-template-columns: 1fr;
    }

    .filters {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    #reportFilters {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .info-cards {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }

    .info-cards.kpi-extended {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }

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

    .report-chart-grid {
        grid-template-columns: 1fr;
    }

    .insight-summary {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .report-table-tools {
        grid-template-columns: 1fr;
    }

    .report-table-pager {
        justify-content: flex-start;
    }

    .calendar-toolbar {
        grid-template-columns: 1fr;
    }

    .calendar-report-infographic {
        grid-template-columns: 1fr;
    }

    .staff-layout {
        grid-template-columns: 1fr;
    }

    .staff-list-head {
        flex-direction: column;
        align-items: flex-start;
    }

    #calendarRangeLabel {
        text-align: left;
    }

    .calendar-grid.month .cal-days {
        grid-template-columns: repeat(2, 1fr);
    }

    .calendar-grid.month .cal-weekdays {
        display: none;
    }

    .quick-add-form .quick-row {
        grid-template-columns: 1fr 1fr;
    }

    .topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }

    .topbar-user {
        width: 100%;
    }

    .topbar-tools {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .top-search {
        width: 100%;
        min-width: 0;
        order: 1;
    }

    .top-create-btn,
    .notif-wrap,
    #logoutBtn {
        order: 2;
    }

    .notif-menu {
        right: 0;
        left: auto;
        width: min(340px, calc(100vw - 1.6rem));
    }

    .section-card[data-section="events"] table {
        min-width: 980px;
    }

    .section-card[data-section="staff"] table {
        min-width: 820px;
    }

    .section-card[data-section="messages"] {
        padding: 0.6rem;
    }

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

    .profile-layout {
        flex-direction: column;
        gap: 0.8rem;
    }

    .profile-right {
        flex: 1 1 auto;
        max-width: none;
        width: 100%;
    }

    .profile-summary-grid,
    .profile-work-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .shell {
        margin: 0;
        padding: 0.55rem;
    }

    .app-shell {
        border-radius: 14px;
        padding: 0.55rem;
        gap: 0.65rem;
    }

    .side-nav {
        padding: 0.7rem 0.55rem;
        min-height: auto;
    }

    .brand-block {
        padding: 0.15rem 0.3rem 0.5rem;
    }

    .brand-logo {
        width: 132px;
        height: auto;
    }

    .brand-block strong {
        font-size: 0.95rem;
        line-height: 1.2;
        margin-bottom: 0.3rem;
    }

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

    .menu .menu-item {
        text-align: center;
        padding: 0.52rem 0.45rem;
        font-size: 0.84rem;
        border-radius: 9px;
    }

    .topbar {
        padding: 0.7rem;
        margin-bottom: 0.65rem;
    }

    .topbar-user {
        gap: 0.55rem;
    }

    .topbar h2 {
        font-size: 1.05rem;
    }

    .topbar p {
        font-size: 0.85rem;
    }

    .topbar-tools {
        gap: 0.4rem;
    }

    .top-create-btn,
    #logoutBtn,
    .top-search-go,
    .top-icon-btn {
        min-height: 38px;
    }

    .filters,
    .insights {
        grid-template-columns: 1fr;
    }

    .task-cards-grid {
        grid-template-columns: 1fr;
    }

    .calendar-grid.week,
    .calendar-grid.month .cal-days {
        grid-template-columns: repeat(2, 1fr);
    }

    .calendar-grid.month .cal-days {
        grid-auto-rows: 108px;
    }

    .cal-day {
        padding: 0.34rem;
        border-radius: 10px;
    }

    .cal-day-events {
        max-height: 72px;
    }

    .event-pill {
        font-size: 0.68rem;
        padding: 0.2rem 0.3rem;
    }

    .quick-add-form .quick-row {
        grid-template-columns: 1fr;
    }

    .quick-add-panel,
    .event-details-box,
    .report-submit-modal {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
        border-radius: 12px;
        padding: 0.65rem;
    }

    .quick-add-head,
    .event-details-head,
    .report-submit-head {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .quick-add-close,
    #closeEventDetailsBtn,
    #closeReportSubmitBtn {
        min-width: 76px;
    }

    .messages-studio {
        min-height: calc(100vh - 190px);
        height: calc(100vh - 190px);
        padding: 0.5rem;
    }

    .chat-layout {
        height: 100%;
    }

    .chat-users-list {
        max-height: 180px;
    }

    .chat-messages-list {
        min-height: 0;
        max-height: none;
    }

    .chat-compose-bar {
        grid-template-columns: auto 1fr auto;
        gap: 0.32rem;
    }

    .chat-attach-btn,
    .chat-send-btn {
        min-width: 76px;
        height: 38px;
        padding: 0.45rem 0.6rem;
    }

    #chatMessageInput {
        height: 40px;
        min-height: 40px;
    }
}

.cal-day-num-btn {
    width: auto;
    border: 0;
    background: transparent;
    color: #49506a;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0;
}

.cal-day-num-btn:hover {
    transform: none;
    filter: none;
    color: #2e3454;
}

.cal-add-btn {
    width: auto;
    min-width: 28px;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    border: 1px dashed #b6c4ea;
    background: #f4f7ff;
    color: #4b5c87;
    font-weight: 600;
    line-height: 1.2;
}

.cal-add-btn:hover {
    transform: none;
    filter: none;
    background: #eaf0ff;
    border-color: #95a9de;
}
.cal-add-btn:disabled,
.cal-add-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #f3f5fa;
    border-color: #c8d2ea;
    color: #8b96b5;
}

.week-add-btn {
    min-width: 30px;
}

.day-add-btn {
    min-width: 108px;
    padding: 0.3rem 0.55rem;
}

.event-pill {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #e2e9fb;
    padding: 0.28rem 0.4rem;
    font-size: 0.73rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #eff4ff;
    color: #2f3c64;
}

.event-pill.pill-tone-0 { background: #ffeedd; border-color: #ffd7b1; color: #8a5400; }
.event-pill.pill-tone-1 { background: #e7f4ff; border-color: #c8e4ff; color: #1f5b8a; }
.event-pill.pill-tone-2 { background: #efeaff; border-color: #ddd3ff; color: #4f3f99; }
.event-pill.pill-tone-3 { background: #e8faee; border-color: #c8efda; color: #236a3e; }
.event-pill.pill-tone-4 { background: #fff0f5; border-color: #ffd6e4; color: #8b2850; }
.event-pill.pill-tone-5 { background: #ecfbff; border-color: #cfeff7; color: #1b5f6b; }
.event-pill.pill-tone-6 { background: #fff7df; border-color: #ffe5a8; color: #7a6100; }
.event-pill.pill-tone-7 { background: #eef1ff; border-color: #d9deff; color: #3c4f8a; }
.event-pill.admin-assigned-task {
    background: #ffe9cf !important;
    border-color: #ffc57e !important;
    color: #8a4700 !important;
}

/* Staff-only marker: assigned by admin/department head (keeps status color intact). */
.event-pill.admin-source {
    position: relative;
    padding-left: 0.58rem;
}

.event-pill.admin-source::before {
    content: '';
    position: absolute;
    left: 0.16rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 65%;
    border-radius: 999px;
    background: #ff8a00;
}

.event-pill.status-scheduled {
    background: #e7f2ff !important;
    border-color: #bcd9ff !important;
    color: #1f5f95 !important;
}

.event-pill.status-report-pending {
    background: #fff2e1 !important;
    border-color: #ffcd8f !important;
    color: #8b5a14 !important;
}

.event-pill.status-completed {
    background: #e9f9ef !important;
    border-color: #bce6cb !important;
    color: #1d6f3b !important;
}

.event-pill.status-overdue {
    background: #ffe9ec !important;
    border-color: #ffb7c0 !important;
    color: #9a2131 !important;
}

.day-mode-item.admin-assigned-task {
    background: #fff0dc !important;
    border-color: #ffc983 !important;
    color: #7b4300 !important;
}

.day-mode-item.admin-source {
    border-left: 4px solid #ff8a00 !important;
}

.day-mode-item.status-scheduled {
    background: #eaf3ff !important;
    border-color: #c6dcff !important;
    color: #1f5f95 !important;
}

.day-mode-item.status-report-pending {
    background: #fff2e2 !important;
    border-color: #ffd09d !important;
    color: #8b5a14 !important;
}

.day-mode-item.status-completed {
    background: #ebf9ef !important;
    border-color: #c4e7cf !important;
    color: #1f7140 !important;
}

.day-mode-item.status-overdue {
    background: #ffe9ec !important;
    border-color: #ffb7c0 !important;
    color: #9a2131 !important;
}

.event-pill:hover,
.day-event-actions .ghost:hover {
    transform: none;
    filter: none;
}

.quick-add-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(760px, calc(100vw - 1.6rem));
    max-height: calc(100vh - 1.6rem);
    overflow: auto;
    z-index: 1200;
    border: 1px solid #dce5fb;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 0.8rem;
    box-shadow: 0 30px 60px rgba(38, 53, 93, 0.24);
}

.quick-add-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.quick-add-head h4 {
    margin: 0;
}

.quick-add-close {
    width: auto;
    min-width: 84px;
}

.quick-add-form .quick-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 0.55rem;
}

.quick-add-form .quick-row.quick-row-datetime {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.quick-add-form .quick-row.quick-row-single {
    grid-template-columns: 1fr;
}

.quick-add-form .quick-row + .quick-row {
    margin-top: 0.2rem;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(22, 29, 48, 0.42);
    backdrop-filter: blur(3px);
    z-index: 1100;
}

body.modal-open {
    overflow: hidden;
}

.form-error {
    margin: 0.4rem 0 0.1rem;
    color: #d13c2f;
    font-size: 0.86rem;
    font-weight: 600;
}

.type-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    font-size: 0.74rem;
    font-weight: 500;
}

.priority-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.16rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid;
}

.priority-badge.priority-urgent {
    background: #ffe9ee;
    border-color: #ffc3d1;
    color: #b3224c;
}

.priority-badge.priority-normal {
    background: #eaf2ff;
    border-color: #c9dcff;
    color: #2457a5;
}

.priority-badge.priority-lowest {
    background: #eef8ea;
    border-color: #cde8c2;
    color: #3f7c2f;
}

.type-workshop {
    background: #ffefd8;
    color: #8f5c07;
}

.type-webinar {
    background: #e4f2ff;
    color: #1a5789;
}

.type-seminar {
    background: #ebe9ff;
    color: #4840a2;
}

.type-fdp {
    background: #e7f8ea;
    color: #1f6a39;
}

.type-placement_drive {
    background: #ffe8ed;
    color: #8b1f3f;
}

.type-guest_lecture {
    background: #fff6d9;
    color: #8a6a00;
}

.type-training_program {
    background: #e7fbff;
    color: #0f5a68;
}

.type-other {
    background: #f2f3f8;
    color: #4f5b78;
}

.status-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.status-scheduled {
    background: #ecf3ff;
    color: #1f5f95;
    border-color: #c7ddff;
}

.status-report_pending {
    background: #fff3e6;
    color: #8b5a14;
    border-color: #f6d2a2;
}

.status-report_submitted {
    background: #e9faee;
    color: #1d6f3b;
    border-color: #bfe8ca;
}

.status-completed {
    background: #e9faee;
    color: #1d6f3b;
    border-color: #bfe8ca;
}

.status-overdue {
    background: #ffe8ea;
    color: #a8323d;
    border-color: #ffc2c9;
}

.day-event-actions {
    margin-top: 0.35rem;
}

.day-event-actions button {
    width: auto;
    min-width: 72px;
    padding: 0.35rem 0.55rem;
}

.event-details-box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(820px, calc(100vw - 1.6rem));
    max-height: calc(100vh - 1.6rem);
    overflow: auto;
    z-index: 1200;
    border: 1px solid #e5eaf8;
    border-radius: 12px;
    padding: 0.9rem;
    background: #ffffff;
    box-shadow: 0 30px 60px rgba(38, 53, 93, 0.24);
}

.event-details-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
}

.event-details-head-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#closeEventDetailsBtn {
    width: auto;
    min-width: 86px;
}

.event-details-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 0.45rem;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: #3e4867;
}

.event-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
    border: 1px solid #e5ebf9;
    border-radius: 9px;
    padding: 0.48rem 0.56rem;
    background: #fbfdff;
}

.event-meta-label {
    font-size: 0.72rem;
    color: #6f7a9a;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.event-meta-value {
    color: #2e3758;
    font-weight: 500;
    line-height: 1.2;
}

.event-details-description {
    margin-top: 0.65rem;
    margin-bottom: 0.72rem;
    font-size: 0.82rem;
    color: #39415f;
    border: 1px solid #e7ecf9;
    border-radius: 9px;
    background: #ffffff;
    padding: 0.5rem 0.58rem;
}

.subtask-section {
    margin-bottom: 0.7rem;
    border: 1px solid #e7ecf9;
    border-radius: 10px;
    background: #fdfefe;
    padding: 0.55rem;
}

.subtask-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.subtask-head h5 {
    margin: 0;
    font-size: 0.9rem;
}

#toggleAddSubtaskBtn {
    width: auto;
    min-width: 124px;
    padding: 0.42rem 0.62rem;
}

#toggleAddSubtaskBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.subtask-form {
    display: grid;
    grid-template-columns: 1fr 160px auto auto;
    gap: 0.42rem;
    margin-bottom: 0.5rem;
}

.subtask-form button {
    width: auto;
    min-width: 76px;
}

.subtask-list {
    display: grid;
    gap: 0.4rem;
}

.subtask-item {
    border: 1px solid #e5ebf8;
    border-radius: 9px;
    background: #fff;
    padding: 0.4rem 0.5rem;
}

.subtask-main {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.12rem;
    cursor: pointer;
}

.subtask-check {
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #6b5cff;
}

.subtask-title {
    color: #273055;
    font-weight: 600;
    margin-bottom: 0.12rem;
}

.subtask-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    color: #697493;
    font-size: 0.74rem;
}

.subtask-item.is-done .subtask-title {
    color: #8a93ad;
    text-decoration: line-through;
}

.subtask-item.is-done .subtask-meta {
    color: #96a0b8;
}

.event-report-summary {
    font-size: 0.82rem;
    color: #3a4464;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.event-report-head {
    font-weight: 600;
    color: #273155;
}

.event-report-photos {
    margin-top: 0.6rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(90px, 1fr));
    gap: 0.45rem;
}

.photo-link {
    display: block;
    border: 1px solid #dde3f4;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.photo-link img {
    width: 100%;
    height: 92px;
    object-fit: cover;
    display: block;
}

#useForReportBtn {
    width: auto;
    min-width: 210px;
}

.report-submit-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(620px, calc(100vw - 1.6rem));
    max-height: calc(100vh - 1.6rem);
    overflow: auto;
    z-index: 1200;
    border: 1px solid #e0e7fb;
    border-radius: 14px;
    padding: 0.8rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 30px 60px rgba(38, 53, 93, 0.24);
}

.report-submit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

#closeReportSubmitBtn {
    width: auto;
    min-width: 86px;
}

.report-submit-event {
    margin: 0.25rem 0 0.7rem;
    font-size: 0.84rem;
    color: #596585;
}

@media (max-width: 920px) {
    .event-details-meta {
        grid-template-columns: 1fr;
    }

    .subtask-form {
        grid-template-columns: 1fr;
    }

    .event-report-photos {
        grid-template-columns: repeat(2, minmax(90px, 1fr));
    }
}

.muted-note {
    color: #7a87a8;
    font-size: 0.85rem;
    font-weight: 600;
}

.messages-studio {
    padding: 0.85rem;
    min-height: calc(100vh - 245px);
    height: calc(100vh - 245px);
    display: flex;
    flex-direction: column;
}

.chat-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0.8rem;
    min-height: 0;
    height: 100%;
    width: 100%;
    align-items: stretch;
}

.chat-layout.chat-shared-open {
    grid-template-columns: 280px 1fr;
}

.chat-users-panel,
.chat-thread-panel,
.chat-shared-panel {
    border: 1px solid #dfe6f8;
    border-radius: 16px;
    background: #fff;
    min-height: 0;
}

.chat-users-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-users-title-row {
    padding: 0.75rem 0.8rem 0.45rem;
    border-bottom: 1px solid #eef2fc;
}

.chat-users-title-row h3 {
    margin: 0;
    font-size: 1.02rem;
}

.chat-users-head {
    padding: 0.58rem 0.78rem;
    border-bottom: 1px solid #edf2fb;
}

#chatUserSearch {
    height: 39px;
    border-radius: 12px;
    background: #f8faff;
}

.chat-users-list {
    flex: 1;
    overflow: auto;
    padding: 0.45rem;
}

.chat-user-item {
    width: 100%;
    border: 0;
    background: #fff;
    text-align: left;
    border-radius: 12px;
    padding: 0.56rem;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 0.56rem;
    align-items: center;
    cursor: pointer;
    color: #2e3759;
    margin-bottom: 0.3rem;
}

.chat-user-item:hover {
    background: #f5f8ff;
}

.chat-user-item.active {
    background: linear-gradient(135deg, #eaf0ff, #f2f6ff);
    box-shadow: inset 0 0 0 1px #d9e5ff;
}

.chat-avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6b5cff, #8a7cff);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.chat-avatar-lg {
    width: 48px;
    height: 48px;
}

.chat-avatar-xl {
    width: 76px;
    height: 76px;
}

.chat-user-main {
    min-width: 0;
}

.chat-user-name {
    display: block;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-user-sub {
    display: block;
    margin-top: 0.08rem;
    font-size: 0.77rem;
    color: #7282a8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-user-meta {
    text-align: right;
    font-size: 0.72rem;
    color: #8a97b6;
}

.chat-unread {
    display: inline-flex;
    min-width: 17px;
    height: 17px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    padding: 0 0.24rem;
    background: #ff5d6c;
    color: #fff;
    font-weight: 700;
    font-size: 0.68rem;
    margin-top: 0.2rem;
}

.chat-thread-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.chat-thread-head {
    padding: 0.66rem 0.8rem;
    border-bottom: 1px solid #edf2fb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.7rem;
}

.chat-thread-profile {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.chat-thread-text {
    min-width: 0;
}

#chatThreadName {
    display: block;
    font-size: 0.99rem;
    font-weight: 600;
    color: #2b3558;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#chatThreadMeta {
    margin: 0;
    font-size: 0.79rem;
    color: #7a88ac;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#chatMessageSearch {
    width: min(280px, 42%);
    height: 38px;
    border-radius: 10px;
    background: #f8faff;
}

.chat-messages-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    background: #ffffff;
}

.chat-msg-row {
    display: flex;
}

.chat-msg-row.me {
    justify-content: flex-end;
}

.chat-msg-bubble {
    max-width: min(77%, 560px);
    border-radius: 13px;
    padding: 0.55rem 0.7rem;
    border: 1px solid #e3eafc;
    background: #fff;
    color: #233153;
    box-shadow: 0 7px 18px rgba(56, 74, 120, 0.08);
}

.chat-msg-row.me .chat-msg-bubble {
    background: linear-gradient(135deg, #6b5cff, #7b6bff);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(78, 68, 171, 0.24);
}

.chat-msg-file {
    display: inline-block;
    margin-top: 0.34rem;
    color: inherit;
    text-decoration: underline;
    font-size: 0.83rem;
    word-break: break-all;
}

.chat-msg-meta {
    margin-top: 0.24rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    opacity: 0.78;
}

.chat-msg-time {
    font-size: 0.7rem;
    opacity: 0.9;
}

.chat-msg-read {
    font-weight: 700;
    letter-spacing: -0.04em;
}

.chat-msg-read.sent {
    opacity: 0.78;
}

.chat-msg-read.read {
    color: #8fe0ff;
}

.chat-msg-row:not(.me) .chat-msg-read.read {
    color: #60709a;
}

.chat-date-sep {
    margin: 0.15rem 0 0.3rem;
    display: flex;
    justify-content: center;
}

.chat-date-sep span {
    display: inline-block;
    padding: 0.22rem 0.56rem;
    border-radius: 999px;
    border: 1px solid #e4ebfb;
    background: #f8faff;
    color: #6b7ba5;
    font-size: 0.72rem;
    font-weight: 600;
}

.chat-msg-image-link {
    display: block;
    margin-top: 0.4rem;
}

.chat-msg-image {
    max-width: min(220px, 100%);
    max-height: 180px;
    display: block;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    object-fit: cover;
}

.chat-image-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: none;
}

.chat-image-preview-modal.hidden {
    display: none;
}

.chat-image-preview-modal img {
    max-width: min(92vw, 1280px);
    max-height: 86vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid #d9e2f8;
    background: #0f1220;
    box-shadow: 0 28px 62px rgba(20, 30, 64, 0.34);
    pointer-events: auto;
}

.chat-image-preview-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1301;
    min-width: 96px;
    pointer-events: auto;
    background: #ffffff;
}

.chat-msg-file-doc span {
    opacity: 0.75;
    font-size: 0.75rem;
}

.chat-send-form {
    border-top: 1px solid #edf2fb;
    padding: 0.66rem 0.75rem 0.75rem;
    background: #fff;
}

#chatMessageInput {
    height: 44px;
    min-height: 44px;
    border-radius: 999px;
    padding-left: 0.85rem;
}

.chat-compose-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.45rem;
}

.chat-attach-btn {
    width: auto;
    min-width: 88px;
    height: 40px;
    border-radius: 10px;
    font-weight: 600;
}

.chat-send-btn {
    width: auto;
    min-width: 88px;
    height: 40px;
    border-radius: 10px;
    padding: 0.56rem 0.76rem;
}

.chat-file-chosen {
    margin-top: 0.45rem;
    border: 1px solid #dbe3f8;
    background: #f7faff;
    border-radius: 8px;
    padding: 0.36rem 0.52rem;
    font-size: 0.76rem;
    color: #60709a;
}

@media (max-width: 1180px) {
    .chat-layout {
        grid-template-columns: minmax(240px, 300px) 1fr;
    }

    .chat-layout.chat-shared-open {
        grid-template-columns: minmax(240px, 300px) 1fr;
    }
}

@media (max-width: 980px) {
    .chat-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .messages-studio {
        min-height: auto;
        height: auto;
    }

    .chat-users-list {
        max-height: 220px;
    }

    .chat-messages-list {
        min-height: 420px;
        max-height: 62vh;
    }

    .chat-thread-head {
        align-items: center;
        flex-wrap: wrap;
    }

    #chatMessageSearch {
        width: 100%;
    }
}