/* =========================================================
   PRIME ADMIN DASHBOARD — COMPLETE REPLACEMENT CSS
   RTL / Arabic / Dark Glass / Red Accent
   Replace css/style.css entirely with this file.
========================================================= */
:root {
    --bg: #05080d;
    --bg2: #080d15;
    --panel: #0b111c;
    --panel2: #0e1623;
    --text: #f4f7fb;
    --text2: #b6c0ce;
    --muted: #778497;
    --red: #ed1c24;
    --red2: #ff3b43;
    --blue: #5d96ff;
    --green: #40d18b;
    --yellow: #f4b23f;
    --sidebar: 235px;
    --topbar: 88px;
    --r1: 10px;
    --r2: 15px;
    --r3: 20px;
    --ease: 180ms cubic-bezier(.2, .8, .2, 1)
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    min-height: 100%;
    scroll-behavior: smooth
}

body {
    min-height: 100vh;
    background: #05080d;
    color: var(--text);
    font-family: "Cairo", "Inter", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}

button,
input,
select,
textarea {
    font: inherit
}

button {
    cursor: pointer
}

a {
    color: inherit;
    text-decoration: none
}

img {
    max-width: 100%
}

::selection {
    background: rgba(237, 28, 36, .35);
    color: #fff
}

.dashboard-page {
    min-height: 100vh;
    overflow-x: hidden;
    background: radial-gradient(circle at 12% 12%, rgba(40, 70, 120, .11), transparent 28%), radial-gradient(circle at 78% 20%, rgba(237, 28, 36, .07), transparent 25%), radial-gradient(circle at 35% 90%, rgba(237, 28, 36, .045), transparent 30%), linear-gradient(135deg, #03060b, #07101a 48%, #05070d)
}

.dashboard-page:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .28;
    background-image: linear-gradient(rgba(255, 255, 255, .012) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .012) 1px, transparent 1px);
    background-size: 42px 42px
}

.dashboard-layout {
    position: relative;
    min-height: 100vh;
    direction: rtl;
    z-index: 1
}

/* SIDEBAR RIGHT */
.dashboard-page .sidebar {
    position: fixed;
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: auto;
    width: var(--sidebar);
    padding: 24px 16px 16px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(13, 20, 32, .97), rgba(7, 12, 20, .98) 65%, rgba(5, 9, 15, .99));
    border: 1px solid rgba(255, 255, 255, .095);
    border-radius: 27px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .045);
    overflow: hidden;
    z-index: 1000;
    direction: rtl
}

.dashboard-page .sidebar:before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    top: -170px;
    right: -100px;
    border-radius: 50%;
    background: rgba(237, 28, 36, .12);
    filter: blur(45px);
    pointer-events: none
}

.dashboard-page .sidebar:after {
    content: "";
    position: absolute;
    width: 220px;
    height: 300px;
    right: -120px;
    bottom: 40px;
    background: rgba(237, 28, 36, .07);
    filter: blur(55px);
    pointer-events: none
}

.sidebar-logo {
    position: relative;
    z-index: 2;
    height: 135px;
    flex: 0 0 135px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px
}

.sidebar-logo img {
    display: block;
    width: 155px;
    height: 105px;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(237, 28, 36, .18))
}

.sidebar-nav,
.sidebar-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 7px
}

.sidebar-nav {
    flex: 1
}

.sidebar-bottom {
    margin-top: auto
}

.dashboard-page .nav-item {
    position: relative;
    min-height: 52px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #aab5c4;
    font-size: 13px;
    font-weight: 600;
    transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease)
}

.dashboard-page .nav-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .065);
    transform: translateX(-2px)
}

.dashboard-page .nav-item.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(237, 28, 36, .98), rgba(176, 11, 19, .88));
    border-color: rgba(255, 105, 110, .32);
    box-shadow: 0 12px 30px rgba(237, 28, 36, .18), inset 0 1px 0 rgba(255, 255, 255, .13)
}

.dashboard-page .nav-item.active:before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    right: 0;
    width: 3px;
    border-radius: 3px 0 0 3px;
    background: #fff
}

.nav-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.nav-icon svg {
    width: 21px;
    height: 21px
}

.logout-item:hover {
    color: #ff7d83 !important;
    background: rgba(237, 28, 36, .07) !important;
    border-color: rgba(237, 28, 36, .15) !important
}

/* MAIN */
.dashboard-page .main-content {
    position: relative;
    min-height: 100vh;
    margin-right: calc(var(--sidebar) + 28px) !important;
    margin-left: 0 !important;
    width: auto;
    min-width: 0;
    direction: rtl
}

/* TOPBAR */
.dashboard-page .topbar {
    position: sticky;
    top: 0;
    z-index: 500;
    min-height: var(--topbar);
    height: var(--topbar);
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    background: rgba(4, 8, 14, .72);
    border-bottom: 1px solid rgba(255, 255, 255, .065);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px)
}

.topbar-title {
    min-width: 0
}

.topbar-title h1 {
    color: #fff;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 800
}

.topbar-title p {
    margin-top: 4px;
    color: #7c8797;
    font-size: 11px
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 11px;
    direction: ltr
}

.language-button,
.notification-button {
    height: 45px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .105);
    background: rgba(255, 255, 255, .035);
    color: #dbe3ed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--ease)
}

.language-button {
    gap: 9px;
    padding: 0 13px;
    font-size: 12px
}

.notification-button {
    position: relative;
    width: 45px;
    padding: 0
}

.language-button:hover,
.notification-button:hover {
    color: #fff;
    border-color: rgba(237, 28, 36, .30);
    background: rgba(237, 28, 36, .065);
    transform: translateY(-1px)
}

.language-globe {
    width: 19px;
    height: 19px;
    display: inline-flex
}

.language-globe svg,
.notification-button svg {
    width: 100%;
    height: 100%
}

.notification-dot {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff3b43;
    box-shadow: 0 0 0 3px rgba(255, 59, 67, .08)
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    direction: ltr;
    margin-left: 3px
}

.avatar {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #ff424a, #a60e15);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 9px 25px rgba(237, 28, 36, .23)
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    direction: rtl
}

.user-info strong {
    color: #fff;
    font-size: 12px;
    font-weight: 800
}

.user-info span {
    margin-top: 2px;
    color: #6f7c8f;
    font-size: 9px
}

/* CONTENT */
.dashboard-page .dashboard-content {
    padding: 28px 30px 40px
}

.dashboard-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px
}

.dashboard-page .stat-card {
    position: relative;
    min-width: 0;
    min-height: 175px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(16, 27, 43, .92), rgba(8, 14, 24, .92));
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 19px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .035);
    transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease)
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 24px 55px rgba(0, 0, 0, .30)
}

.stat-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.stat-icon {
    width: 43px;
    height: 43px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, .08)
}

.total-icon {
    color: #72a6ff;
    background: rgba(93, 150, 255, .13)
}

.expired-icon {
    color: #ff5961;
    background: rgba(255, 75, 85, .13)
}

.warning-icon {
    color: #ffc258;
    background: rgba(244, 178, 63, .13)
}

.notice-icon {
    color: #54dfa0;
    background: rgba(64, 209, 139, .13)
}

.stat-badge {
    min-height: 29px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, .08)
}

.danger-badge {
    color: #ff7c82;
    background: rgba(255, 75, 85, .10)
}

.warning-badge {
    color: #ffc56a;
    background: rgba(244, 178, 63, .10)
}

.notice-badge {
    color: #72e7b0;
    background: rgba(64, 209, 139, .10)
}

.stat-value {
    position: relative;
    z-index: 1;
    margin-top: auto;
    color: #fff;
    font-family: "Inter", "Cairo", sans-serif;
    font-size: 31px;
    line-height: 1;
    font-weight: 800
}

.stat-label {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    color: #788598;
    font-size: 11px;
    font-weight: 600
}

/* EMPLOYEES */
.dashboard-page .employees-section {
    overflow: hidden;
    background: linear-gradient(145deg, rgba(13, 22, 36, .94), rgba(6, 11, 19, .94));
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 20px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .035)
}

.section-header {
    min-height: 105px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .065)
}

.section-header h2 {
    color: #fff;
    font-size: 18px;
    font-weight: 800
}

.section-header p {
    margin-top: 4px;
    color: #758296;
    font-size: 10px
}

.add-button {
    min-height: 45px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(255, 102, 108, .30);
    border-radius: 11px;
    background: linear-gradient(135deg, #ff3038, #b40e15);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(237, 28, 36, .18), inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: var(--ease)
}

.add-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(237, 28, 36, .28)
}

.add-button span:first-child {
    font-size: 18px;
    line-height: 1
}

/* FILTERS */
.filters {
    min-height: 86px;
    padding: 17px 20px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .012)
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 220px;
    height: 46px
}

.search-box svg {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #69778a;
    pointer-events: none
}

.search-box input {
    width: 100%;
    height: 100%;
    padding: 0 44px 0 14px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 11px;
    outline: none;
    color: #eef3f9;
    background: rgba(255, 255, 255, .035);
    transition: var(--ease)
}

.search-box input::placeholder {
    color: #5f6d80
}

.search-box input:focus {
    border-color: rgba(237, 28, 36, .45);
    background: rgba(255, 255, 255, .045);
    box-shadow: 0 0 0 3px rgba(237, 28, 36, .08)
}

.filter-select,
.export-button {
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 11px;
    color: #cbd4df;
    background: rgba(255, 255, 255, .035);
    outline: none;
    transition: var(--ease)
}

.filter-select {
    min-width: 170px;
    padding: 0 13px
}

.filter-select option {
    background: #101825;
    color: #fff
}

.filter-select:focus,
.export-button:hover {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .055)
}

.export-button {
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700
}

.export-button svg {
    width: 18px;
    height: 18px
}

/* TABLE */
.table-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden
}

.employees-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    table-layout: auto
}

.employees-table thead {
    background: rgba(255, 255, 255, .025)
}

.employees-table th {
    height: 54px;
    padding: 0 15px;
    color: #7f8da0;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.employees-table td {
    height: 72px;
    padding: 10px 15px;
    color: #cdd5df;
    font-family: "Inter", "Cairo", sans-serif;
    font-size: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    white-space: nowrap
}

.employees-table tbody tr {
    transition: background var(--ease)
}

.employees-table tbody tr:hover {
    background: rgba(255, 255, 255, .025)
}

.employees-table tbody tr:last-child td {
    border-bottom: 0
}

.employee-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    direction: rtl
}

.employee-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(145deg, rgba(237, 28, 36, .85), rgba(115, 12, 17, .85));
    border: 1px solid rgba(255, 255, 255, .10);
    font-size: 12px;
    font-weight: 800
}

.employee-cell>div:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.employee-cell strong {
    color: #f2f5f9;
    font-family: "Cairo", sans-serif;
    font-size: 11px;
    font-weight: 800
}

.employee-cell span {
    color: #657286;
    font-family: "Inter", sans-serif;
    font-size: 9px
}

.document-status {
    min-width: 86px;
    height: 30px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    border: 1px solid transparent
}

.status-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%
}

.document-status.normal {
    color: #7ee3b0;
    background: rgba(64, 209, 139, .10);
    border-color: rgba(64, 209, 139, .16)
}

.document-status.normal .status-dot {
    background: var(--green);
    box-shadow: 0 0 8px rgba(64, 209, 139, .45)
}

.document-status.notice {
    color: #78a9ff;
    background: rgba(93, 150, 255, .10);
    border-color: rgba(93, 150, 255, .16)
}

.document-status.notice .status-dot {
    background: var(--blue)
}

.document-status.warning {
    color: #ffd071;
    background: rgba(244, 178, 63, .11);
    border-color: rgba(244, 178, 63, .18)
}

.document-status.warning .status-dot {
    background: var(--yellow)
}

.document-status.danger {
    color: #ff777e;
    background: rgba(255, 75, 85, .11);
    border-color: rgba(255, 75, 85, .18)
}

.document-status.danger .status-dot {
    background: var(--red2)
}

.document-status.expired {
    color: #ff646d;
    background: rgba(237, 28, 36, .13);
    border-color: rgba(237, 28, 36, .20)
}

.document-status.expired .status-dot {
    background: #ff424a;
    box-shadow: 0 0 8px rgba(237, 28, 36, .55)
}

/* ACTIONS */
.action-button {
    width: 38px;
    height: 38px;
    margin: 0 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 9px;
    color: #9eabbb;
    background: rgba(255, 255, 255, .035);
    transition: var(--ease)
}

.action-button svg {
    width: 18px;
    height: 18px
}

.action-button:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .075);
    transform: translateY(-1px)
}

/* MODALS */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 25px;
    background: rgba(1, 4, 8, .72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px)
}

.modal-overlay.show,
.modal-overlay.active {
    display: flex
}

.employee-modal,
.employee-view-modal {
    width: min(940px, 100%);
    max-height: calc(100vh - 50px);
    overflow: hidden;
    background: linear-gradient(145deg, rgba(15, 24, 38, .985), rgba(6, 12, 21, .985));
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 22px;
    box-shadow: 0 35px 100px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
    direction: rtl
}

.employee-modal {
    overflow-y: auto
}

.modal-header,
.view-modal-header {
    min-height: 88px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.modal-header h2,
.view-modal-header h2 {
    color: #fff;
    font-size: 18px;
    font-weight: 800
}

.modal-header p {
    margin-top: 4px;
    color: #788699;
    font-size: 10px
}

.modal-close {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    color: #9eabbc;
    background: rgba(255, 255, 255, .035);
    font-size: 25px;
    line-height: 1;
    transition: var(--ease)
}

.modal-close:hover {
    color: #fff;
    background: rgba(237, 28, 36, .12);
    border-color: rgba(237, 28, 36, .25)
}

/* FORM */
.employee-form {
    padding: 22px
}

.form-section {
    padding: 19px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, .065);
    border-radius: 15px;
    background: rgba(255, 255, 255, .018)
}

.form-section:last-of-type {
    margin-bottom: 0
}

.form-section h3 {
    margin-bottom: 16px;
    color: #fff;
    font-size: 13px;
    font-weight: 800
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px
}

.form-group {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.form-group label {
    color: #9eabbc;
    font-size: 10px;
    font-weight: 700
}

.form-group input[type=text],
.form-group input[type=number],
.form-group input[type=email],
.form-group input[type=date] {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    outline: none;
    color: #edf2f8;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    transition: var(--ease)
}

.form-group input:focus {
    border-color: rgba(237, 28, 36, .42);
    box-shadow: 0 0 0 3px rgba(237, 28, 36, .07)
}

.form-group input::placeholder {
    color: #596779
}

.date-input-wrapper {
    position: relative
}

.date-input-wrapper .expiry-date {
    padding-left: 42px
}

.date-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: .65
}

.file-upload {
    min-height: 42px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(255, 255, 255, .13);
    border-radius: 9px;
    color: #8996a8 !important;
    background: rgba(255, 255, 255, .018);
    cursor: pointer;
    transition: var(--ease)
}

.file-upload:hover {
    color: #fff !important;
    border-color: rgba(237, 28, 36, .35);
    background: rgba(237, 28, 36, .045)
}

.file-upload input[type=file] {
    display: none
}

.modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding-top: 18px
}

.cancel-button,
.save-button {
    min-width: 125px;
    height: 45px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    transition: var(--ease)
}

.cancel-button {
    color: #aab5c4;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .10)
}

.cancel-button:hover {
    color: #fff;
    background: rgba(255, 255, 255, .065)
}

.save-button {
    color: #fff;
    background: linear-gradient(135deg, #ff3038, #b40e15);
    border: 1px solid rgba(255, 105, 110, .30);
    box-shadow: 0 10px 25px rgba(237, 28, 36, .17)
}

.save-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(237, 28, 36, .25)
}

/* VIEW MODAL */
.employee-view-modal {
    width: min(1200px, 94vw);
    max-width: 1200px;
}

.view-modal-label {
    display: block;
    margin-bottom: 3px;
    color: #728095;
    font-family: "Inter", sans-serif;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .7px
}

.view-modal-header h2 {
    font-size: 20px
}

.view-modal-header>div>span:last-child {
    display: block;
    margin-top: 3px;
    color: #68768a;
    font-family: "Inter", sans-serif;
    font-size: 9px
}

.view-employee-content {
    padding: 24px;
    max-height: calc(100vh - 170px);
    overflow-y: auto;
}

.view-section {
    padding: 18px;
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, .065);
    border-radius: 15px;
    background: rgba(255, 255, 255, .018)
}

.view-section:last-child {
    margin-bottom: 0
}

.view-section-title {
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .055)
}

.view-section-title strong {
    color: #fff;
    font-size: 12px
}

.employee-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
}

.info-item {
    min-height: 65px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 10px;
    background: rgba(255, 255, 255, .018)
}

.info-item span {
    color: #6f7d90;
    font-size: 9px
}

.info-item strong {
    margin-top: 4px;
    color: #e8edf4;
    font-family: "Inter", "Cairo", sans-serif;
    font-size: 11px
}

.employee-documents-list {
    display: grid;
    gap: 8px
}

/* FLATPICKR */
.flatpickr-calendar {
    background: #0c1522 !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .45) !important;
    color: #fff !important
}

.flatpickr-months,
.flatpickr-weekdays {
    background: #0c1522 !important
}

.flatpickr-current-month,
.flatpickr-weekday,
.flatpickr-day {
    color: #dce4ee !important
}

.flatpickr-day:hover {
    background: rgba(237, 28, 36, .12) !important;
    border-color: rgba(237, 28, 36, .18) !important
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--red) !important;
    border-color: var(--red) !important
}

.flatpickr-day.today {
    border-color: rgba(237, 28, 36, .55) !important
}

/* SCROLLBARS */
* {
    scrollbar-width: thin;
    scrollbar-color: #283446 transparent
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

*::-webkit-scrollbar-track {
    background: transparent
}

*::-webkit-scrollbar-thumb {
    background: #273447;
    border-radius: 20px
}

*::-webkit-scrollbar-thumb:hover {
    background: #35445a
}

/* RESPONSIVE */
@media(max-width:1200px) {
    :root {
        --sidebar: 210px
    }

    .dashboard-page .dashboard-content {
        padding: 23px 20px 35px
    }

    .dashboard-page .topbar {
        padding: 0 20px
    }

    .dashboard-page .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:820px) {
    :root {
        --sidebar: 76px;
        --topbar: 76px
    }

    .dashboard-page .sidebar {
        top: 8px;
        right: 8px;
        bottom: 8px;
        width: 76px;
        padding: 15px 9px;
        border-radius: 22px
    }

    .sidebar-logo {
        height: 75px;
        flex-basis: 75px;
        margin-bottom: 14px
    }

    .sidebar-logo img {
        width: 54px;
        height: 54px
    }

    .dashboard-page .nav-item {
        min-height: 48px;
        padding: 0;
        justify-content: center
    }

    .dashboard-page .nav-item>span:last-child {
        display: none
    }

    .dashboard-page .nav-item.active:before {
        display: none
    }

    .dashboard-page .main-content {
        margin-right: calc(var(--sidebar) + 16px) !important
    }

    .topbar-title h1 {
        font-size: 19px
    }

    .topbar-title p {
        display: none
    }

    .user-info {
        display: none
    }

    .language-button {
        width: 45px;
        padding: 0
    }

    .language-button span:not(.language-globe) {
        display: none
    }

    .dashboard-page .dashboard-content {
        padding: 18px 14px 30px
    }

    .section-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px
    }

    .filters {
        align-items: stretch;
        flex-direction: column;
        padding: 14px
    }

    .search-box,
    .filter-select,
    .export-button {
        width: 100%;
        min-width: 0
    }
}

@media(max-width:560px) {
    .dashboard-page .stats-grid {
        grid-template-columns: 1fr
    }

    .dashboard-page .stat-card {
        min-height: 150px
    }

    .topbar-right {
        gap: 7px
    }

    .notification-button,
    .language-button,
    .avatar {
        width: 40px;
        height: 40px
    }

    .avatar {
        flex-basis: 40px
    }

    .dashboard-page .topbar {
        padding: 0 12px
    }

    .form-grid,
    .employee-info-grid {
        grid-template-columns: 1fr
    }

    .employee-form,
    .view-employee-content {
        padding: 14px
    }

    .form-section,
    .view-section {
        padding: 14px
    }

    .modal-overlay {
        padding: 10px
    }

    .employee-modal,
    .employee-view-modal {
        max-height: calc(100vh - 20px);
        border-radius: 17px
    }

    .modal-actions {
        flex-direction: column-reverse
    }

    .cancel-button,
    .save-button {
        width: 100%
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *:before,
    *:after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important
    }
}
/* =========================================================
   VIEW EMPLOYEE - DOCUMENT TABLE
========================================================= */

.employee-documents-list {
    width: 100%;

    display: flex;
    flex-direction: column;

    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, .018);
}


/* =========================================================
   DOCUMENT ROW
========================================================= */

.employee-document-item {
    width: 100%;

    min-height: 68px;

    display: grid;

    grid-template-columns:
        minmax(220px, 1.4fr)
        minmax(140px, .8fr)
        minmax(150px, .8fr)
        minmax(180px, 1fr);

    align-items: center;

    border-bottom:
        1px solid rgba(255, 255, 255, .06);

    background:
        rgba(255, 255, 255, .012);

    transition:
        background .18s ease;
}


.employee-document-item:hover {
    background:
        rgba(255, 255, 255, .035);
}


.employee-document-item:last-child {
    border-bottom: 0;
}


/* =========================================================
   DOCUMENT NAME
========================================================= */

.employee-document-item .document-item-info {
    min-width: 0;

    padding:
        14px 18px;

    display: flex;

    align-items: center;

    gap: 10px;
}


.employee-document-item
.document-item-info strong {
    color: #f2f5f9;

    font-size: 12px;

    font-weight: 800;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.employee-document-item
.document-item-info span {
    color: #68768a;

    font-size: 9px;
}


/* =========================================================
   EXPIRY DATE
========================================================= */

.employee-document-item .document-item-expiry {
    min-height: 68px;

    padding:
        12px 16px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    gap: 3px;

    border-right:
        1px solid rgba(255, 255, 255, .055);
}


.document-expiry-label {
    color: #657388;

    font-size: 8px;

    font-weight: 600;
}


.employee-document-item
.document-item-expiry strong {
    color: #e6ebf2;

    font-family:
        "Inter",
        "Cairo",
        sans-serif;

    font-size: 11px;
}


/* =========================================================
   STATUS
========================================================= */

.employee-document-item .document-item-status {
    min-height: 68px;

    padding:
        12px 16px;

    display: flex;

    align-items: center;

    border-right:
        1px solid rgba(255, 255, 255, .055);
}


.employee-document-item
.document-item-status .document-status {
    min-width: 105px;

    height: 31px;

    padding:
        0 10px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    border-radius: 8px;

    font-size: 9px;

    font-weight: 800;
}


/* =========================================================
   FILE
========================================================= */

.employee-document-item .document-item-file {
    min-height: 68px;

    padding:
        12px 16px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 8px;

    border-right:
        1px solid rgba(255, 255, 255, .055);
}


.employee-document-item
.document-item-file a {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-height: 34px;

    padding:
        0 11px;

    border-radius: 8px;

    color: #d8e0eb;

    background:
        rgba(255, 255, 255, .035);

    border:
        1px solid rgba(255, 255, 255, .08);

    font-size: 9px;

    font-weight: 700;

    transition:
        all .18s ease;
}


.employee-document-item
.document-item-file a:hover {
    color: #fff;

    background:
        rgba(237, 28, 36, .10);

    border-color:
        rgba(237, 28, 36, .30);
}


.employee-document-item
.document-item-file .no-file {
    display: inline-flex;

    align-items: center;

    min-height: 32px;

    padding:
        0 10px;

    border-radius: 8px;

    color: #657286;

    background:
        rgba(255, 255, 255, .025);

    border:
        1px solid rgba(255, 255, 255, .06);

    font-size: 9px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .employee-document-item {

        grid-template-columns:
            1fr 1fr;

        gap: 0;
    }


    .employee-document-item
    .document-item-info {

        grid-column:
            1 / -1;

        border-bottom:
            1px solid rgba(255, 255, 255, .05);
    }


    .employee-document-item
    .document-item-expiry {

        border-right: 0;
    }


    .employee-document-item
    .document-item-file {

        border-right: 0;

        border-top:
            1px solid rgba(255, 255, 255, .05);
    }
}
/* =========================================================
   DOCUMENT FILE ACTIONS
========================================================= */

.employee-document-item .document-item-file {
    min-height: 68px;

    padding: 12px 16px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 8px;

    border-right:
        1px solid
        rgba(255, 255, 255, .055);
}


/* =========================================================
   VIEW / DOWNLOAD BUTTONS
========================================================= */

.employee-document-item
.document-item-file a,
.employee-document-item
.document-item-file button {

    min-width: 86px;

    height: 36px;

    padding:
        0 11px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    box-sizing: border-box;

    appearance: none;
    -webkit-appearance: none;

    border:
        1px solid
        rgba(255, 255, 255, .09);

    border-radius: 9px;

    color: #dce4ee;

    background:
        rgba(255, 255, 255, .045);

    font-family:
        "Cairo",
        "Inter",
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}


/* =========================================================
   VIEW BUTTON
========================================================= */

.employee-document-item
.document-item-file
.document-view-link {

    color: #dce4ee;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .065),
            rgba(255, 255, 255, .025)
        );

    border-color:
        rgba(255, 255, 255, .11);
}


.employee-document-item
.document-item-file
.document-view-link:hover {

    color: #fff;

    background:
        rgba(237, 28, 36, .12);

    border-color:
        rgba(237, 28, 36, .35);

    transform:
        translateY(-1px);
}


/* =========================================================
   DOWNLOAD BUTTON
========================================================= */

.employee-document-item
.document-item-file
.download-button {

    color: #ff858b;

    background:
        rgba(237, 28, 36, .08);

    border-color:
        rgba(237, 28, 36, .20);
}


.employee-document-item
.document-item-file
.download-button:hover {

    color: #fff;

    background:
        rgba(237, 28, 36, .18);

    border-color:
        rgba(237, 28, 36, .40);

    transform:
        translateY(-1px);
}


/* =========================================================
   ICON
========================================================= */

.employee-document-item
.document-item-file
.document-view-link
svg {

    width: 15px;

    height: 15px;

    flex-shrink: 0;
}


/* =========================================================
   NO FILE
========================================================= */

.employee-document-item
.document-item-file
.no-file {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 86px;

    height: 34px;

    padding:
        0 10px;

    box-sizing: border-box;

    border-radius: 9px;

    color: #657286;

    background:
        rgba(255, 255, 255, .025);

    border:
        1px solid
        rgba(255, 255, 255, .06);

    font-size: 9px;
}
/* =========================================================
   NOTIFICATIONS
========================================================= */

.notification-wrapper {
    position: relative;

    display: inline-flex;

    align-items: center;
}


/* =========================================================
   NOTIFICATION BUTTON
========================================================= */

.notification-button {
    position: relative;

    width: 46px;
    height: 46px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid
        rgba(255, 255, 255, .10);

    border-radius: 13px;

    color: #dbe3ed;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .055),
            rgba(255, 255, 255, .018)
        );

    cursor: pointer;

    transition:
        .2s ease;
}


.notification-button:hover {
    color: #fff;

    border-color:
        rgba(237, 28, 36, .35);

    background:
        rgba(237, 28, 36, .10);

    transform:
        translateY(-1px);
}


.notification-button svg {
    width: 21px;
    height: 21px;
}


/* =========================================================
   NOTIFICATION BADGE
========================================================= */

.notification-badge {
    position: absolute;

    top: -6px;
    right: -6px;

    min-width: 20px;
    height: 20px;

    padding: 0 5px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ff3038,
            #c81018
        );

    border: 2px solid #07101a;

    font-family:
        "Inter",
        "Cairo",
        sans-serif;

    font-size: 9px;

    font-weight: 800;

    line-height: 1;

    box-shadow:
        0 4px 14px
        rgba(237, 28, 36, .35);
}

/* =========================================================
   NOTIFICATION PANEL
========================================================= */

.notification-panel {
    position: fixed;

    top: calc(var(--topbar) + 14px);

    left: 30px;
    right: auto;

    z-index: 9999;

    width: 380px;
    max-width: calc(100vw - 60px);

    max-height: 520px;

    display: none;
    flex-direction: column;

    overflow: hidden;

    box-sizing: border-box;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(13, 23, 36, .98),
            rgba(5, 11, 19, .98)
        );

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, .55);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);
}


/* OPEN */

.notification-panel.active {
    display: flex;
}
/* =========================================================
   PANEL HEADER
========================================================= */

.notification-panel-header {
    min-height: 68px;

    padding:
        0 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .07);
}


.notification-panel-header > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.notification-panel-header strong {
    color: #fff;

    font-size: 14px;

    font-weight: 800;
}


.notification-panel-header span {
    color: #718096;

    font-size: 9px;
}


/* =========================================================
   NOTIFICATION LIST
========================================================= */

.notification-list {
    max-height: 440px;

    overflow-y: auto;

    padding: 10px;
}


/* =========================================================
   NOTIFICATION ITEM
========================================================= */

.notification-item {
    width: 100%;

    min-height: 70px;

    margin-bottom: 8px;

    padding: 11px;

    display: flex;

    align-items: center;

    gap: 11px;

    box-sizing: border-box;

    border: 1px solid
        rgba(255, 255, 255, .06);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .025);

    transition:
        .18s ease;
}


.notification-item:last-child {
    margin-bottom: 0;
}


.notification-item:hover {
    background:
        rgba(255, 255, 255, .045);

    border-color:
        rgba(255, 255, 255, .11);

    transform:
        translateX(-2px);
}


/* =========================================================
   NOTIFICATION ICON
========================================================= */

.notification-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: #ff555c;

    background:
        rgba(237, 28, 36, .10);

    border:
        1px solid
        rgba(237, 28, 36, .18);

    font-size: 13px;

    font-weight: 900;
}


/* =========================================================
   NOTIFICATION CONTENT
========================================================= */

.notification-content {
    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.notification-content strong {
    color: #f2f5f9;

    font-size: 11px;

    font-weight: 800;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.notification-content span {
    color: #aab5c4;

    font-size: 10px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.notification-content small {
    color: #6f7d90;

    font-size: 8px;

    line-height: 1.5;
}


/* =========================================================
   STATUS COLORS
========================================================= */

.notification-item.expired {
    border-color:
        rgba(237, 28, 36, .16);
}


.notification-item.danger {
    border-color:
        rgba(255, 166, 45, .14);
}


.notification-item.warning {
    border-color:
        rgba(255, 196, 70, .10);
}


.notification-item.danger
.notification-icon {
    color: #ffb13b;

    background:
        rgba(255, 166, 45, .09);

    border-color:
        rgba(255, 166, 45, .18);
}


.notification-item.warning
.notification-icon {
    color: #ffd15c;

    background:
        rgba(255, 196, 70, .08);

    border-color:
        rgba(255, 196, 70, .16);
}


/* =========================================================
   EMPTY
========================================================= */

.notification-empty {
    min-height: 180px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    text-align: center;
}


.notification-empty span {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #55d68a;

    background:
        rgba(64, 210, 130, .10);

    border:
        1px solid
        rgba(64, 210, 130, .18);

    font-size: 18px;
}


.notification-empty p {
    margin: 0;

    color: #8794a6;

    font-size: 10px;
}


/* =========================================================
   SCROLLBAR
========================================================= */

.notification-list::-webkit-scrollbar {
    width: 5px;
}


.notification-list::-webkit-scrollbar-track {
    background: transparent;
}


.notification-list::-webkit-scrollbar-thumb {
    border-radius: 10px;

    background:
        rgba(255, 255, 255, .12);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .notification-panel {
        top: calc(var(--topbar) + 10px);

        left: 15px;
        right: 15px;

        width: auto;
        max-width: none;

        max-height:
            calc(100vh - var(--topbar) - 25px);

        border-radius: 16px;
    }

}
.notification-panel {
    position: absolute;

    top: calc(100% + 14px);

    left: 0;

    right: auto;

    z-index: 1500;

    width: 380px;

    max-width: calc(100vw - 30px);

    max-height: 520px;

    display: none;

    flex-direction: column;

    overflow: hidden;

    box-sizing: border-box;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(13, 23, 36, .98),
            rgba(5, 11, 19, .98)
        );

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, .55);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);
}
/* =========================================================
   DOCUMENT PREVIEW MODAL
========================================================= */

.document-preview-modal {
    position: fixed;

    inset: 0;

    z-index: 10000;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 30px;

    box-sizing: border-box;

    background:
        rgba(2, 6, 12, .78);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}


/* =========================================================
   ACTIVE
========================================================= */

.document-preview-modal.active {
    display: flex;
}


/* =========================================================
   CONTAINER
========================================================= */

.document-preview-container {
    position: relative;

    width: min(1100px, 94vw);

    height: min(820px, 90vh);

    display: flex;

    flex-direction: column;

    overflow: hidden;

    box-sizing: border-box;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #0d1724,
            #080f19
        );

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, .65);
}


/* =========================================================
   HEADER
========================================================= */

.document-preview-header {
    min-height: 64px;

    padding:
        0 18px 0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-shrink: 0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .07);
}


.document-preview-header strong {
    color: #f4f7fb;

    font-family:
        "Cairo",
        "Inter",
        Arial,
        sans-serif;

    font-size: 13px;

    font-weight: 700;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.document-preview-close {
    width: 40px;
    height: 40px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    border-radius: 11px;

    color: #b8c3d1;

    background:
        rgba(255, 255, 255, .035);

    font-size: 25px;

    line-height: 1;

    cursor: pointer;

    transition:
        .2s ease;
}


.document-preview-close:hover {
    color: #fff;

    border-color:
        rgba(237, 28, 36, .45);

    background:
        rgba(237, 28, 36, .12);

    transform:
        rotate(90deg);
}


/* =========================================================
   CONTENT
========================================================= */

.document-preview-content {
    position: relative;

    flex: 1;

    min-height: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    overflow: auto;

    box-sizing: border-box;
}


/* =========================================================
   IMAGE
========================================================= */

.document-preview-image {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 10px;

    box-shadow:
        0 15px 50px
        rgba(0, 0, 0, .45);
}


/* =========================================================
   PDF
========================================================= */

.document-preview-pdf {
    width: 100%;
    height: 100%;

    min-height: 600px;

    display: block;

    border: none;

    border-radius: 10px;

    background: #fff;
}


/* =========================================================
   UNSUPPORTED FILE
========================================================= */

.document-preview-unsupported {
    min-height: 220px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 10px;

    text-align: center;
}


.document-preview-unsupported > div {
    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .05);

    border:
        1px solid
        rgba(255, 255, 255, .08);

    font-size: 24px;
}


.document-preview-unsupported strong {
    color: #e9eef5;

    font-size: 13px;
}


.document-preview-unsupported span {
    color: #788699;

    font-size: 10px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .document-preview-modal {
        padding: 12px;
    }


    .document-preview-container {
        width: 100%;
        height: 92vh;

        border-radius: 16px;
    }


    .document-preview-header {
        min-height: 58px;

        padding:
            0 12px;
    }


    .document-preview-content {
        padding: 10px;
    }


    .document-preview-pdf {
        min-height: 0;
    }


    .document-preview-close {
        width: 36px;
        height: 36px;

        font-size: 22px;
    }

}
/* =========================================================
   PRIME LOGIN PAGE
   Dark Glass / Red Accent / iPhone Style
========================================================= */

body.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    overflow-x: hidden;
    position: relative;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(237, 28, 36, 0.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(93, 150, 255, 0.06),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(237, 28, 36, 0.07),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #03060b 0%,
            #07101a 48%,
            #05070d 100%
        );

    color: var(--text);
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

body.login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px
        );

    background-size: 42px 42px;
}


/* =========================================================
   RED GLOW
========================================================= */

body.login-page::after {
    content: "";
    position: fixed;

    width: 520px;
    height: 520px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(237, 28, 36, 0.10) 0%,
            rgba(237, 28, 36, 0.035) 35%,
            transparent 70%
        );

    filter: blur(25px);

    z-index: -1;
    pointer-events: none;
}


/* =========================================================
   LOGIN CONTAINER
========================================================= */

.login-container {
    width: 100%;
    min-height: calc(100vh - 60px);

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    z-index: 1;
}


/* =========================================================
   LOGIN CARD
========================================================= */

.login-card {
    position: relative;

    width: min(460px, 100%);

    padding: 42px 40px 30px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(15, 24, 38, 0.94),
            rgba(6, 12, 21, 0.97)
        );

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 26px;

    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.55),
        0 10px 35px rgba(237, 28, 36, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);

    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);

    animation: loginCardAppear 500ms
        cubic-bezier(.2, .8, .2, 1)
        both;
}


/* Top glass highlight */

.login-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 10%;
    right: 10%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.22),
            transparent
        );

    pointer-events: none;
}


/* Red glow inside card */

.login-card::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -180px;
    right: -100px;

    border-radius: 50%;

    background:
        rgba(237, 28, 36, 0.10);

    filter: blur(55px);

    pointer-events: none;
}


/* =========================================================
   LOGO
========================================================= */

.login-logo {
    position: relative;
    z-index: 2;

    width: 150px;
    height: 120px;

    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.login-logo img {
    display: block;

    width: 150px;
    height: 120px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 12px 25px
            rgba(237, 28, 36, 0.20)
        );
}


/* =========================================================
   LOGIN HEADER
========================================================= */

.login-header {
    position: relative;
    z-index: 2;

    text-align: center;

    margin-bottom: 30px;
}


.login-header h1 {
    margin: 0;

    color: #ffffff;

    font-family:
        "Cairo",
        "Inter",
        Arial,
        sans-serif;

    font-size: 27px;
    line-height: 1.3;

    font-weight: 800;

    letter-spacing: -0.4px;
}


.login-header p {
    margin-top: 8px;

    color: #778497;

    font-family:
        "Cairo",
        "Inter",
        Arial,
        sans-serif;

    font-size: 11px;

    line-height: 1.7;
}


/* =========================================================
   LOGIN FORM
========================================================= */

.login-form {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* =========================================================
   INPUT GROUP
========================================================= */

.input-group {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.input-group label {
    color: #aab5c4;

    font-family:
        "Cairo",
        "Inter",
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: 700;
}


/* =========================================================
   INPUT WRAPPER
========================================================= */

.input-wrapper {
    position: relative;

    width: 100%;
    height: 52px;

    display: flex;
    align-items: center;
}


/* =========================================================
   INPUT ICON
========================================================= */

.input-icon {
    position: absolute;

    left: 16px;

    width: 19px;
    height: 19px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #66758a;

    pointer-events: none;

    transition:
        color var(--ease),
        transform var(--ease);
}


.input-icon svg {
    width: 19px;
    height: 19px;
}


/* =========================================================
   INPUT
========================================================= */

.input-wrapper input {
    width: 100%;
    height: 100%;

    padding:
        0 48px
        0 46px;

    outline: none;

    color: #eef3f9;

    font-family:
        "Inter",
        "Cairo",
        Arial,
        sans-serif;

    font-size: 13px;

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid
        rgba(255, 255, 255, 0.095);

    border-radius: 13px;

    transition:
        border-color var(--ease),
        background var(--ease),
        box-shadow var(--ease),
        transform var(--ease);
}


.input-wrapper input::placeholder {
    color: #596779;
}


.input-wrapper input:hover {
    background:
        rgba(255, 255, 255, 0.045);

    border-color:
        rgba(255, 255, 255, 0.14);
}


.input-wrapper input:focus {
    background:
        rgba(255, 255, 255, 0.05);

    border-color:
        rgba(237, 28, 36, 0.48);

    box-shadow:
        0 0 0 3px
        rgba(237, 28, 36, 0.075),
        0 8px 25px
        rgba(0, 0, 0, 0.15);
}


.input-wrapper:focus-within .input-icon {
    color: #ff5961;

    transform: scale(1.05);
}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.password-toggle {
    position: absolute;

    right: 10px;

    width: 34px;
    height: 34px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #718095;

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid
        rgba(255, 255, 255, 0.065);

    border-radius: 9px;

    transition:
        color var(--ease),
        background var(--ease),
        border-color var(--ease),
        transform var(--ease);
}


.password-toggle:hover {
    color: #ffffff;

    background:
        rgba(237, 28, 36, 0.10);

    border-color:
        rgba(237, 28, 36, 0.22);

    transform: translateY(-1px);
}


.password-toggle svg {
    width: 17px;
    height: 17px;
}


/* =========================================================
   ERROR
========================================================= */

.login-error {
    width: 100%;

    padding: 12px 14px;

    color: #ff8b91;

    font-family:
        "Cairo",
        "Inter",
        Arial,
        sans-serif;

    font-size: 11px;

    line-height: 1.6;

    text-align: center;

    background:
        rgba(237, 28, 36, 0.08);

    border:
        1px solid
        rgba(237, 28, 36, 0.22);

    border-radius: 11px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.025);
}


/* =========================================================
   LOGIN OPTIONS
========================================================= */

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: -2px;
}


.remember-me {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #7d899a;

    font-family:
        "Cairo",
        "Inter",
        Arial,
        sans-serif;

    font-size: 10px;

    cursor: pointer;

    user-select: none;
}


.remember-me input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


.custom-checkbox {
    width: 17px;
    height: 17px;

    flex: 0 0 17px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.13);

    border-radius: 5px;

    background:
        rgba(255, 255, 255, 0.035);

    transition:
        background var(--ease),
        border-color var(--ease),
        box-shadow var(--ease);
}


.remember-me input:checked + .custom-checkbox {
    background:
        linear-gradient(
            135deg,
            #ff3038,
            #b40e15
        );

    border-color:
        rgba(255, 105, 110, 0.50);

    box-shadow:
        0 5px 15px
        rgba(237, 28, 36, 0.18);
}


.remember-me input:checked + .custom-checkbox::after {
    content: "✓";

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;

    line-height: 1;
}


.forgot-password {
    color: #8996a8;

    font-family:
        "Cairo",
        "Inter",
        Arial,
        sans-serif;

    font-size: 10px;

    transition:
        color var(--ease);
}


.forgot-password:hover {
    color: #ff5961;
}


/* =========================================================
   LOGIN BUTTON
========================================================= */

.login-button {
    width: 100%;
    height: 52px;

    margin-top: 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255, 105, 110, 0.32);

    border-radius: 13px;

    color: #ffffff;

    font-family:
        "Cairo",
        "Inter",
        Arial,
        sans-serif;

    font-size: 13px;

    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            #ff3038,
            #b40e15
        );

    box-shadow:
        0 14px 32px
        rgba(237, 28, 36, 0.20),
        inset 0 1px 0
        rgba(255, 255, 255, 0.14);

    cursor: pointer;

    transition:
        transform var(--ease),
        box-shadow var(--ease),
        filter var(--ease);
}


.login-button:hover {
    transform: translateY(-2px);

    filter: brightness(1.06);

    box-shadow:
        0 18px 38px
        rgba(237, 28, 36, 0.30),
        inset 0 1px 0
        rgba(255, 255, 255, 0.16);
}


.login-button:active {
    transform: translateY(0);

    box-shadow:
        0 8px 20px
        rgba(237, 28, 36, 0.18);
}


/* =========================================================
   LOGIN FOOTER
========================================================= */

.login-footer {
    position: relative;
    z-index: 2;

    margin-top: 27px;

    padding-top: 20px;

    text-align: center;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.055);
}


.login-footer span {
    color: #596779;

    font-family:
        "Inter",
        "Cairo",
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 0.3px;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes loginCardAppear {

    from {
        opacity: 0;

        transform:
            translateY(18px)
            scale(0.985);

        filter: blur(4px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    body.login-page {
        padding: 18px;
    }


    .login-container {
        min-height: calc(100vh - 36px);
    }


    .login-card {
        padding: 34px 23px 25px;

        border-radius: 22px;
    }


    .login-logo {
        width: 130px;
        height: 105px;

        margin-bottom: 12px;
    }


    .login-logo img {
        width: 130px;
        height: 105px;
    }


    .login-header {
        margin-bottom: 25px;
    }


    .login-header h1 {
        font-size: 24px;
    }


    .login-header p {
        font-size: 10px;
    }


    .login-form {
        gap: 16px;
    }


    .login-options {
        align-items: flex-start;
    }


    .forgot-password {
        white-space: nowrap;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    body.login-page {
        padding: 12px;
    }


    .login-card {
        padding:
            28px 18px 22px;
    }


    .login-logo {
        width: 115px;
        height: 90px;
    }


    .login-logo img {
        width: 115px;
        height: 90px;
    }


    .login-header h1 {
        font-size: 22px;
    }


    .login-options {
        flex-direction: column;

        align-items: stretch;

        gap: 11px;
    }


    .forgot-password {
        text-align: right;
    }
}