/* ===== المتغيرات والأساسيات ===== */
:root {
    --navy: #102b3c;
    --navy-2: #173f54;
    --teal: #078b79;
    --teal-dark: #06695d;
    --mint: #e8f5f2;
    --bg: #f3f7f8;
    --card: #fff;
    --line: #dce7e9;
    --text: #173241;
    --muted: #687e88;
    --amber: #b77718;
    --red: #ad3737;
    --shadow: 0 16px 40px rgba(20,52,66,.07);
    font-family: Arial,Tahoma,sans-serif;
    color: var(--text);
    background: var(--bg);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    font-size: 16px;
}

button,
input,
select {
    font: inherit;
}

a {
    color: inherit;
}


/* ===== صفحة الدخول ===== */
.login-body {
    min-height: 100vh;
    background: linear-gradient(135deg,#0d2939 0%,#16495a 58%,#078b79 100%);
    display: grid;
    place-items: center;
    padding: 28px;
}

.login-shell {
    width: min(1050px,100%);
    min-height: 620px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0,0,0,.25);
    background: #fff;
}

.login-brand {
    padding: 68px 62px;
    color: #fff;
    background: radial-gradient(circle at 20% 10%,rgba(22,190,164,.35),transparent 35%),linear-gradient(145deg,#102b3c,#123f50);
    position: relative;
}

.login-brand:after {
    content: "";
    position: absolute;
    width: 290px;
    height: 290px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    left: -120px;
    bottom: -120px;
    box-shadow: 0 0 0 45px rgba(255,255,255,.025),0 0 0 90px rgba(255,255,255,.018);
}

.logo {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--teal);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.logo-large {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 1.6rem;
    margin-bottom: 58px;
}

.login-brand .eyebrow {
    color: #8be0d2;
}

.login-brand h1 {
    font-size: clamp(2.4rem,5vw,4rem);
    line-height: 1.14;
    margin: 14px 0 20px;
    letter-spacing: -.045em;
}

.login-brand p {
    font-size: 1rem;
    line-height: 1.9;
    color: #c8dce2;
    max-width: 470px;
}

.brand-points {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 36px;
}

.brand-points span {
    font-size: .78rem;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
}

.login-card {
    padding: 90px 66px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mobile-logo {
    display: none;
}


/* ===== عناصر مشتركة: عناوين صغيرة، نماذج، أزرار، تنبيهات ===== */
.section-kicker,
.eyebrow {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--teal);
}

.login-card h2 {
    font-size: 2rem;
    margin: 10px 0 8px;
}

.login-card>p {
    margin: 0 0 28px;
    color: var(--muted);
    line-height: 1.7;
}

.stack-form {
    display: grid;
    gap: 16px;
}

.stack-form label,
.employee-form label {
    font-size: .82rem;
    font-weight: 700;
    color: #3e5865;
    display: grid;
    gap: 7px;
}

.stack-form input,
.stack-form select,
.employee-form input,
.employee-form select {
    width: 100%;
    height: 45px;
    border: 1px solid #cddcdf;
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    padding: 0 12px;
    outline: none;
    transition: .18s;
}

.stack-form input:focus,
.stack-form select:focus,
.employee-form input:focus,
.employee-form select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 4px rgba(7,139,121,.1);
}

.primary-button,
.secondary-button {
    border: 0;
    border-radius: 11px;
    min-height: 45px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
}

.primary-button {
    background: var(--teal);
    color: #fff;
    box-shadow: 0 8px 22px rgba(7,139,121,.18);
}

.primary-button:hover {
    background: var(--teal-dark);
}

.primary-button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.secondary-button {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
}

.compact {
    min-height: 42px;
}

.login-note {
    color: #8b9aa1;
    margin-top: 18px;
    line-height: 1.6;
}

.alert {
    padding: 13px 15px;
    border-radius: 11px;
    margin-bottom: 18px;
    font-size: .88rem;
    border: 1px solid;
}

.alert.success {
    background: #eaf7f4;
    color: #0b6e60;
    border-color: #bee4dc;
}

.alert.error {
    background: #fff0f0;
    color: #8c3030;
    border-color: #efcaca;
}


/* ===== الهيكل العام: القائمة الجانبية والشريط العلوي ===== */
.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 260px minmax(0,1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    background: #102b3c;
    color: #fff;
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    z-index: 20;
}

.side-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 9px 24px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.side-brand span {
    display: flex;
    flex-direction: column;
}

.side-brand strong {
    font-size: 1.05rem;
}

.side-brand small {
    font-size: .7rem;
    color: #9bb5c0;
    margin-top: 3px;
}

.sidebar nav {
    display: grid;
    gap: 5px;
    margin-top: 24px;
}

.nav-label {
    font-size: .68rem;
    color: #7897a4;
    padding: 0 13px 8px;
}

.sidebar nav a {
    min-height: 45px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 11px;
    text-decoration: none;
    color: #bdd0d7;
    font-size: .9rem;
    font-weight: 700;
    position: relative;
}

.sidebar nav a:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}

.sidebar nav a.active {
    background: var(--teal);
    color: #fff;
}

.sidebar nav a>small {
    margin-right: auto;
    font-size: .6rem;
    color: #8aa4ae;
}

.sidebar nav a.active>small {
    color: #d4fff8;
}

.nav-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    font-size: .72rem;
}

.sidebar-user {
    margin-top: auto;
    padding: 15px 8px 0;
    border-top: 1px solid rgba(255,255,255,.09);
    display: grid;
    grid-template-columns: 36px minmax(0,1fr) auto;
    gap: 9px;
    align-items: center;
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--navy);
    font-weight: 800;
}

.sidebar-user>span:nth-child(2) {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-user strong,
.sidebar-user small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user strong {
    font-size: .76rem;
}

.sidebar-user small {
    font-size: .66rem;
    color: #91adb8;
    margin-top: 3px;
}

.sidebar-user a {
    font-size: .68rem;
    color: #9fb6be;
}

.app-content {
    min-width: 0;
}

.topbar {
    height: 78px;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar>div:first-of-type {
    display: flex;
    flex-direction: column;
}

.topbar-context {
    font-size: .68rem;
    color: var(--teal);
    font-weight: 800;
    margin-bottom: 3px;
}

.topbar strong {
    font-size: .98rem;
}

.topbar-date {
    margin-right: auto;
    color: var(--muted);
    font-size: .8rem;
    direction: ltr;
}

.menu-button {
    display: none;
    background: transparent;
    border: 0;
    font-size: 1.4rem;
    color: var(--text);
    margin-left: 10px;
}

.workspace {
    padding: 34px;
    max-width: 1480px;
    margin: 0 auto;
}


/* ===== عنوان الصفحة ===== */
.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.page-heading h1 {
    font-size: clamp(1.85rem,3vw,2.55rem);
    letter-spacing: -.035em;
    margin: 8px 0 8px;
}

.page-heading p {
    color: var(--muted);
    margin: 0;
    line-height: 1.7;
    font-size: .93rem;
}


/* ===== لوحة المتابعة: المؤشرات ===== */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
}

.metrics-grid article {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 17px;
    display: flex;
    gap: 13px;
    align-items: center;
    box-shadow: 0 8px 25px rgba(20,52,66,.035);
}

.metric-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-weight: 800;
    flex: none;
}

.metric-icon.navy {
    background: #e9f0f3;
    color: var(--navy);
}

.metric-icon.teal {
    background: #e6f5f2;
    color: var(--teal);
}

.metric-icon.amber {
    background: #fff3df;
    color: var(--amber);
}

.metric-icon.purple {
    background: #f0eafa;
    color: #72509b;
}

.metrics-grid article>div {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    column-gap: 6px;
}

.metrics-grid small {
    grid-column: 1/-1;
    color: var(--muted);
    font-size: .7rem;
}

.metrics-grid strong {
    font-size: 1.65rem;
    line-height: 1;
    margin-top: 7px;
}

.metrics-grid p {
    font-size: .67rem;
    color: #86979e;
    margin: 0 0 1px;
}


/* ===== التخطيط واللوحات ===== */
.content-grid {
    display: grid;
    gap: 18px;
    margin-top: 20px;
}

.dashboard-grid {
    grid-template-columns: 1.45fr .75fr;
}

.form-layout {
    grid-template-columns: 360px minmax(0,1fr);
}

.panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 17px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.panel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 17px;
}

.panel-head h2 {
    font-size: 1.05rem;
    margin: 6px 0 0;
}

.panel-head>a {
    font-size: .76rem;
    color: var(--teal);
    font-weight: 700;
}


/* ===== الفروع وحالاتها ===== */
.branch-progress-list,
.cards-list {
    display: grid;
    gap: 9px;
}

.branch-progress {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 11px;
    border: 1px solid #e5ecee;
    border-radius: 12px;
}

.branch-monogram {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #e9f4f2;
    color: var(--teal-dark);
    font-weight: 800;
}

.branch-progress>div,
.branch-card>div:first-of-type {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.branch-progress strong,
.branch-card strong {
    font-size: .84rem;
}

.branch-progress small,
.branch-card small {
    font-size: .7rem;
    color: var(--muted);
    margin-top: 4px;
}

.status {
    font-size: .68rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 5px 9px;
    display: inline-flex;
    white-space: nowrap;
}

.status.ready {
    background: #e4f4ef;
    color: #09705f;
}

.status.pending {
    background: #fff2dc;
    color: #9b6214;
}

.status.paused {
    background: #f4e9e9;
    color: #974343;
}


/* ===== مراحل دورة الرواتب ===== */
.workflow-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0;
}

.workflow-list li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 11px;
    position: relative;
    padding-bottom: 19px;
}

.workflow-list li:not(:last-child):after {
    content: "";
    position: absolute;
    right: 17px;
    top: 36px;
    bottom: 0;
    width: 1px;
    background: #dbe5e7;
}

.workflow-list li>span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef3f4;
    color: #7c9098;
    font-weight: 800;
    z-index: 1;
}

.workflow-list li.current>span {
    background: var(--teal);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(7,139,121,.1);
}

.workflow-list div {
    display: flex;
    flex-direction: column;
    padding-top: 2px;
}

.workflow-list strong {
    font-size: .82rem;
}

.workflow-list small {
    font-size: .69rem;
    color: var(--muted);
    margin-top: 4px;
}


/* ===== بطاقات الفروع ===== */
.two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.branch-card {
    display: grid;
    grid-template-columns: 54px minmax(0,1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 14px;
    border: 1px solid #e3ebed;
    border-radius: 13px;
}

.branch-monogram.large {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    font-size: 1.1rem;
}

.branch-stats {
    display: flex!important;
    flex-direction: row!important;
    gap: 18px;
}

.branch-stats>span {
    font-weight: 800;
    font-size: 1.05rem;
}

.branch-stats small {
    display: block!important;
    margin: 3px 0 0!important;
    font-weight: 400;
}


/* ===== الجداول ===== */
.table-wrap {
    overflow: auto;
}

.table-wrap table {
    border-collapse: collapse;
    width: 100%;
    min-width: 700px;
    text-align: right;
}

.table-wrap th {
    font-size: .7rem;
    color: #657b85;
    background: #f5f8f8;
    border-bottom: 1px solid var(--line);
    padding: 11px 12px;
    white-space: nowrap;
}

.table-wrap td {
    font-size: .78rem;
    padding: 12px;
    border-bottom: 1px solid #edf1f2;
    color: #36515e;
    vertical-align: middle;
}

.table-wrap td strong,
.table-wrap td small {
    display: block;
}

.table-wrap td strong {
    color: var(--text);
    font-size: .8rem;
}

.table-wrap td small {
    color: #81939a;
    margin-top: 4px;
    font-size: .67rem;
}


/* ===== الموظفون: النموذج والقائمة ===== */
.wide-panel {
    grid-column: 1/-1;
}

.employee-form-panel {
    margin-bottom: 18px;
}

.employee-form-panel summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.employee-form-panel summary::-webkit-details-marker {
    display: none;
}

.employee-form-panel summary>span:first-child {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.summary-action {
    font-size: .75rem;
    color: var(--teal);
    font-weight: 800;
}

.employee-form-panel[open] summary {
    padding-bottom: 17px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
}

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

.employee-form .file-field {
    grid-column: span 2;
}

.employee-form input[type=file] {
    padding: 9px;
    height: auto;
    min-height: 45px;
}

.employee-form label>small {
    font-size: .66rem;
    color: var(--muted);
    font-weight: 400;
}

.employee-form .primary-button {
    align-self: end;
}

.employee-list-panel {
    padding-bottom: 4px;
}

.subtle-badge {
    font-size: .7rem;
    color: var(--teal-dark);
    background: var(--mint);
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 800;
}

.ltr-number {
    direction: ltr;
    text-align: right;
}

.attachment-link {
    color: var(--teal);
    font-size: .74rem;
    font-weight: 800;
    text-decoration: none;
}

.attachment-link:hover {
    text-decoration: underline;
}

.expiry-note {
    display: block;
    color: #a56612;
    font-size: .62rem;
    margin-top: 4px;
}


/* ===== الحالات الفارغة وصفحة "قريبًا" ===== */
.empty-state {
    text-align: center;
    color: var(--muted);
    padding: 30px 15px;
    font-size: .83rem;
}

.coming-soon {
    text-align: center;
    max-width: 720px;
    margin: 70px auto;
    padding: 56px 40px;
}

.coming-number {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--navy);
    color: #fff;
    margin: 0 auto 24px;
    font-size: 1.4rem;
    font-weight: 800;
}

.coming-soon h1 {
    font-size: 2rem;
    margin: 10px 0;
}

.coming-soon p {
    max-width: 540px;
    margin: 0 auto 25px;
    color: var(--muted);
    line-height: 1.9;
}

.coming-soon .secondary-button {
    width: max-content;
    margin: auto;
}

.form-panel {
    height: max-content;
}


/* ===== الشاشات المتوسطة والصغيرة ===== */
@media (max-width:1100px) {
    .metrics-grid {
        grid-template-columns: 1fr 1fr;
    }
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    .employee-form {
        grid-template-columns: 1fr 1fr;
    }
    .employee-form .file-field {
        grid-column: span 1;
    }
}

@media (max-width:800px) {
    .app-shell {
        grid-template-columns: 1fr;
    }
    .sidebar {
        position: fixed;
        right: -280px;
        width: 260px;
        transition: .2s;
    }
    .sidebar.open {
        right: 0;
        box-shadow: -20px 0 50px rgba(0,0,0,.18);
    }
    .menu-button {
        display: block;
    }
    .workspace {
        padding: 24px 16px;
    }
    .topbar {
        padding: 0 16px;
    }
    .form-layout {
        grid-template-columns: 1fr;
    }
    .login-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .login-brand {
        display: none;
    }
    .login-card {
        padding: 48px 30px;
    }
    .mobile-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 36px;
    }
    .page-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .employee-form {
        grid-template-columns: 1fr;
    }
    .branch-card {
        grid-template-columns: 46px 1fr;
    }
    .branch-stats {
        grid-column: 2;
    }
}

@media (max-width:520px) {
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    .two-cols {
        grid-template-columns: 1fr;
    }
    .login-body {
        padding: 14px;
    }
    .login-card {
        padding: 38px 22px;
    }
    .topbar-date {
        display: none;
    }
}


/* ===== تقليل الحركة ===== */
@media (prefers-reduced-motion:reduce) {
    * {
        transition: none!important;
    }
}


/* ===== زر الخروج ولوحة الحساب ===== */
.logout-button {
    border: 0;
    background: transparent;
    color: #9fb6be;
    font-size: .68rem;
    cursor: pointer;
    padding: 4px;
}

.logout-button:hover {
    color: #fff;
}

.narrow-panel {
    max-width: 620px;
}

.narrow-panel .stack-form label small {
    color: var(--muted);
    font-weight: 400;
}

/* ===== مسيرات الرواتب ===== */
.cycle-status {
    font-size: .7rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 5px 10px;
    display: inline-flex;
    white-space: nowrap;
    background: #eef3f4;
    color: #546b75;
}
.cycle-status.collecting {
    background: #fff2dc;
    color: #9b6214;
}
.cycle-status.review {
    background: #f0eafa;
    color: #72509b;
}
.cycle-status.approved,
.cycle-status.exported,
.cycle-status.closed {
    background: #e4f4ef;
    color: #09705f;
}
.action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px 18px;
}
.action-buttons,
.row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.row-actions form {
    margin: 0;
}
.return-form {
    display: flex;
    gap: 6px;
}
.return-form input,
.payroll-table input {
    height: 36px;
    border: 1px solid #cddcdf;
    border-radius: 9px;
    padding: 0 9px;
    font: inherit;
    font-size: .78rem;
    width: 96px;
    background: #fff;
}
.return-form input {
    width: 160px;
}
.payroll-table input.narrow {
    width: 62px;
}
.payroll-table input.wide {
    width: 150px;
}
.payroll-table input:focus,
.return-form input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(7,139,121,.1);
}
.payroll-metrics {
    margin-bottom: 18px;
}
.payroll-branches {
    margin-bottom: 18px;
}
.form-hint {
    display: block;
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.6;
}
.form-footer {
    display: flex;
    justify-content: flex-end;
    padding: 14px 0 6px;
}
@media (max-width: 800px) {
    .action-bar {
        flex-direction: column;
        align-items: stretch;
    }
}
.table-wrap table.compact-table {
    min-width: 480px;
}
.payroll-table td:first-child {
    min-width: 170px;
}
.payroll-table td {
    white-space: nowrap;
}