:root {
    --primary: #0f4c81;
    --primary-dark: #0a355c;
    --primary-light: #eaf4fc;
    --accent: #16a37a;
    --background: #f4f7fb;
    --card: #ffffff;
    --text: #172033;
    --muted: #6c7890;
    --border: #e3eaf2;
    --danger: #b92743;
    --danger-bg: #fdecef;
    --warning: #a66b00;
    --warning-bg: #fff4da;
    --shadow: 0 18px 45px rgba(20, 55, 95, 0.12);
    --radius-large: 24px;
    --radius-medium: 16px;
    --radius-small: 12px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Tahoma, Arial, sans-serif;
    color: var(--text);
    background: var(--background);
}

button,
input {
    font: inherit;
}

.login-page {
    min-height: 100vh;
    padding: 28px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(
            circle at top right,
            rgba(22, 163, 122, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(15, 76, 129, 0.16),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #eef5fb 0%,
            #f8fafc 48%,
            #edf7f4 100%
        );
}

.login-container {
    width: min(1120px, 100%);
    min-height: 650px;
    display: grid;
    grid-template-columns: minmax(380px, 0.9fr) minmax(440px, 1.1fr);
    overflow: hidden;
    border: 1px solid rgba(227, 234, 242, 0.9);
    border-radius: var(--radius-large);
    background: var(--card);
    box-shadow: var(--shadow);
}

.login-card {
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--card);
}

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

.login-logo {
    width: 58px;
    height: 58px;
    margin-bottom: 20px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #063c30;
    background:
        linear-gradient(
            135deg,
            #4fd0a9,
            #9be8d1
        );
    font-size: 24px;
    font-weight: 800;
    box-shadow: 0 12px 25px rgba(22, 163, 122, 0.22);
}

.login-header h1 {
    margin: 0 0 10px;
    font-size: clamp(27px, 3vw, 34px);
    line-height: 1.3;
}

.login-header p {
    margin: 0;
    max-width: 520px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9;
}

.login-form {
    display: grid;
    gap: 18px;
}

.field {
    display: grid;
    gap: 8px;
}

.field-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.field label {
    font-size: 13px;
    font-weight: 700;
}

.input-wrapper {
    position: relative;
}

.input-wrapper input {
    width: 100%;
    min-height: 52px;
    padding: 13px 48px 13px 74px;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    color: var(--text);
    background: #ffffff;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.input-wrapper input::placeholder {
    color: #98a3b5;
}

.input-wrapper input:focus {
    border-color: #76acd3;
    box-shadow: 0 0 0 4px rgba(15, 76, 129, 0.09);
    transform: translateY(-1px);
}

.input-icon {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 16px;
    pointer-events: none;
}

.password-toggle {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    padding: 7px 9px;
    border: 0;
    border-radius: 9px;
    color: var(--primary);
    background: var(--primary-light);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.password-toggle:hover {
    background: #dceefa;
}

.login-button {
    min-height: 52px;
    margin-top: 4px;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: var(--radius-small);
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
var(--primary),
            #176ca9
        );
    cursor: pointer;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(15, 76, 129, 0.22);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(15, 76, 129, 0.26);
    filter: brightness(1.03);
}

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

.alert {
    margin-bottom: 20px;
    padding: 13px 15px;
    display: grid;
    gap: 5px;
    border-radius: var(--radius-small);
    font-size: 13px;
    line-height: 1.7;
}

.alert strong,
.alert span {
    display: block;
}

.alert-error {
    color: var(--danger);
    background: var(--danger-bg);
    border: 1px solid #f7cad3;
}

.alert-warning {
    color: var(--warning);
    background: var(--warning-bg);
    border: 1px solid #f8df9c;
}

.field-error {
    color: var(--danger);
    font-size: 12px;
}

.login-footer {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}

.login-footer p {
    margin: 0 0 6px;
}

.login-footer span {
    display: block;
}

.login-intro {
    position: relative;
    overflow: hidden;
    padding: 58px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            rgba(9, 52, 91, 0.98),
            rgba(15, 76, 129, 0.97) 55%,
            rgba(22, 123, 151, 0.95)
        );
}

.login-intro::before,
.login-intro::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
}

.login-intro::before {
    width: 290px;
    height: 290px;
    top: -110px;
    left: -80px;
}

.login-intro::after {
    width: 210px;
    height: 210px;
    right: -80px;
    bottom: -80px;
}

.login-intro > * {
    position: relative;
    z-index: 1;
}

.intro-badge {
    width: fit-content;
    margin-bottom: 20px;
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #dff7ef;
    background: rgba(255, 255, 255, 0.1);
    font-size: 12px;
    font-weight: 700;
}

.login-intro h2 {
    margin: 0 0 18px;
    max-width: 560px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.4;
}

.login-intro > p {
    margin: 0;
    max-width: 600px;
    color: #d7e9f7;
    font-size: 15px;
    line-height: 2;
}

.intro-features {
    margin-top: 34px;
    display: grid;
    gap: 16px;
}

.intro-feature {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
}

.intro-feature > span {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #073f32;
    background: #79dfbf;
    font-weight: 900;
}

.intro-feature strong,
.intro-feature small {
    display: block;
}

.intro-feature strong {
    margin-bottom: 4px;
    font-size: 14px;
}

.intro-feature small {
    color: #d7e9f7;
    font-size: 12px;
}

@media (max-width: 920px) {
    .login-container {
        grid-template-columns: 1fr;
    }

    .login-intro {
        order: -1;
        min-height: 360px;
        padding: 42px;
    }

    .login-card {
        padding: 40px;
    }
}

@media (max-width: 560px) {
    .login-page {
        padding: 12px;
    }

    .login-container {
        min-height: auto;
        border-radius: 18px;
    }

    .login-card,
    .login-intro {
        padding: 26px 22px;
    }

    .login-intro {
        min-height: 310px;
    }

    .login-intro h2 {
        font-size: 27px;
    }

    .input-wrapper input {
        padding-left: 66px;
    }
}
.dashboard-page {
    min-height: 100vh;
    background: #f4f7fb;
}

.dashboard-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 270px 1fr;
    align-items: stretch;
}

.dashboard-sidebar {
    position: relative;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    color: #ffffff;
    background:
        linear-gradient(
            180deg,
            #0a355c,
            #0f4c81 60%,
            #0b3f6f
        );
}



.dashboard-brand {
    padding: 4px 5px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.dashboard-logo {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #073d31;
    background: linear-gradient(135deg, #4fd0a9, #9be8d1);
    font-size: 21px;
    font-weight: 900;
}

.dashboard-brand h1 {
    margin: 0 0 5px;
    font-size: 17px;
}

.dashboard-brand p {
    margin: 0;
    color: #cde2f5;
    font-size: 12px;
}

.dashboard-nav {
    margin-top: 24px;
    display: grid;
    gap: 8px;
}

.dashboard-nav a {
    padding: 13px 14px;
    border-radius: 12px;
    color: #dceaf6;
    text-decoration: none;
    transition: 0.2s ease;
}

.dashboard-nav a:hover,
.dashboard-nav a.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    transform: translateX(-2px);
}

.dashboard-user {
    margin-top: auto;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
}

.dashboard-user strong,
.dashboard-user span {
    display: block;
}

.dashboard-user span {
    margin: 5px 0 12px;
    color: #cde2f5;
    font-size: 12px;
}

.dashboard-user button {
    width: 100%;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    cursor: pointer;
}

.dashboard-content {
    min-width: 0;
    padding: 26px 30px 40px;
}

.dashboard-topbar {
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.dashboard-topbar h2 {
    margin: 0 0 6px;
    font-size: 27px;
}

.dashboard-topbar p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.dashboard-profile {
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: var(--shadow);
}

.profile-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--primary);
    background: var(--primary-light);
    font-weight: 900;
}

.dashboard-profile strong,
.dashboard-profile small {
    display: block;
}

.dashboard-profile small {
    margin-top: 4px;
    color: var(--muted);
}

.welcome-panel {
    margin-bottom: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-radius: 20px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #0f4c81,
            #1d75b8
        );
    box-shadow: var(--shadow);
}

.welcome-label {
    color: #bfe9dc;
    font-size: 12px;
    font-weight: 700;
}

.welcome-panel h3 {
    margin: 7px 0;
    font-size: 25px;
}

.welcome-panel p {
    margin: 0;
    max-width: 620px;
    color: #dbeefe;
    line-height: 1.8;
}

.dashboard-primary-button {
    padding: 11px 16px;
    border-radius: 11px;
    color: var(--primary);
    background: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 800;
}

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

.dashboard-stat {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: #ffffff;
    box-shadow: var(--shadow);
}

.dashboard-stat span {
    color: var(--muted);
    font-size: 13px;
}

.dashboard-stat strong {
margin: 9px 0 6px;
    display: block;
    font-size: 29px;
}

.dashboard-stat small {
    color: var(--accent);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-card {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: var(--shadow);
}

.dashboard-card-header {
    margin-bottom: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
}

.dashboard-card-header h3 {
    margin: 0 0 5px;
}

.dashboard-card-header p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.dashboard-card-header button {
    padding: 9px 13px;
    border: 0;
    border-radius: 10px;
    color: var(--primary);
    background: var(--primary-light);
    cursor: pointer;
}

.empty-state {
    padding: 36px 15px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 15px;
    background: #fafcfe;
}

.empty-icon {
    margin-bottom: 10px;
    font-size: 30px;
}

.empty-state h4 {
    margin: 0 0 7px;
}

.empty-state p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.simple-dashboard-page {
    min-height: 100vh;
    background:
        linear-gradient(
            135deg,
            #eef5fb,
            #f4f7fb,
            #edf7f4
        );
}

.role-dashboard {
    min-height: 100vh;
    padding: 24px;
    display: grid;
    place-items: center;
}

.role-card {
    width: min(600px, 100%);
    padding: 40px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: var(--shadow);
}

.role-card h1 {
    margin: 18px 0 10px;
}

.role-card p {
    color: var(--muted);
    line-height: 1.9;
}

.role-badge {
    display: inline-block;
    padding: 8px 13px;
    border-radius: 999px;
    color: #087456;
    background: #e8f8f2;
    font-size: 12px;
    font-weight: 800;
}

.role-badge-error {
    color: var(--danger);
    background: var(--danger-bg);
}

.role-actions {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.role-actions a,
.role-card button {
    padding: 11px 16px;
    border: 0;
    border-radius: 11px;
    color: #ffffff;
    background: var(--primary);
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 1000px) {
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .dashboard-layout {
        display: block;
    }
.dashboard-sidebar {
    position: relative;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    color: #ffffff;
    background: transparent;
}
    .dashboard-user {
        margin-top: 20px;
    }

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

    .dashboard-profile {
        display: none;
    }

    .welcome-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-stats {
        grid-template-columns: 1fr;
    }
}
.dashboard-item-link {
    color: inherit;
    text-decoration: none;
}

.dashboard-item-link:hover {
    color: var(--primary);
}

.ticket-detail-page {
    width: min(1000px, 100%);
    margin: auto;
    padding: 35px 20px;
}

.ticket-back-link {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
}

.ticket-detail-card {
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: var(--shadow);
}

.ticket-detail-header {
    padding-bottom: 22px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--border);
}

.ticket-detail-header h1 {
    margin: 15px 0 8px;
}

.ticket-detail-header p {
    margin: 0;
    color: var(--muted);
}

.ticket-information-grid {
    margin: 24px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.ticket-information-grid > div {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #fafcfe;
}

.ticket-information-grid small,
.ticket-information-grid strong {
    display: block;
}

.ticket-information-grid small {
    margin-bottom: 7px;
    color: var(--muted);
}

.ticket-description {
    padding: 22px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.ticket-description h2,
.ticket-replies h2 {
    margin-top: 0;
}

.ticket-description p {
    color: var(--muted);
    line-height: 2;
}

.ticket-replies {
    padding-top: 24px;
}

.ticket-reply {
    margin-top: 13px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fafcfe;
}

.ticket-reply > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.ticket-reply small {
    color: var(--muted);
}

.ticket-reply p {
    margin-bottom: 0;
    line-height: 1.9;
}

@media (max-width: 760px) {
    .ticket-detail-header {
        flex-direction: column;
    }

    .ticket-information-grid {
        grid-template-columns: 1fr;
    }
}
.ticket-reply-form {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.ticket-reply-form form {
    display: grid;
    gap: 12px;
}

.ticket-reply-form label {
    font-size: 13px;
    font-weight: 700;
}

.ticket-reply-form textarea {
    width: 100%;
    padding: 14px;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: 13px;
    color: var(--text);
    background: #ffffff;
    font: inherit;
    line-height: 1.8;
    outline: none;
}

.ticket-reply-form textarea:focus {
    border-color: #76acd3;
    box-shadow: 0 0 0 4px rgba(15, 76, 129, 0.09);
}

.internal-note-option {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
}

.ticket-reply-form button {
    width: fit-content;
    padding: 11px 22px;
    border: 0;
    border-radius: 11px;
    color: #ffffff;
    background: var(--primary);
    cursor: pointer;
    font-weight: 800;
}
.ticket-status-form {
    margin: 22px 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fafcfe;
}

.ticket-status-form form {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
}

.ticket-status-form label {
    width: 100%;
    font-size: 13px;
    font-weight: 800;
}

.ticket-status-form select {
    min-width: 210px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    font: inherit;
}

.ticket-status-form button {
    padding: 11px 18px;
    border: 0;
    border-radius: 10px;
    color: #ffffff;
    background: var(--primary);
    cursor: pointer;
    font-weight: 800;
}
.create-ticket-form {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.create-ticket-form > div {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.create-ticket-form label {
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.create-ticket-form input,
.create-ticket-form select,
.create-ticket-form textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    background: #ffffff;
    font: inherit;
    outline: none;
    box-sizing: border-box;
}

.create-ticket-form input:focus,
.create-ticket-form select:focus,
.create-ticket-form textarea:focus {
    border-color: #76acd3;
    box-shadow: 0 0 0 4px rgba(15, 76, 129, 0.09);
}

.create-ticket-form textarea {
    min-height: 170px;
    resize: vertical;
    line-height: 1.8;
}

.create-ticket-full-width {
    grid-column: 1 / -1;
}

.create-ticket-form button {
    width: fit-content;
    padding: 12px 25px;
    border: 0;
    border-radius: 11px;
    color: #ffffff;
    background: var(--primary);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.create-ticket-form button:hover {
    filter: brightness(0.95);
}

@media (max-width: 760px) {
    .create-ticket-form {
        grid-template-columns: 1fr;
    }

    .create-ticket-full-width {
        grid-column: auto;
    }

    .create-ticket-form button {
        width: 100%;
    }
}
.project-progress-section {
    margin: 26px 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fafcfe;
}

.project-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
}

.project-progress-header h2 {
    margin: 0;
    font-size: 18px;
}

.project-progress-header strong {
    font-size: 20px;
}

.project-progress-bar {
    width: 100%;
    height: 12px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
}

.project-progress-bar::-webkit-progress-bar {
    background: #e9eef3;
    border-radius: 999px;
}

.project-progress-bar::-webkit-progress-value {
    background: var(--primary);
    border-radius: 999px;
}

.project-progress-bar::-moz-progress-bar {
    background: var(--primary);
    border-radius: 999px;
}
.system-messages {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
}

.system-message {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
}

.system-message.success {
    background: #edf9f1;
    border-color: #b9e3c6;
    color: #216e39;
}

.system-message.error {
    background: #fff1f1;
    border-color: #efc2c2;
    color: #a12626;
}

.system-message.warning {
    background: #fff8e6;
    border-color: #edd9a1;
    color: #865f00;
}

.system-message.info {
    background: #eef6ff;
    border-color: #c5dcf5;
    color: #235f99;
}
/* =========================
   Client Portal
========================= */

.client-summary-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    padding: 24px;
    margin-bottom: 20px;

    border-radius: 20px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0f4c81,
            #1d75b8
        );
}

.client-summary-box h3 {
    margin: 6px 0 8px;
    font-size: 24px;
}

.client-summary-box p {
    margin: 0;
    line-height: 1.8;
    color: #dbeefe;
}

.client-summary-box .dashboard-primary-button {
    background: #ffffff;
    color: #0f4c81;
}

.client-overview-stats {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-bottom: 20px;
}

.client-overview-stat {
    padding: 20px;

    background: #ffffff;

    border:
        1px solid #e5ebf3;

    border-radius: 18px;

    box-shadow:
        0 12px 30px rgba(25, 55, 95, 0.07);
}

.client-overview-stat span {
    display: block;

    color: #6c7890;

    font-size: 13px;
}

.client-overview-stat strong {
    display: block;

    margin: 10px 0 5px;

    color: #172033;

    font-size: 28px;
}

.client-overview-stat small {
    color: #15a77a;
}

.client-main-grid {
    display: block;
    width: 100%;
}

.client-portal-card {
    padding: 20px;

    background: #ffffff;

    border:
        1px solid #e5ebf3;

    border-radius: 20px;

    box-shadow:
        0 12px 30px rgba(25, 55, 95, 0.07);
}

.client-card-heading {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    margin-bottom: 18px;
}

.client-card-heading h3 {
    margin: 0 0 5px;
}

.client-card-heading p {
    margin: 0;

    color: #6c7890;

    font-size: 13px;
}

.client-ticket-list,
.client-project-list {
    display: grid;

    gap: 12px;
}

.client-ticket-item,
.client-project-item {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    padding: 14px;

    color: #172033;

    text-decoration: none;

    border:
        1px solid #e5ebf3;

    border-radius: 14px;

    transition: 0.2s;
}

.client-ticket-item:hover,
.client-project-item:hover {
    background: #f8fbfe;

    border-color: #b9d4e8;
}

.client-ticket-item strong,
.client-project-item strong {
    display: block;

    margin-bottom: 5px;
}

.client-ticket-item small,
.client-project-item small {
    color: #6c7890;
}

.client-ticket-info {
    display: grid;

    gap: 5px;

    text-align: left;
}

.client-ticket-info span {
    color: #6c7890;

    font-size: 12px;
}

.client-ticket-info b {
    color: #0f4c81;

    font-size: 12px;
}

@media (max-width: 1000px) {

    .client-overview-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }

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

@media (max-width: 650px) {

    .client-summary-box {
        flex-direction: column;

        align-items: stretch;
    }

    .client-overview-stats {
        grid-template-columns: 1fr;
    }
}
/* =========================
   Ticket Attachments
========================= */

.ticket-attachments {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #e7ebf1;
}

.ticket-attachments h2 {
    margin-bottom: 18px;
    color: #14213d;
}

.ticket-attachments-list {
    display: grid;
    gap: 12px;
}

.ticket-attachment-card {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 16px 18px;

    background: #ffffff;

    border: 1px solid #e1e6ef;
    border-radius: 16px;

    transition: 0.2s ease;
}

.ticket-attachment-card:hover {
    border-color: #b8c4d8;
    box-shadow: 0 8px 24px rgba(20, 33, 61, 0.08);
}

.ticket-attachment-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    border-radius: 12px;

    background: #eef2fa;
    color: #14213d;

    font-size: 22px;
}

.ticket-attachment-info {
    flex: 1;
    min-width: 0;
}

.ticket-attachment-name {
    display: block;

    margin-bottom: 6px;

    color: #14213d;

    font-weight: 700;
    text-decoration: none;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-attachment-name:hover {
    text-decoration: underline;
}

.ticket-attachment-info small {
    color: #78839a;
    font-size: 12px;
}

.ticket-attachment-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.attachment-view-button,
.attachment-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 80px;
    padding: 10px 16px;

    border-radius: 10px;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition: 0.2s ease;
}

.attachment-view-button {
    background: #ffffff;
    color: #14213d;

    border: 1px solid #14213d;
}

.attachment-view-button:hover {
    background: #f4f6fa;
}

.attachment-download-button {
    background: #14213d;
    color: #ffffff;

    border: 1px solid #14213d;
}

.attachment-download-button:hover {
    opacity: 0.9;
}

.attachments-note {
    margin-top: 10px;

    color: #8791a4;

    font-size: 12px;

    text-align: center;
}

@media (max-width: 700px) {

    .ticket-attachment-card {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .ticket-attachment-actions {
        width: 100%;
    }

    .attachment-view-button,
    .attachment-download-button {
        flex: 1;
    }
}
/* =========================
   Create Ticket Actions
========================= */

.create-ticket-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 20px;
}

.ticket-submit-button,
.ticket-draft-button {
    min-width: 150px;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

.ticket-submit-button {
    background: #14213d;
    color: #ffffff;
    border: 1px solid #14213d;
}

.ticket-submit-button:hover {
    background: #0d172c;
}

.ticket-draft-button {
    background: #ffffff;
    color: #14213d;
    border: 1px solid #14213d;
}

.ticket-draft-button:hover {
    background: #f5f7fb;
}

@media (max-width: 600px) {
    .create-ticket-actions {
        flex-direction: column;
    }

    .ticket-submit-button,
    .ticket-draft-button {
        width: 100%;
    }
}
.ticket-section-heading {
    margin-bottom: 18px;
}

.ticket-section-heading h2 {
    margin: 0 0 5px;
    color: #14213d;
    font-size: 23px;
}

.ticket-section-heading p {
    margin: 0;
    color: #8a94a6;
    font-size: 13px;
}

.ticket-attachments-list {
    display: grid;
    gap: 14px;
}

.ticket-attachment-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #dfe5ee;
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(20, 33, 61, 0.05);
}

.ticket-attachment-file {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.ticket-attachment-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf1f8;
    border-radius: 13px;
    font-size: 21px;
}

.ticket-attachment-info {
    min-width: 0;
}

.ticket-attachment-name {
    display: block;
    margin-bottom: 6px;
    color: #14213d;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

.ticket-attachment-info small {
    color: #7f8a9e;
    font-size: 12px;
}

.ticket-attachment-actions {
    display: flex;
    gap: 10px;
}

.attachment-view-button,
.attachment-download-button {
    min-width: 82px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.attachment-view-button {
    background: #ffffff;
    color: #14213d;
    border: 1px solid #14213d;
}

.attachment-download-button {
    background: #14213d;
    color: #ffffff;
    border: 1px solid #14213d;
}

.attachments-note {
    margin-top: 10px;
    color: #8b95a7;
    font-size: 12px;
    text-align: center;
}

.attachment-empty-state {
    padding: 28px;
    text-align: center;
    background: #f8faff;
    border: 1px dashed #ccd4e1;
    border-radius: 16px;
}
/* =====================================
   Create Ticket Buttons - Final Fix
===================================== */

.create-ticket-form .create-ticket-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100%;
    margin-top: 20px;
}

.create-ticket-form .ticket-submit-button,
.create-ticket-form .ticket-draft-button {
    width: auto !important;
    min-width: 160px;
    flex: 0 0 auto !important;

    padding: 12px 22px;
    border-radius: 11px;

    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.create-ticket-form .ticket-submit-button {
    background: #14213d;
    color: #ffffff;
    border: 1px solid #14213d;
}

.create-ticket-form .ticket-draft-button {
    background: #ffffff;
    color: #14213d;
    border: 1px solid #14213d;
}

@media (max-width: 600px) {
    .create-ticket-form .create-ticket-actions {
        flex-direction: column !important;
    }

    .create-ticket-form .ticket-submit-button,
    .create-ticket-form .ticket-draft-button {
        width: 100% !important;
    }
}
/* =====================================
   Create Ticket Upload
===================================== */

.ticket-file-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ticket-upload-box {
    width: 100%;
    min-height: 115px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    padding: 22px;

    background: #f8fafc;

    border: 2px dashed #c8d2e1;
    border-radius: 16px;

    cursor: pointer;

    transition: 0.2s ease;
}

.ticket-upload-box:hover {
    background: #f2f5fa;
    border-color: #14213d;
}

.ticket-upload-icon {
    width: 48px;
    height: 48px;

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

    background: #e9eef6;
    border-radius: 13px;

    font-size: 21px;
}

.ticket-upload-text {
    display: grid;
    gap: 5px;
}

.ticket-upload-text strong {
    color: #14213d;
    font-size: 14px;
}

/* =====================================
   Create Ticket Buttons - Final
===================================== */

.create-ticket-form .create-ticket-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100%;
    margin-top: 20px;
}

.create-ticket-form .ticket-submit-button,
.create-ticket-form .ticket-draft-button {
    width: auto !important;
    min-width: 155px;
    flex: 0 0 auto !important;

    padding: 12px 22px;
    border-radius: 11px;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
    transition: 0.2s ease;
}

/* إرسال التذكرة */
.create-ticket-form .ticket-submit-button {
    background: #0f4c81 !important;
    color: #ffffff !important;
    border: 1px solid #0f4c81 !important;
}

.create-ticket-form .ticket-submit-button:hover {
    background: #0b3f6f !important;
}

/* حفظ كمسودة */
.create-ticket-form .ticket-draft-button {
    background: #eaf4fc !important;
    color: #0f4c81 !important;
    border: 1px solid #d6e7f5 !important;
}

.create-ticket-form .ticket-draft-button:hover {
    background: #dceefa !important;
    color: #0b355d !important;
}

@media (max-width: 600px) {
    .create-ticket-form .create-ticket-actions {
        flex-direction: column !important;
    }

    .create-ticket-form .ticket-submit-button,
    .create-ticket-form .ticket-draft-button {
        width: 100% !important;
    }
}
.client-stat-hint {
    display: block;
    margin-top: 7px;
    color: #15a77a !important;
    font-size: 12px;
    font-weight: 600;
}

.client-subscription-status {
    font-size: 21px !important;
}
/* ==============================
   Client ticket status
============================== */

.client-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    padding: 6px 11px;

    border-radius: 999px;

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

    white-space: nowrap;
}

.status-new {
    background: #fff4da;
    color: #9b6500;
}

.status-progress {
    background: #e9f3ff;
    color: #0d63a8;
}

.status-waiting {
    background: #fff3e5;
    color: #a65b00;
}

.status-resolved,
.status-closed {
    background: #e6f7f1;
    color: #087456;
}

.status-draft {
    background: #eef1f5;
    color: #647088;
}
.ticket-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    padding: 5px 10px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
}

/* جديدة */
.status-new {
    background: #fff4da !important;
    color: #9b6500 !important;
}

/* تحت الإجراء */
.status-in_progress {
    background: #e8f2ff !important;
    color: #0d63a8 !important;
}

/* بانتظار العميل */
.status-waiting_client {
    background: #fff0df !important;
    color: #a65b00 !important;
}

/* تم الحل */
.status-resolved {
    background: #e5f7f0 !important;
    color: #087456 !important;
}

/* مغلقة */
.status-closed {
    background: #e5f7f0 !important;
    color: #087456 !important;
}

/* مسودة */
.status-draft {
    background: #eef1f5 !important;
    color: #647088 !important;
}
/* =====================================
   Client Rating Card
===================================== */



.client-rating-icon {
    width: 44px;
    height: 44px;

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

    background: #fff4d6;
    color: #e8a11b;

    border-radius: 12px;
    font-size: 22px;
}

.client-rating-ticket {
    margin-bottom: 16px;
    padding: 14px 16px;

    background: #f8fafc;

    border: 1px solid #e1e7ef;
    border-radius: 14px;
}

.client-rating-ticket span {
    display: block;
    margin-bottom: 5px;

    color: #768197;
    font-size: 12px;
}

.client-rating-ticket strong {
    color: #14213d;
}

.client-rating-stars {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;

    gap: 5px;
    margin-bottom: 16px;
}

.client-rating-stars input {
    display: none;
}

.client-rating-stars label {
    color: #d8dee8;
    font-size: 32px;

    cursor: pointer;
    transition: 0.15s ease;
}
/* =====================================
   Payment Request - FINAL FIX
===================================== */

.client-payment-card {
    margin-top: 18px !important;
}

.client-payment-card .client-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.client-payment-status {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    padding: 7px 12px;

    background: #e6f7f1 !important;
    color: #087456 !important;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
}

.client-payment-form {
    width: 100%;
}

.client-payment-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100%;
}

.client-payment-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.client-payment-field label {
    color: #14213d;
    font-size: 13px;
    font-weight: 700;
}

.client-payment-field input[type="text"] {
    display: block;
    width: 100% !important;

    box-sizing: border-box;

    padding: 13px 14px !important;

    background: #f8fafc !important;
    color: #14213d !important;

    border: 1px solid #dce4ee !important;
    border-radius: 12px !important;

    font-size: 13px;
    outline: none;
}

.client-payment-full {
    grid-column: 1 / -1 !important;
}

.client-payment-upload {
    display: flex !important;
    align-items: center;
    justify-content: center;

    gap: 14px;

    width: 100%;
    min-height: 110px;

    box-sizing: border-box;

    padding: 20px;

    background: #f8fbfe !important;

    border: 2px dashed #c8d8e8 !important;
    border-radius: 16px !important;

    cursor: pointer;
    transition: 0.2s ease;
}

.client-payment-upload:hover {
    background: #eef5fb !important;
    border-color: #0f4c81 !important;
}

.client-payment-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    flex-shrink: 0;

    background: #eaf4fc;
    border-radius: 12px;

    font-size: 21px;
}

.client-payment-upload strong {
    display: block;
    margin-bottom: 4px;

    color: #0f4c81;
    font-size: 13px;
}

.client-payment-upload span {
    display: block;

    color: #748096;
    font-size: 12px;
}

/* يخفي Choose File الافتراضي */
.client-payment-file {
    display: none !important;
}

.client-payment-form .client-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 16px;

    padding: 12px 20px;

    background: #0f4c81 !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 11px;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.client-payment-form .client-primary-button:hover {
    background: #0b3f6f !important;
}

@media (max-width: 700px) {
    .client-payment-grid {
        grid-template-columns: 1fr !important;
    }

    .client-payment-full {
        grid-column: auto !important;
    }
}
.client-rating-card {
    padding: 24px;
}

.client-rating-ticket {
    margin: 18px 0;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.client-rating-ticket span {
    display: block;
    font-size: 13px;
    color: #64748b;
    margin-bottom: 5px;
}

.client-rating-ticket strong {
    color: #0f2f4c;
    font-size: 16px;
}

/* النجوم */
.client-rating-stars {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 7px;
    margin: 18px 0;
}

.client-rating-stars input {
    display: none;
}

.client-rating-stars label {
    font-size: 32px;
    color: #d7dee5;
    cursor: pointer;
    transition: 0.2s ease;
}

.client-rating-stars label:hover,
.client-rating-stars label:hover ~ label,
.client-rating-stars input:checked ~ label {
    color: #d4a62a;
}

/* الملاحظة */
.client-rating-field {
    margin-top: 16px;
}

.client-rating-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #142d43;
}

.client-rating-field textarea {
    width: 100%;
    min-height: 110px;
    padding: 14px;
    border: 1px solid #d7e0e8;
    border-radius: 12px;
    resize: vertical;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.client-rating-field textarea:focus {
    outline: none;
    border-color: #0f4c81;
}

/* زر إرسال التقييم */
.client-rating-form .client-primary-button {
    margin-top: 16px;
    min-width: 150px;
    padding: 11px 20px;
    border: none;
    border-radius: 11px;
    background: #0f4c81;
    color: #ffffff;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}

.client-rating-form .client-primary-button:hover {
    background: #0b3f6f;
}
.client-rating-result {
    text-align: center;
    padding: 25px 15px;
}

.client-rating-result-stars {
    font-size: 34px;
    letter-spacing: 5px;
    color: #d4a62a;
    margin-bottom: 12px;
}

.client-rating-result strong {
    display: block;
    font-size: 20px;
    color: #142d43;
    margin-bottom: 7px;
}

.client-rating-result p {
    margin: 0 0 8px;
    color: #2f6f4e;
    font-weight: 700;
}

.client-rating-result small {
    color: #64748b;
}

.client-rating-comment-box {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid #e4e9ee;
    border-radius: 12px;
    background: #f8fafc;
    text-align: right;
}

.client-rating-comment-label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
}

.client-rating-comment {
    margin: 0;
    color: #243746;
    font-size: 15px;
    line-height: 1.8;
}

.client-rating-date {
    display: block;
    margin-top: 12px;
    color: #94a3b8;
    font-size: 12px;
}
.client-payment-submitted {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 22px;
    border: 1px solid #dfe7ee;
    border-radius: 16px;
    background: #f8fbfd;
}

.client-payment-success-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f5ee;
    color: #167348;
    font-size: 22px;
    font-weight: 700;
}

.client-payment-submitted-content {
    flex: 1;
    min-width: 0;
}

.client-payment-submitted-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.client-payment-submitted-header h4 {
    margin: 0 0 6px;
    font-size: 19px;
}

.client-payment-submitted-header p {
    margin: 0;
    font-size: 14px;
    opacity: 0.7;
}

.client-payment-review-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border-radius: 999px;
    background: #fff2c9;
    color: #76530b;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.client-payment-file-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 16px;
    border: 1px solid #e3e8ed;
    border-radius: 12px;
    background: #ffffff;
    margin-bottom: 12px;
}

.client-payment-file-label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    opacity: 0.6;
}

.client-payment-file-box strong {
    font-size: 15px;
}

.client-payment-view-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 9px;
    text-decoration: none;
    background: #0f3650;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: 0.2s ease;
}

.client-payment-view-link:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.client-payment-date {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.55;
}

@media (max-width: 700px) {
    .client-payment-submitted {
        flex-direction: column;
    }

    .client-payment-submitted-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .client-payment-file-box {
        flex-direction: column;
        align-items: stretch;
    }

    .client-payment-review-badge {
        width: fit-content;
    }

    .client-payment-view-link {
        width: fit-content;
    }
}
.ticket-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* جديدة */
.status-new {
    background: #eaf2ff;
    color: #245ea8;
}

/* تحت الإجراء */
.status-in_progress {
    background: #fff4d8;
    color: #9a6500;
}

/* بانتظار العميل */
.status-waiting_client {
    background: #fff0e2;
    color: #a45500;
}

/* تم الحل */
.status-resolved {
    background: #e7f7ee;
    color: #28774b;
}

/* مغلقة */
.status-closed {
    background: #edf0f3;
    color: #59636e;
}
.support-ticket-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    min-width: 115px;
    margin-inline-start: auto;
}

.support-ticket-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 95px;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.support-ticket-priority {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 95px;
    padding: 5px 10px;
    border-radius: 9px;
    background: #f4f6f8;
    font-size: 11px;
    font-weight: 600;
}

/* الحالات */

.status-new {
    background: #eaf2ff;
    color: #245ea8;
}

.status-in_progress {
    background: #e9f1f8;
    color: #315f7d;
}

.status-waiting_client {
    background: #fff3df;
    color: #9a5c10;
}

.status-resolved {
    background: #e8f6ee;
    color: #28734a;
}

.status-closed {
    background: #e6f3ea;
    color: #23633d;
}
.support-ticket-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    margin-bottom: 10px;
    border: 1px solid #e5e8ec;
    border-radius: 14px;
    background: #ffffff;
}

.support-ticket-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.support-ticket-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 110px;
    flex-shrink: 0;
}
.support-ticket-item {
    border: 1px solid #e6e9ed;
    border-radius: 14px;
    background: #ffffff;
    padding: 16px 18px;
    margin-bottom: 12px;
}

.support-ticket-meta {
    width: 110px;
    min-width: 110px;
    align-items: center;
}

.support-ticket-status,
.support-ticket-priority {
    width: 100%;
    text-align: center;
}
.support-ticket-priority {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 9px;
    background: #f4f6f8;
    color: #59636e;
    font-size: 12px;
    font-weight: 600;
}

.support-ticket-item {
    margin-bottom: 14px;
}
.ticket-detail-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 120px;
}

.ticket-detail-badges .ticket-status-badge {
    min-width: 110px;
    padding: 7px 12px;
    border-radius: 10px;
    text-align: center;
    font-weight: 700;
}

.ticket-priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 6px 12px;
    border-radius: 10px;
    background: #f4f6f8;
    color: #59636e;
    font-size: 12px;
    font-weight: 600;
}
.support-project-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    margin-bottom: 12px;
    border: 1px solid #e6e9ed;
    border-radius: 14px;
    background: #ffffff;
}

.support-project-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.support-project-meta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 170px;
    min-width: 0;
    max-width: 170px;
    box-sizing: border-box;
}

.support-project-status,
.support-project-progress {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 6px 10px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
}

.support-project-status {
    background: #eaf2f7;
    color: #315f7d;
}

.support-project-progress {
    background: #f4f6f8;
    color: #59636e;
}
.support-project-item {
    border: 1px solid #e4e8ec;
    border-radius: 14px;
    background: #ffffff;
    padding: 16px 18px;
    margin-bottom: 12px;
}

.support-project-status {
    background: #eaf2f7;
    border-radius: 9px;
    padding: 7px 12px;
}

.support-project-progress {
    background: #f4f6f8;
    border-radius: 9px;
    padding: 7px 12px;
}
.support-project-progress-box {
    width: 160px;
}

.support-project-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    font-size: 12px;
}

.support-project-progress-track {
    width: 100%;
    height: 10px;
    background: #e8ecef;
    border-radius: 999px;
    overflow: hidden;
    box-sizing: border-box;
}


.support-project-progress-value {
    height: 100%;
    width: 0;
    background: #58a36f;
    border-radius: 999px;
}
.admin-latest-section {
    margin-top: 18px;
}

.admin-latest-tickets-card {
    width: 100%;
}

.admin-latest-tickets-card .dashboard-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.admin-view-all-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 15px;
    border-radius: 10px;
    background: #eaf2f7;
    color: #173b57;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e4e8ec;
    border-radius: 14px;
    background: #ffffff;
}

.admin-tickets-table {
    width: 100%;
    border-collapse: collapse;
    direction: rtl;
}

.admin-tickets-table th,
.admin-tickets-table td {
    padding: 14px 16px;
    text-align: right;
    border-bottom: 1px solid #edf0f2;
    white-space: nowrap;
}

.admin-tickets-table th {
    background: #f7f9fb;
    color: #59636e;
    font-size: 12px;
    font-weight: 700;
}

.admin-tickets-table td {
    font-size: 13px;
    color: #26323c;
}

.admin-tickets-table tbody tr:last-child td {
    border-bottom: 0;
}
.admin-all-tickets-card {
    width: 100%;
    margin-top: 18px;
}

.admin-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 15px;
    border-radius: 10px;
    background: #eaf2f7;
    color: #173b57;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}
.ticket-priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

/* عادية */
.priority-normal {
    background: #eef1f4;
    color: #59636e;
}

/* عالية */
.priority-high {
    background: #fff1dd;
    color: #a66400;
}

/* عاجلة */
.priority-urgent {
    background: #fde9ed;
    color: #b8324a;
}
.admin-ticket-filters {
    display: grid;
    grid-template-columns: 2fr repeat(5, 1fr);
    gap: 12px;
    align-items: end;
    margin: 20px 0 24px;
    padding: 18px;
    background: #f8fafb;
    border: 1px solid #e4e8ec;
    border-radius: 14px;
}

.admin-filter-search,
.admin-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-ticket-filters label {
    font-size: 12px;
    font-weight: 700;
    color: #47515c;
}

.admin-ticket-filters input,
.admin-ticket-filters select {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid #d8dde3;
    border-radius: 10px;
    background: #ffffff;
    color: #1f2933;
    font-size: 13px;
    outline: none;
}

.admin-ticket-filters input:focus,
.admin-ticket-filters select:focus {
    border-color: #315f7d;
}

.admin-filter-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 4px;
}

.admin-filter-submit,
.admin-filter-reset {
    min-height: 40px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.admin-filter-submit {
    border: none;
    background: #123d5a;
    color: #ffffff;
}

.admin-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8dde3;
    background: #ffffff;
    color: #47515c;
}

@media (max-width: 1100px) {
    .admin-ticket-filters {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .admin-ticket-filters {
        grid-template-columns: 1fr;
    }

    .admin-filter-actions {
        grid-column: 1;
    }
}
.admin-dashboard-two-col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
    align-items: stretch;
    margin-top: 18px;
}

.admin-payments-status-section {
    background: #ffffff;
    border: 1px solid #e5ebf3;
    border-radius: 18px;
    padding: 20px;
}

.admin-payment-status-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.admin-payment-mini-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e5ebf3;
    border-radius: 14px;
    background: #fdfefe;
}

.admin-payment-mini-item strong {
    display: block;
    font-size: 14px;
    color: #1f2d3d;
}

.admin-payment-mini-item small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #7b8794;
}

.admin-payment-badge {
    min-width: 42px;
    padding: 7px 10px;
    border-radius: 999px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
}

.admin-payment-badge.pending {
    background: #fff4d8;
    color: #946200;
}

.admin-payment-badge.approved {
    background: #e7f6ed;
    color: #20734a;
}

.admin-payment-badge.rejected {
    background: #fde9ec;
    color: #b3263e;
}

@media (max-width: 1000px) {
    .admin-dashboard-two-col {
        grid-template-columns: 1fr;
    }
}
.admin-payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid #edf0f3;
}

.admin-payment-row:last-child {
    border-bottom: none;
}

.admin-payment-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.admin-payment-info strong {
    font-size: 15px;
    color: #1f2d3d;
}

.admin-payment-info small {
    font-size: 12px;
    color: #7c8792;
}

.admin-payment-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 105px;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

/* بانتظار المراجعة */
.payment-pending {
    background: #fff1cf;
    color: #9a6500;
}

/* تم الاعتماد */
.payment-approved {
    background: #e6f4eb;
    color: #28704a;
}

/* مرفوضة */
.payment-rejected {
    background: #fde8eb;
    color: #a93245;
}
.admin-payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 18px 20px;
    margin-bottom: 14px;

    background: #ffffff;
    border: 1px solid #dfe5eb;
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(20, 45, 70, 0.06);
}

.admin-payment-row:last-child {
    margin-bottom: 0;
}
.admin-payment-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

.payment-pending {
    background: #fff1cf;
    color: #946200;
}

.payment-approved {
    background: #e6f4eb;
    color: #28704a;
}

.payment-rejected {
    background: #fde8eb;
    color: #a93245;
}
.admin-payment-status-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}
.payment-waiting_payment {
    background: #fff4d6;
    color: #9a6500;
}

.payment-paid {
    background: #e6f4eb;
    color: #28704a;
}

.payment-overdue {
    background: #fde8eb;
    color: #a93245;
}
.admin-dashboard-bottom-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;

    direction: rtl;
}

.admin-top-organizations-card {
    background: #ffffff;
    border: 1px solid #e3e8ed;
    border-radius: 18px;
    padding: 22px;
    min-height: 250px;
    grid-column: 3;
}

.admin-top-organizations-card .dashboard-card-header {
    margin-bottom: 22px;
}

.admin-top-organizations-card .dashboard-card-header h3 {
    margin: 0 0 6px;
    font-size: 20px;
    color: #1f2d3d;
}

.admin-top-organizations-card .dashboard-card-header p {
    margin: 0;
    font-size: 13px;
    color: #7a8793;
}

.admin-organization-usage-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.admin-organization-usage-item {
    padding: 14px 16px;
    background: #f8fafb;
    border: 1px solid #edf0f3;
    border-radius: 13px;
}

.admin-organization-usage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 10px;
}

.admin-organization-usage-header span {
    font-weight: 700;
    color: #283746;
}

.admin-organization-usage-header strong {
    font-size: 13px;
    color: #52616f;
}

.admin-organization-progress-track {
    width: 100%;
    height: 9px;
    background: #e6ece9;
    border-radius: 999px;
    overflow: hidden;
}

.admin-organization-progress-value {
    width: 0;
    height: 100%;
    background: #58a36f;
    border-radius: 999px;
    transition: width 0.35s ease;
}
.admin-rating-card {
    background: #ffffff;
    border: 1px solid #e3e8ed;
    border-radius: 18px;
    padding: 22px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
}

.admin-rating-header h3 {
    margin: 0 0 6px;
    font-size: 20px;
    color: #172033;
}

.admin-rating-header p {
    margin: 0;
    color: #6c7890;
    font-size: 13px;
}

.admin-rating-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.admin-rating-value {
    font-size: 52px;
    line-height: 1;
    font-weight: 800;
    color: #0f4c81;
    margin-bottom: 12px;
}

.admin-rating-stars {
    font-size: 27px;
    letter-spacing: 4px;
    color: #f4a62a;
    margin-bottom: 12px;
}

.admin-rating-count {
    margin: 0;
    color: #6c7890;
    font-size: 13px;
}

.admin-rating-count strong {
    color: #172033;
    font-weight: 700;
}
.admin-top-organizations-card {
    grid-column: 3;
}

.admin-rating-card {
    grid-column: 2;
}
.admin-month-summary-card {
    background: linear-gradient(145deg, #0f5f8a, #147fb2);
    color: #ffffff;
    border-radius: 18px;
    padding: 24px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
}

.admin-month-summary-header h3 {
    margin: 0 0 7px;
    font-size: 21px;
}

.admin-month-summary-header p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
}

.admin-month-summary-content {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.admin-month-stat {
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-month-stat span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.82);
}

.admin-month-stat strong {
    font-size: 30px;
    line-height: 1;
}
.admin-dashboard-bottom-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    direction: rtl;
}

.admin-top-organizations-card,
.admin-rating-card,
.admin-month-summary-card {
    width: 100%;
    min-width: 0;
    min-height: 260px;
    grid-column: auto;
    align-self: stretch;
}

/* =========================================================
   صفحة الجهات والعملاء
   ========================================================= */

.admin-clients-page {
    width: 100%;
    padding: 24px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    box-shadow: 0 10px 30px rgba(15, 35, 55, 0.06);
}

.clients-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #edf0f3;
}

.clients-page-header h2 {
    margin: 0 0 6px;
    font-size: 24px;
    color: #17324d;
}

.clients-page-header p {
    margin: 0;
    font-size: 14px;
    color: #7b8794;
}

.clients-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    background: #17324d;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: 0.2s ease;
}

.clients-add-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(23, 50, 77, 0.18);
}


/* بطاقة الجهة */

.client-card {
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(15, 35, 55, 0.05);
}

.client-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.client-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.entity-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #17324d;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
}

.client-title h3 {
    margin: 0 0 6px;
    font-size: 20px;
    color: #1f2d3d;
}

.client-title p {
    margin: 3px 0;
    font-size: 13px;
    color: #7a8793;
}

.client-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.client-contract-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.client-contract-status.active {
    background: #e8f5ee;
    color: #28704a;
}

.client-contract-status.inactive {
    background: #fdeaea;
    color: #a63d3d;
}

.client-actions .btn-soft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #d7dee6;
    background: #f8fafc;
    color: #17324d;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}


/* الإحصائيات */

.client-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.client-stat {
    min-height: 100px;
    padding: 16px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e7ebf0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
}

.client-stat span {
    font-size: 13px;
    color: #7a8793;
}

.client-stat strong {
    font-size: 22px;
    color: #17324d;
}


/* الخدمات */

.client-services {
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid #edf0f3;
}

.client-section-title {
    margin-bottom: 16px;
}

.client-section-title h4 {
    margin: 0 0 5px;
    font-size: 18px;
    color: #1f2d3d;
}

.client-section-title p {
    margin: 0;
    font-size: 13px;
    color: #7a8793;
}

.client-services-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.client-service-item {
    padding: 14px 16px;
    border-radius: 13px;
    background: #f9fbfc;
    border: 1px solid #e6ebf0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.client-service-item span {
    font-size: 13px;
    color: #596775;
}

.client-service-item strong {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #17324d;
    color: #ffffff;
    font-size: 13px;
}


/* جدول تذاكر الجهة */

.client-tickets-section {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #edf0f3;
}

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e6ebf0;
    border-radius: 14px;
}

.admin-clients-page .admin-tickets-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    min-width: 900px;
}

.admin-clients-page .admin-tickets-table thead {
    background: #f7f9fb;
}

.admin-clients-page .admin-tickets-table th {
    padding: 14px 12px;
    text-align: right;
    font-size: 12px;
    color: #667482;
    border-bottom: 1px solid #e6ebf0;
    white-space: nowrap;
}

.admin-clients-page .admin-tickets-table td {
    padding: 14px 12px;
    font-size: 13px;
    color: #334252;
    border-bottom: 1px solid #edf0f3;
    vertical-align: middle;
}

.admin-clients-page .admin-tickets-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-clients-page .admin-tickets-table tbody tr:hover {
    background: #fafbfd;
}

.admin-clients-page .dashboard-item-link {
    color: #17324d;
    font-weight: 700;
    text-decoration: none;
}


/* حالة عدم وجود بيانات */

.admin-clients-page .empty-state {
    padding: 40px 20px;
    text-align: center;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px dashed #dce3ea;
}

.admin-clients-page .empty-state h3 {
    margin: 0 0 6px;
    color: #263746;
}

.admin-clients-page .empty-state p {
    margin: 0;
    color: #7a8793;
    font-size: 13px;
}


/* Responsive */

@media (max-width: 1200px) {
    .client-stats,
    .client-services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .clients-page-header,
    .client-card-head {
        flex-direction: column;
        align-items: stretch;
    }

    .client-actions {
        justify-content: flex-start;
    }

    .client-stats,
    .client-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .admin-clients-page {
        padding: 16px;
    }

    .client-stats,
    .client-services-grid {
        grid-template-columns: 1fr;
    }

    .client-title {
        align-items: flex-start;
    }
}
/* =========================================================
   ملف الجهة - الإدارة
   ========================================================= */

.client-detail-topbar {
    margin-bottom: 20px;
}

.client-detail-topbar h2 {
    margin: 9px 0 5px;
    font-size: 26px;
    color: #172033;
}

.client-detail-topbar p {
    margin: 0;
    color: #6c7890;
    font-size: 14px;
}

.client-back-link {
    color: #0f4c81;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}


.client-detail-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 24px;
    margin-bottom: 20px;
    background: #ffffff;
    border: 1px solid #e5ebf3;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(25, 55, 95, 0.07);
}

.client-detail-identity {
    display: flex;
    align-items: center;
    gap: 16px;
}

.client-detail-logo {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f4c81;
    color: #ffffff;
    font-size: 26px;
    font-weight: 800;
}

.client-detail-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.client-detail-name-row h1 {
    margin: 0;
    font-size: 25px;
    color: #172033;
}

.client-detail-identity p {
    margin: 6px 0 0;
    font-size: 13px;
    color: #6c7890;
}


.client-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.client-action-btn {
    min-height: 39px;
    padding: 0 14px;
    border: 1px solid #dce4ed;
    border-radius: 11px;
    background: #f8fbfd;
    color: #0f4c81;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.client-action-btn.primary {
    background: #0f4c81;
    border-color: #0f4c81;
    color: #ffffff;
}


.client-detail-section {
    padding: 22px;
    margin-bottom: 20px;
    background: #ffffff;
    border: 1px solid #e5ebf3;
    border-radius: 18px;
    box-shadow: 0 9px 25px rgba(25, 55, 95, 0.05);
}

.client-detail-section-head {
    margin-bottom: 18px;
}

.client-detail-section-head h3 {
    margin: 0 0 5px;
    font-size: 18px;
    color: #172033;
}

.client-detail-section-head p {
    margin: 0;
    color: #6c7890;
    font-size: 13px;
}


.client-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.client-info-item {
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e7ecf2;
    border-radius: 13px;
}

.client-info-item span {
    display: block;
    margin-bottom: 7px;
    color: #6c7890;
    font-size: 12px;
}

.client-info-item strong {
    color: #263746;
    font-size: 13px;
}


.client-alerts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.client-alert {
    padding: 14px 16px;
    border-radius: 13px;
}

.client-alert strong {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
}

.client-alert span {
    font-size: 12px;
}

.client-alert-danger {
    background: #fdecef;
    color: #a52d44;
}

.client-alert-warning {
    background: #fff4da;
    color: #8c6208;
}

.client-alert-info {
    background: #eaf4fc;
    color: #0f5e97;
}


.client-detail-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.client-detail-metric {
    min-height: 98px;
    padding: 15px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e7ecf2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.client-detail-metric span {
    color: #6c7890;
    font-size: 12px;
}

.client-detail-metric strong {
    margin-top: 8px;
    color: #0f4c81;
    font-size: 21px;
}


.client-detail-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.client-finance-list {
    display: grid;
    gap: 11px;
}

.client-finance-list > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #edf1f5;
}

.client-finance-list > div:last-child {
    border-bottom: none;
}

.client-finance-list span {
    color: #6c7890;
    font-size: 13px;
}

.client-finance-list strong {
    text-align: left;
    color: #263746;
    font-size: 13px;
}

.text-danger {
    color: #b92743 !important;
}

.text-success {
    color: #087456 !important;
}


.client-last-activity {
    padding: 18px;
    border-radius: 13px;
    background: #f8fafc;
    color: #263746;
}

.client-last-ticket {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border-radius: 13px;
    background: #f8fafc;
    color: #0f4c81;
    text-decoration: none;
}

.client-last-ticket span {
    color: #6c7890;
    font-size: 12px;
}


@media (max-width: 1100px) {

    .client-detail-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .client-detail-actions {
        justify-content: flex-start;
    }

    .client-info-grid,
    .client-detail-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 760px) {

    .client-detail-two-col,
    .client-alerts-grid {
        grid-template-columns: 1fr;
    }

    .client-info-grid,
    .client-detail-metrics {
        grid-template-columns: 1fr;
    }

    .client-detail-identity {
        align-items: flex-start;
    }

}
/* =========================================================
   إسناد موظف دعم
   ========================================================= */

.assign-support-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5ebf3;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(25, 55, 95, 0.07);
}

.assign-support-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid #edf1f5;
}

.assign-support-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f4c81;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
}

.assign-support-header h3 {
    margin: 0 0 5px;
    font-size: 20px;
    color: #172033;
}

.assign-support-header p {
    margin: 0;
    color: #6c7890;
    font-size: 13px;
}

.assign-support-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.assign-support-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.assign-support-field label {
    color: #263746;
    font-size: 13px;
    font-weight: 700;
}

.assign-support-field select {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid #dce4ed;
    border-radius: 12px;
    background: #f8fafc;
    color: #263746;
    font-size: 13px;
    outline: none;
}

.assign-support-field select:focus {
    border-color: #0f4c81;
}

.assign-support-field small {
    color: #7a8793;
    font-size: 12px;
}

.assign-support-users {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.assign-support-users h4 {
    margin: 0 0 4px;
    color: #172033;
    font-size: 15px;
}

.assign-support-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid #e7ecf2;
    border-radius: 12px;
    background: #f8fafc;
}

.assign-support-user-row strong {
    display: block;
    color: #263746;
    font-size: 13px;
}

.assign-support-user-row span {
    color: #7a8793;
    font-size: 12px;
}

.assigned-user-badge {
    padding: 6px 10px;
    border-radius: 999px;
    background: #e7f5ee;
    color: #087456 !important;
    font-size: 11px !important;
    font-weight: 700;
}

.assign-support-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 4px;
}

@media (max-width: 700px) {

    .assign-support-card {
        padding: 18px;
    }

    .assign-support-user-row {
        align-items: flex-start;
        flex-direction: column;
    }

}
/* =========================================================
   تعديل بيانات الجهة
   ========================================================= */

.edit-organization-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5ebf3;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(25, 55, 95, 0.07);
}

.edit-organization-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid #edf1f5;
}

.edit-organization-header h3 {
    margin: 0 0 5px;
    font-size: 20px;
    color: #172033;
}

.edit-organization-header p {
    margin: 0;
    color: #6c7890;
    font-size: 13px;
}

.edit-organization-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.edit-organization-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.edit-organization-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.edit-organization-field.full-width {
    width: 100%;
}

.edit-organization-field label {
    color: #263746;
    font-size: 13px;
    font-weight: 700;
}

.edit-organization-field input,
.edit-organization-field select,
.edit-organization-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #dce4ed;
    border-radius: 12px;
    background: #f8fafc;
    color: #263746;
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.edit-organization-field input,
.edit-organization-field select {
    min-height: 46px;
}

.edit-organization-field textarea {
    resize: vertical;
    min-height: 130px;
}

.edit-organization-field input:focus,
.edit-organization-field select:focus,
.edit-organization-field textarea:focus {
    border-color: #0f4c81;
    background: #ffffff;
}

.edit-organization-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 760px) {

    .edit-organization-grid {
        grid-template-columns: 1fr;
    }

    .edit-organization-card {
        padding: 18px;
    }

}
/* =========================================================
   إدارة عقد الجهة
   ========================================================= */

.contract-management-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5ebf3;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(25, 55, 95, 0.07);
}

.contract-management-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid #edf1f5;
}

.contract-management-header h3 {
    margin: 0 0 5px;
    color: #172033;
    font-size: 20px;
}

.contract-management-header p {
    margin: 0;
    color: #6c7890;
    font-size: 13px;
}

.contract-management-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.contract-summary-box {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e7ecf2;
    border-radius: 14px;
}

.contract-summary-box div {
    padding: 10px;
}

.contract-summary-box span {
    display: block;
    margin-bottom: 7px;
    color: #6c7890;
    font-size: 12px;
}

.contract-summary-box strong {
    color: #263746;
    font-size: 13px;
}

@media (max-width: 800px) {

    .contract-form-grid,
    .contract-summary-box {
        grid-template-columns: 1fr;
    }

}
/* =========================
   صفحة إدارة السداد
   ========================= */

.payment-management-list {
    width: 100%;
    max-width: 1100px;
    margin: 24px auto;
}

.payment-management-list .client-detail-section {
    width: 100%;
    box-sizing: border-box;
}

.client-payment-receipt-box {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.client-payment-receipt-box span {
    font-weight: 600;
}

.payment-management-list .client-detail-actions {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.payment-page .dashboard-layout {
    display: block;
    width: 100%;
}

.payment-page .dashboard-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px;
    box-sizing: border-box;
}

.payment-page .client-detail-hero,
.payment-page .payment-management-list {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.payment-page .client-detail-section {
    width: 100%;
    box-sizing: border-box;
}

.payment-page .client-detail-two-col {
    width: 100%;
}
/* ===== إصلاح بطاقة السداد في واجهة العميل ===== */

.client-payment-submitted {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    width: 100%;
    box-sizing: border-box;
}

.client-payment-submitted-content {
    flex: 1;
    min-width: 0;
}

.client-payment-submitted-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.client-payment-submitted-header h4 {
    margin: 0 0 6px;
    white-space: nowrap;
}

.client-payment-submitted-header p {
    margin: 0;
    line-height: 1.7;
}

.client-payment-file-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.client-payment-review-badge {
    flex-shrink: 0;
    width: auto;
    white-space: nowrap;
}

.client-payment-view-link {
    flex-shrink: 0;
    width: auto;
    white-space: nowrap;
}

/* الشاشات الصغيرة فقط */
@media (max-width: 700px) {
    .client-payment-submitted {
        align-items: flex-start;
    }

    .client-payment-submitted-header,
    .client-payment-file-box {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* بطاقة السداد تأخذ عرض الصف كامل */
.client-payment-card {
    grid-column: auto;
    width: 100%;
    box-sizing: border-box;
    align-self: start;
}

.client-payment-submitted-content {
    width: 100%;
}

.client-payment-submitted-header {
    width: 100%;
}

.client-payment-file-box {
    width: 100%;
}
/* ===== ترتيب بطاقة السداد ===== */

.client-payment-submitted {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

.client-payment-success-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    flex-shrink: 0;
}

.client-payment-submitted-content {
    width: 100%;
    min-width: 0;
}

.client-payment-submitted-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin-bottom: 18px;
}

.client-payment-submitted-header > div {
    flex: 1;
    min-width: 0;
}

.client-payment-submitted-header h4 {
    margin: 0 0 5px;
    font-size: 18px;
    line-height: 1.4;
    white-space: normal;
}

.client-payment-submitted-header p {
    margin: 0;
    line-height: 1.6;
    font-size: 13px;
}

.client-payment-review-badge {
    flex-shrink: 0;
    width: auto;
    white-space: nowrap;
}

.client-payment-file-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    width: 100%;
    box-sizing: border-box;
}

.client-payment-file-box > div {
    min-width: 0;
}

.client-payment-view-link {
    width: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

.client-payment-date {
    grid-column: 1 / -1;
    margin-top: 8px;
}

/* الجوال */
@media (max-width: 700px) {
    .client-payment-submitted {
        grid-template-columns: 1fr;
    }

    .client-payment-submitted-header {
        flex-direction: column;
    }

    .client-payment-file-box {
        grid-template-columns: 1fr;
    }
}
/* ===== تحسين بطاقة السداد بعد ترتيب الأعمدة ===== */

.client-main-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.client-payment-card {
    width: 100%;
    box-sizing: border-box;
}

.client-payment-submitted {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

.client-payment-submitted-content {
    width: 100%;
    min-width: 0;
}

.client-payment-submitted-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    margin-bottom: 18px;
}

.client-payment-submitted-header > div {
    min-width: 0;
    flex: 1;
}

.client-payment-submitted-header h4 {
    margin: 0 0 5px;
    line-height: 1.4;
}

.client-payment-submitted-header p {
    margin: 0;
    line-height: 1.6;
}

.client-payment-review-badge {
    flex-shrink: 0;
    white-space: nowrap;
}

.client-payment-file-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.client-payment-file-box > div {
    min-width: 0;
}

.client-payment-file-label {
    display: block;
    margin-bottom: 4px;
}

.client-payment-file-box strong {
    display: block;
    white-space: normal;
}

.client-payment-view-link {
    width: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

.client-payment-date {
    grid-column: 1 / -1;
    margin-top: 6px;
}
/* ===== ترتيب ملف السداد داخل البطاقة ===== */

.client-payment-file-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "file button"
        "date date";
    align-items: center;
    gap: 12px 18px;
    width: 100%;
}

.client-payment-file-box > div {
    grid-area: file;
    min-width: 0;
}

.client-payment-file-label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    color: #6c7890;
}

.client-payment-file-box strong {
    display: block;
    margin: 0;
    line-height: 1.5;
    white-space: nowrap;
}

.client-payment-view-link {
    grid-area: button;
    justify-self: end;
    align-self: center;
    width: fit-content;
    white-space: nowrap;
}

.client-payment-date {
    grid-area: date;
    display: block;
    width: 100%;
    margin-top: 8px;
    font-size: 12px;
}
/* ===== إصلاح نهائي لبطاقة السداد ===== */

.client-payment-submitted {
    display: block;
    width: 100%;
}

.client-payment-success-icon {
    float: right;
    margin-left: 14px;
    margin-bottom: 8px;
}

.client-payment-submitted-content {
    display: block;
    width: 100%;
}

.client-payment-submitted-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin-bottom: 20px;
}

.client-payment-submitted-header > div {
    flex: 1;
    min-width: 0;
}

.client-payment-submitted-header h4 {
    margin: 0 0 6px;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    line-height: 1.5;
}

.client-payment-submitted-header p {
    margin: 0;
    white-space: normal;
    word-break: normal;
    line-height: 1.6;
}

.client-payment-review-badge {
    flex: 0 0 auto;
    white-space: nowrap;
}

.client-payment-file-box {
    clear: both;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding-top: 14px;
}

.client-payment-file-box > div {
    flex: 1;
    min-width: 0;
}

.client-payment-file-label,
.client-payment-file-box strong {
    display: block;
    white-space: normal;
    word-break: normal;
}

.client-payment-view-link {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
}

.client-payment-date {
    display: block;
    width: 100%;
    clear: both;
    margin-top: 18px;
}
.client-top-grid,
.client-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
    width: 100%;
}

.client-top-grid {
    margin-bottom: 20px;
}

.client-bottom-grid {
    margin-top: 0;
}

@media (max-width: 1000px) {
    .client-top-grid,
    .client-bottom-grid {
        grid-template-columns: 1fr;
    }
}
.client-top-grid,
.client-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    width: 100%;
}

.client-top-grid > .client-portal-card,
.client-bottom-grid > .client-portal-card {
    height: 100%;
}
.client-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    width: 100%;
}

.client-bottom-grid > .client-payment-card,
.client-bottom-grid > .client-rating-card {
    width: 100%;
    height: 100%;
    margin: 0 !important;
    grid-column: auto !important;
}
/* ترتيب الصف السفلي: السداد يمين - التقييم يسار */
.client-bottom-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important;
    width: 100% !important;
}

.client-bottom-grid > .client-payment-card {
    grid-column: 1 !important;
    margin: 0 !important;
    height: 100%;
}

.client-bottom-grid > .client-rating-card {
    grid-column: 2 !important;
    margin: 0 !important;
    height: 100%;
}
.client-bottom-grid {
    display: block !important;
    width: 100% !important;
}

.client-bottom-grid > .client-payment-card,
.client-bottom-grid > .client-rating-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 20px 0 !important;
    box-sizing: border-box !important;
}
@media (max-width: 1000px) {
    .client-top-grid,
    .client-bottom-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================
   Add Organization Page
========================= */

.add-organization-card {
    max-width: 1050px;
    margin: 30px auto;
    padding: 30px;
}

.add-organization-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5ebf3;
}

.add-organization-header h2 {
    margin: 0 0 6px;
    color: #172033;
    font-size: 24px;
}

.add-organization-header p {
    margin: 0;
    color: #6c7890;
    font-size: 14px;
}

.organization-form {
    width: 100%;
}

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

.organization-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.organization-field-full {
    grid-column: 1 / -1;
}

.organization-field label {
    font-size: 14px;
    font-weight: 700;
    color: #172033;
}

.organization-field input,
.organization-field select,
.organization-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d9e1ea;
    border-radius: 12px;
    background: #ffffff;
    padding: 13px 14px;
    font-size: 14px;
    color: #172033;
    outline: none;
    font-family: inherit;
}

.organization-field input:focus,
.organization-field select:focus,
.organization-field textarea:focus {
    border-color: #173b57;
    box-shadow: 0 0 0 3px rgba(23, 59, 87, 0.08);
}

.organization-field textarea {
    resize: vertical;
    min-height: 120px;
}

.organization-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 25px;
}

.organization-form-actions .client-action-btn,
.organization-form-actions .client-primary-button {
    min-width: 130px;
    text-align: center;
}

.form-message {
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: #edf7f2;
    color: #1f6b4c;
    font-size: 14px;
}

/* للجوال */
@media (max-width: 800px) {
    .add-organization-card {
        padding: 20px;
    }

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

    .organization-field-full {
        grid-column: auto;
    }

    .add-organization-header {
        flex-direction: column;
        align-items: stretch;
    }
}
/* =========================
   Add Organization Page Fix
========================= */

.add-organization-page .dashboard-layout {
    display: block;
    width: 100%;
    min-height: 100vh;
}

.add-organization-page .dashboard-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
    box-sizing: border-box;
}

.add-organization-page .add-organization-card {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}
/* أزرار صفحة إضافة جهة */

.add-organization-page .organization-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.add-organization-page .client-primary-button {
    background: #173b57;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 13px 28px;
    min-width: 150px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

.add-organization-page .client-primary-button:hover {
    background: #0f2f47;
    transform: translateY(-1px);
}

.add-organization-page .client-action-btn {
    background: #ffffff;
    color: #173b57;
    border: 1px solid #d9e2e8;
    border-radius: 12px;
    padding: 12px 26px;
    min-width: 110px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.2s ease;
}

.add-organization-page .client-action-btn:hover {
    background: #f4f7f9;
}

/* =========================
Admin Payments Page
========================= */

.admin-payments-page .dashboard-content {
width: 100%;
max-width: 1250px;
margin: 0 auto;
padding: 32px;
box-sizing: border-box;
}

.admin-payments-page .dashboard-topbar {
margin-bottom: 24px;
}

.admin-payments-page .dashboard-topbar h2 {
margin: 0 0 6px;
font-size: 28px;
color: #172033;
}

.admin-payments-page .dashboard-topbar p {
margin: 0;
color: #6b7280;
font-size: 14px;
}

/* البطاقات الأربع */
.admin-payment-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin-bottom: 28px;
}

.admin-payment-stat-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.admin-payment-stat-card span {
display: block;
font-size: 14px;
color: #6b7280;
margin-bottom: 10px;
}

.admin-payment-stat-card strong {
display: block;
font-size: 25px;
color: #172033;
margin-bottom: 8px;
}

.admin-payment-stat-card small {
font-size: 13px;
}

/* ألوان الملاحظات */
.payment-note-green {
color: #15803d;
}

.payment-note-blue {
color: #2563eb;
}

.payment-note-orange {
color: #d97706;
}

.payment-note-red {
color: #dc2626;
}

/* قسم الدفعات والفترات */
.admin-payments-section {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: 24px;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.admin-payments-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
}

.admin-payments-section-header h2 {
margin: 0 0 6px;
font-size: 22px;
color: #172033;
}

.admin-payments-section-header p {
margin: 0;
color: #6b7280;
font-size: 14px;
}

/* زر إضافة فترة */
.add-payment-period-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 18px;
border-radius: 12px;
background: #173b57;
color: #ffffff;
font-weight: 700;
text-decoration: none;
border: none;
cursor: pointer;
}

.add-payment-period-btn:hover {
opacity: 0.92;
}

/* الفلاتر */
.admin-payment-filters {
display: grid;
grid-template-columns: 1fr 1fr 2fr auto;
gap: 12px;
margin-bottom: 22px;
}

.admin-payment-filters select,
.admin-payment-filters input {
width: 100%;
border: 1px solid #dbe2ea;
border-radius: 10px;
padding: 11px 12px;
background: #ffffff;
box-sizing: border-box;
font-size: 14px;
}

.admin-payment-filter-btn {
padding: 11px 18px;
border: 0;
border-radius: 10px;
background: #173b57;
color: white;
cursor: pointer;
font-weight: 700;
}

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

.admin-payments-table {
width: 100%;
border-collapse: collapse;
text-align: right;
}

.admin-payments-table th {
padding: 14px 12px;
background: #f8fafc;
color: #475569;
font-size: 13px;
border-bottom: 1px solid #e5e7eb;
white-space: nowrap;
}

.admin-payments-table td {
padding: 15px 12px;
border-bottom: 1px solid #eef2f7;
font-size: 14px;
color: #334155;
}

.admin-payments-table tbody tr:hover {
background: #fafcff;
}

.admin-payments-empty {
text-align: center;
padding: 35px 20px;
color: #64748b;
}

.admin-payments-empty strong {
display: block;
color: #334155;
margin-bottom: 6px;
}

/* للجوال */
@media (max-width: 1000px) {
.admin-payment-stats {
grid-template-columns: repeat(2, 1fr);
}

.admin-payment-filters {
grid-template-columns: 1fr 1fr;
}
}

@media (max-width: 700px) {
.admin-payment-stats {
grid-template-columns: 1fr;
}

.admin-payment-filters {
grid-template-columns: 1fr;
}

.admin-payments-section-header {
flex-direction: column;
align-items: stretch;
}

.admin-payments-page .dashboard-content {
padding: 18px;
}
}

/* =========================================================
ADMIN PAYMENTS PAGE - FINAL OVERRIDES
صفحة الدفعات والاشتراك - التنسيق النهائي
========================================================= */

/* محتوى الصفحة */
.admin-payments-page .dashboard-content {
width: 100%;
max-width: 1250px;
margin: 0 auto;
padding: 32px;
box-sizing: border-box;
}

/* عنوان الصفحة */
.admin-payments-page .dashboard-topbar {
margin-bottom: 24px;
}

.admin-payments-page .dashboard-topbar h2 {
margin: 0 0 6px;
font-size: 28px;
font-weight: 800;
color: #172033;
}

.admin-payments-page .dashboard-topbar p {
margin: 0;
font-size: 14px;
color: #6b7280;
line-height: 1.7;
}


/* =========================================================
البطاقات الأربع
========================================================= */

.admin-payments-page .payments-summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin-bottom: 28px;
}

.admin-payments-page .payment-summary-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 20px;
box-sizing: border-box;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
min-height: 145px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-payments-page .payment-summary-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.admin-payments-page .payment-summary-card span {
display: block;
font-size: 14px;
font-weight: 600;
color: #6b7280;
margin-bottom: 12px;
}

.admin-payments-page .payment-summary-card strong {
display: block;
font-size: 26px;
font-weight: 800;
color: #172033;
margin-bottom: 10px;
line-height: 1.3;
}

.admin-payments-page .payment-summary-card small {
display: block;
font-size: 13px;
line-height: 1.6;
}


/* ألوان الملاحظات */
.admin-payments-page .payment-note-success,
.admin-payments-page .payment-note-green {
color: #15803d;
}

.admin-payments-page .payment-note-info,
.admin-payments-page .payment-note-blue {
color: #2563eb;
}

.admin-payments-page .payment-note-warning,
.admin-payments-page .payment-note-orange {
color: #d97706;
}

.admin-payments-page .payment-note-danger,
.admin-payments-page .payment-note-red {
color: #dc2626;
}


/* =========================================================
قسم الدفعات والفترات
========================================================= */

.admin-payments-page .admin-payments-section,
.admin-payments-page .payments-section {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: 24px;
box-sizing: border-box;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
margin-bottom: 28px;
}

/* رأس القسم */
.admin-payments-page .admin-payments-section-header,
.admin-payments-page .payments-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 20px;
}

.admin-payments-page .admin-payments-section-header h2,
.admin-payments-page .payments-section-header h2 {
margin: 0 0 6px;
font-size: 22px;
font-weight: 800;
color: #172033;
}

.admin-payments-page .admin-payments-section-header p,
.admin-payments-page .payments-section-header p {
margin: 0;
color: #6b7280;
font-size: 14px;
line-height: 1.7;
}


/* =========================================================
زر إضافة فترة سداد
========================================================= */

.admin-payments-page .add-payment-period-btn,
.admin-payments-page .payment-add-btn,
.admin-payments-page .client-primary-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 42px;
padding: 10px 18px;
border: none;
border-radius: 11px;
background: #173b57;
color: #ffffff;
font-size: 14px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: 0.2s ease;
white-space: nowrap;
}

.admin-payments-page .add-payment-period-btn:hover,
.admin-payments-page .payment-add-btn:hover,
.admin-payments-page .client-primary-button:hover {
background: #0f2f47;
transform: translateY(-1px);
}


/* =========================================================
الفلاتر
========================================================= */

.admin-payments-page .admin-payment-filters,
.admin-payments-page .payment-filters {
display: grid;
grid-template-columns: 1fr 1fr 2fr auto;
gap: 12px;
align-items: end;
margin-bottom: 22px;
}

.admin-payments-page .admin-payment-filters select,
.admin-payments-page .admin-payment-filters input,
.admin-payments-page .payment-filters select,
.admin-payments-page .payment-filters input {
width: 100%;
min-height: 42px;
box-sizing: border-box;
padding: 10px 12px;
border: 1px solid #dbe2ea;
border-radius: 10px;
background: #ffffff;
color: #172033;
font-size: 14px;
outline: none;
font-family: inherit;
}

.admin-payments-page .admin-payment-filters select:focus,
.admin-payments-page .admin-payment-filters input:focus,
.admin-payments-page .payment-filters select:focus,
.admin-payments-page .payment-filters input:focus {
border-color: #173b57;
box-shadow: 0 0 0 3px rgba(23, 59, 87, 0.08);
}

.admin-payments-page .admin-payment-filter-btn,
.admin-payments-page .payment-filter-btn {
min-height: 42px;
padding: 10px 18px;
border: none;
border-radius: 10px;
background: #173b57;
color: #ffffff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}


/* =========================================================
جدول الدفعات
========================================================= */

.admin-payments-page .admin-payments-table-wrap,
.admin-payments-page .payments-table-wrap {
width: 100%;
overflow-x: auto;
border: 1px solid #eef2f7;
border-radius: 14px;
}

.admin-payments-page .admin-payments-table,
.admin-payments-page .payments-table {
width: 100%;
min-width: 950px;
border-collapse: collapse;
text-align: right;
background: #ffffff;
}

.admin-payments-page .admin-payments-table thead,
.admin-payments-page .payments-table thead {
background: #f8fafc;
}

.admin-payments-page .admin-payments-table th,
.admin-payments-page .payments-table th {
padding: 14px 12px;
font-size: 13px;
font-weight: 700;
color: #475569;
border-bottom: 1px solid #e5e7eb;
white-space: nowrap;
}

.admin-payments-page .admin-payments-table td,
.admin-payments-page .payments-table td {
padding: 15px 12px;
font-size: 14px;
color: #334155;
border-bottom: 1px solid #eef2f7;
vertical-align: middle;
}

.admin-payments-page .admin-payments-table tbody tr:last-child td,
.admin-payments-page .payments-table tbody tr:last-child td {
border-bottom: none;
}

.admin-payments-page .admin-payments-table tbody tr:hover,
.admin-payments-page .payments-table tbody tr:hover {
background: #fafcff;
}


/* =========================================================
حالة عدم وجود دفعات
========================================================= */

.admin-payments-page .admin-payments-empty,
.admin-payments-page .payments-empty {
text-align: center;
padding: 38px 20px;
color: #64748b;
background: #ffffff;
}

.admin-payments-page .admin-payments-empty strong,
.admin-payments-page .payments-empty strong {
display: block;
color: #334155;
font-size: 16px;
margin-bottom: 7px;
}

.admin-payments-page .admin-payments-empty p,
.admin-payments-page .payments-empty p {
margin: 0;
font-size: 14px;
}


/* =========================================================
حالات الدفع
========================================================= */

.admin-payments-page .payment-status {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}

.admin-payments-page .payment-status-paid {
color: #166534;
background: #dcfce7;
}

.admin-payments-page .payment-status-pending {
color: #92400e;
background: #fef3c7;
}

.admin-payments-page .payment-status-overdue {
color: #991b1b;
background: #fee2e2;
}

.admin-payments-page .payment-status-review {
color: #1e40af;
background: #dbeafe;
}


/* =========================================================
الروابط والأزرار الصغيرة داخل الجدول
========================================================= */

.admin-payments-page .payment-action-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 11px;
border-radius: 8px;
border: 1px solid #dbe2ea;
background: #ffffff;
color: #173b57;
text-decoration: none;
font-size: 13px;
font-weight: 700;
transition: 0.2s ease;
}

.admin-payments-page .payment-action-link:hover {
background: #f8fafc;
border-color: #b8c5d1;
}


/* =========================================================
Responsive
========================================================= */

@media (max-width: 1100px) {
.admin-payments-page .payments-summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-payments-page .admin-payment-filters,
.admin-payments-page .payment-filters {
grid-template-columns: 1fr 1fr;
}
}

@media (max-width: 760px) {
.admin-payments-page .dashboard-content {
padding: 18px 14px 28px;
}

.admin-payments-page .payments-summary-grid {
grid-template-columns: 1fr;
gap: 14px;
}

.admin-payments-page .admin-payment-filters,
.admin-payments-page .payment-filters {
grid-template-columns: 1fr;
}

.admin-payments-page .admin-payments-section-header,
.admin-payments-page .payments-section-header {
flex-direction: column;
align-items: stretch;
}

.admin-payments-page .dashboard-topbar h2 {
font-size: 24px;
}

.admin-payments-page .payment-summary-card strong {
font-size: 23px;
}
}

/* =========================================================
ADMIN PAYMENTS - TOOLBAR + FILTERS + TABLE
تكملة تنسيق صفحة الدفعات والاشتراك
========================================================= */


/* =========================
صندوق الدفعات والفترات
========================= */

.admin-payments-page .payments-toolbar {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: 24px;
margin-bottom: 22px;
box-sizing: border-box;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}


/* رأس القسم */
.admin-payments-page .payments-toolbar-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 22px;
}

.admin-payments-page .payments-toolbar-header h3 {
margin: 0 0 6px;
color: #172033;
font-size: 21px;
font-weight: 800;
}

.admin-payments-page .payments-toolbar-header p {
margin: 0;
color: #6b7280;
font-size: 14px;
line-height: 1.7;
}


/* =========================
زر إضافة فترة سداد
========================= */

.admin-payments-page .payments-add-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 10px 18px;
border: 0;
border-radius: 11px;
background: #173b57;
color: #ffffff;
text-decoration: none;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
transition: 0.2s ease;
}

.admin-payments-page .payments-add-button:hover {
background: #0f2f47;
transform: translateY(-1px);
}


/* =========================
الفلاتر
========================= */

.admin-payments-page .payments-filters {
display: grid;
grid-template-columns: 1fr 1fr 1.7fr auto;
gap: 14px;
align-items: end;
}


/* كل حقل */
.admin-payments-page .payments-filter-field {
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}

.admin-payments-page .payments-filter-field label {
font-size: 13px;
font-weight: 700;
color: #334155;
}


/* select + input */
.admin-payments-page .payments-filter-field select,
.admin-payments-page .payments-filter-field input {
width: 100%;
height: 43px;
box-sizing: border-box;
border: 1px solid #dbe2ea;
border-radius: 10px;
padding: 0 12px;
background: #ffffff;
color: #172033;
font-size: 14px;
font-family: inherit;
outline: none;
transition: 0.2s ease;
}

.admin-payments-page .payments-filter-field select:focus,
.admin-payments-page .payments-filter-field input:focus {
border-color: #173b57;
box-shadow: 0 0 0 3px rgba(23, 59, 87, 0.08);
}


/* حقل البحث */
.admin-payments-page .payments-search-field {
min-width: 0;
}


/* زر تطبيق */
.admin-payments-page .payments-filter-button {
height: 43px;
min-width: 95px;
padding: 0 18px;
border: 0;
border-radius: 10px;
background: #173b57;
color: #ffffff;
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: 0.2s ease;
}

.admin-payments-page .payments-filter-button:hover {
background: #0f2f47;
}


/* =========================================================
قسم الجدول
========================================================= */

.admin-payments-page .payments-table-section {
width: 100%;
box-sizing: border-box;
margin-bottom: 30px;
}


/* حاوية الجدول */
.admin-payments-page .payments-table-wrap {
width: 100%;
overflow-x: auto;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}


/* الجدول */
.admin-payments-page .payments-table {
width: 100%;
min-width: 1050px;
border-collapse: collapse;
border-spacing: 0;
text-align: right;
background: #ffffff;
}


/* رأس الجدول */
.admin-payments-page .payments-table thead {
background: #f8fafc;
}

.admin-payments-page .payments-table th {
padding: 15px 13px;
color: #475569;
font-size: 13px;
font-weight: 800;
border-bottom: 1px solid #e5e7eb;
white-space: nowrap;
}


/* خلايا الجدول */
.admin-payments-page .payments-table td {
padding: 15px 13px;
color: #334155;
font-size: 14px;
border-bottom: 1px solid #eef2f7;
vertical-align: middle;
white-space: nowrap;
}

.admin-payments-page .payments-table tbody tr:last-child td {
border-bottom: none;
}

.admin-payments-page .payments-table tbody tr:hover {
background: #fafcff;
}


/* =========================
رابط عرض السند
========================= */

.admin-payments-page .payment-receipt-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 11px;
border: 1px solid #dbe2ea;
border-radius: 8px;
background: #ffffff;
color: #173b57;
text-decoration: none;
font-size: 13px;
font-weight: 700;
transition: 0.2s ease;
}

.admin-payments-page .payment-receipt-link:hover {
background: #f8fafc;
border-color: #b8c5d1;
}


/* لا يوجد سند */
.admin-payments-page .payment-empty-value {
color: #94a3b8;
font-size: 13px;
}


/* =========================
حالات الدفع
========================= */

.admin-payments-page .payment-status {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 78px;
padding: 6px 11px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}


/* بانتظار السداد */
.admin-payments-page .payment-status-pending {
color: #92400e;
background: #fef3c7;
}


/* قيد المراجعة */
.admin-payments-page .payment-status-review {
color: #1d4ed8;
background: #dbeafe;
}


/* مسدد */
.admin-payments-page .payment-status-paid {
color: #166534;
background: #dcfce7;
}


/* متأخر */
.admin-payments-page .payment-status-overdue {
color: #991b1b;
background: #fee2e2;
}


/* =========================
زر عرض التفاصيل
========================= */

.admin-payments-page .payment-details-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 7px 12px;
border: 1px solid #dbe2ea;
border-radius: 8px;
background: #ffffff;
color: #173b57;
text-decoration: none;
font-size: 13px;
font-weight: 700;
transition: 0.2s ease;
}

.admin-payments-page .payment-details-button:hover {
background: #173b57;
border-color: #173b57;
color: #ffffff;
}


/* =========================================================
حالة عدم وجود فترات سداد
========================================================= */

.admin-payments-page .payments-empty-state {
width: 100%;
box-sizing: border-box;
text-align: center;
padding: 45px 20px;
color: #64748b;
}

.admin-payments-page .payments-empty-state strong {
display: block;
margin-bottom: 8px;
color: #334155;
font-size: 16px;
font-weight: 800;
}

.admin-payments-page .payments-empty-state p {
margin: 0;
color: #94a3b8;
font-size: 14px;
}


/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

.admin-payments-page .payments-filters {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-payments-page .payments-filter-button {
width: 100%;
}
}


@media (max-width: 700px) {

.admin-payments-page .payments-toolbar {
padding: 18px;
}

.admin-payments-page .payments-toolbar-header {
flex-direction: column;
align-items: stretch;
}

.admin-payments-page .payments-add-button {
width: 100%;
box-sizing: border-box;
}

.admin-payments-page .payments-filters {
grid-template-columns: 1fr;
}

.admin-payments-page .payments-table-wrap {
border-radius: 14px;
}
}
/* =========================
Payments Summary - 5 Cards
========================= */

.admin-payments-page .payments-summary-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
margin-bottom: 28px;
}

.admin-payments-page .payment-summary-card {
background: #ffffff;
border: 1px solid #e7ebef;
border-radius: 18px;
padding: 22px 18px;
min-height: 145px;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.admin-payments-page .payment-summary-card span {
display: block;
font-size: 14px;
font-weight: 700;
color: #4b5563;
margin-bottom: 14px;
}

.admin-payments-page .payment-summary-card strong {
display: block;
font-size: 25px;
font-weight: 800;
color: #172033;
margin-bottom: 10px;
}

.admin-payments-page .payment-summary-card small {
display: block;
font-size: 12px;
line-height: 1.7;
}

.admin-payments-page .payment-note-success {
color: #15803d;
}

.admin-payments-page .payment-note-blue {
color: #2563eb;
}

.admin-payments-page .payment-note-warning {
color: #d97706;
}

.admin-payments-page .payment-note-danger {
color: #dc2626;
}

@media (max-width: 1200px) {
.admin-payments-page .payments-summary-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

@media (max-width: 800px) {
.admin-payments-page .payments-summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 520px) {
.admin-payments-page .payments-summary-grid {
grid-template-columns: 1fr;
}
}
/* =========================
Add Payment Period Page
========================= */

.add-payment-period-page .dashboard-content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 32px;
box-sizing: border-box;
}

.add-payment-period-page .dashboard-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 28px;
}

.add-payment-period-page .dashboard-topbar h2 {
margin: 0 0 8px;
font-size: 28px;
font-weight: 800;
color: #172033;
}

.add-payment-period-page .dashboard-topbar p {
margin: 0;
color: #6b7280;
font-size: 14px;
}

.add-payment-period-page .payment-back-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 18px;
border: 1px solid #d9e0e7;
border-radius: 12px;
background: #ffffff;
color: #173247;
text-decoration: none;
font-weight: 700;
font-size: 14px;
}

.add-payment-period-page .payment-back-button:hover {
background: #f7f9fb;
}

.add-payment-card {
background: #ffffff;
border: 1px solid #e7ebef;
border-radius: 20px;
padding: 28px;
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}

.add-payment-form {
width: 100%;
}

.add-payment-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}

.add-payment-field {
display: flex;
flex-direction: column;
gap: 8px;
}

.add-payment-field label {
font-size: 14px;
font-weight: 700;
color: #253247;
}

.add-payment-field input,
.add-payment-field select,
.add-payment-field textarea {
width: 100%;
min-height: 46px;
border: 1px solid #d9e0e7;
border-radius: 12px;
padding: 10px 14px;
font-family: inherit;
font-size: 14px;
color: #172033;
background: #ffffff;
box-sizing: border-box;
outline: none;
transition: 0.2s ease;
}

.add-payment-field textarea {
min-height: 120px;
resize: vertical;
}

.add-payment-field input:focus,
.add-payment-field select:focus,
.add-payment-field textarea:focus {
border-color: #1f5f85;
box-shadow: 0 0 0 3px rgba(31, 95, 133, 0.10);
}

.add-payment-notes {
grid-column: 1 / -1;
}

.add-payment-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 26px;
}

.payment-save-button {
min-height: 44px;
padding: 0 22px;
border: none;
border-radius: 12px;
background: #173247;
color: #ffffff;
font-family: inherit;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}

.payment-save-button:hover {
background: #21435d;
}

.payment-cancel-button {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 20px;
border: 1px solid #d9e0e7;
border-radius: 12px;
background: #ffffff;
color: #4b5563;
text-decoration: none;
font-size: 14px;
font-weight: 700;
}

.payment-cancel-button:hover {
background: #f7f9fb;
}

@media (max-width: 800px) {
.add-payment-period-page .dashboard-content {
padding: 20px;
}

.add-payment-period-page .dashboard-topbar {
flex-direction: column;
align-items: stretch;
}

.add-payment-grid {
grid-template-columns: 1fr;
}

.add-payment-notes {
grid-column: auto;
}

.add-payment-actions {
flex-direction: column;
align-items: stretch;
}

.payment-save-button,
.payment-cancel-button {
width: 100%;
}
}
.add-payment-notes {
grid-column: 1 / -1;
}

.add-payment-period-page .add-payment-card {
margin-top: 10px;
}

.add-payment-period-page .dashboard-topbar {
margin-bottom: 18px;
}
/* ==============================
Payment Period Details
============================== */

.payment-detail-content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 32px;
box-sizing: border-box;
}

.payment-detail-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 25px;
}

.payment-detail-header h2 {
margin: 0 0 7px;
font-size: 28px;
color: #172033;
}

.payment-detail-header p {
margin: 0;
color: #6b7280;
}

.payment-detail-card {
background: #fff;
border: 1px solid #e5e9ee;
border-radius: 20px;
padding: 28px;
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}

.payment-detail-card-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding-bottom: 22px;
margin-bottom: 24px;
border-bottom: 1px solid #edf0f3;
}

.payment-detail-label {
display: block;
font-size: 13px;
color: #7b8491;
margin-bottom: 6px;
}

.payment-detail-card-header h3 {
margin: 0;
font-size: 21px;
color: #172033;
}

.payment-status {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 15px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
}

.payment-status.status-pending {
background: #fff4d6;
color: #9a6700;
}

.payment-status.status-review {
background: #e8f1ff;
color: #245ea8;
}

.payment-status.status-paid {
background: #e7f7ed;
color: #18733b;
}

.payment-status.status-overdue {
background: #fdeaea;
color: #b42318;
}

.payment-detail-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}

.payment-detail-item {
background: #f8fafb;
border: 1px solid #edf0f3;
border-radius: 14px;
padding: 18px;
}

.payment-detail-item span {
display: block;
color: #7b8491;
font-size: 13px;
margin-bottom: 8px;
}

.payment-detail-item strong {
color: #172033;
font-size: 15px;
}

.payment-detail-notes {
margin-top: 20px;
background: #f8fafb;
border: 1px solid #edf0f3;
border-radius: 14px;
padding: 18px;
}

.payment-detail-notes span {
display: block;
font-weight: 700;
color: #172033;
margin-bottom: 8px;
}

.payment-detail-notes p {
margin: 0;
color: #5f6875;
line-height: 1.8;
}

@media (max-width: 900px) {
.payment-detail-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 600px) {
.payment-detail-grid {
grid-template-columns: 1fr;
}

.payment-detail-header {
flex-direction: column;
align-items: stretch;
}
}
.payment-detail-attachment {
margin-top: 20px;
background: #f8fafb;
border: 1px solid #edf0f3;
border-radius: 14px;
padding: 18px;
}

.payment-detail-attachment span {
display: block;
font-weight: 700;
color: #172033;
margin-bottom: 10px;
}

.payment-detail-attachment p {
margin: 0;
color: #7b8491;
font-size: 14px;
}

.payment-attachment-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 16px;
border-radius: 10px;
background: #173247;
color: #ffffff;
text-decoration: none;
font-size: 14px;
font-weight: 700;
}

.payment-attachment-link:hover {
background: #21435d;
}
.payment-detail-header .payment-back-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;

padding: 10px 16px;

background: #ffffff;
color: #173247;

border: 1px solid #dbe2e8;
border-radius: 12px;

font-size: 14px;
font-weight: 700;

text-decoration: none;

box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);

transition: 0.2s ease;
}

.payment-detail-header .payment-back-button:hover {
background: #173247;
color: #ffffff;
border-color: #173247;
transform: translateY(-1px);
}
.payment-detail-actions {
display: flex;
gap: 12px;
margin-top: 20px;
align-items: center;
}

.payment-detail-actions form {
margin: 0;
}

.payment-approve-button,
.payment-reject-button {
border: none;
padding: 10px 22px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: 0.2s ease;
}

.payment-approve-button {
background: #0f6b4f;
color: white;
}

.payment-approve-button:hover {
opacity: 0.88;
}

.payment-reject-button {
background: #fff;
color: #b42318;
border: 1px solid #d92d20;
}

.payment-reject-button:hover {
background: #fff4f2;
}
.payment-reject-form {
display: flex;
align-items: center;
gap: 12px;
margin-top: 16px;
flex-wrap: wrap;
}

.payment-rejection-reason {
min-width: 280px;
min-height: 44px;
padding: 10px 14px;
border: 1px solid #d7dde3;
border-radius: 10px;
font-family: inherit;
font-size: 14px;
resize: vertical;
outline: none;
background: #fff;
}

.payment-rejection-reason:focus {
border-color: #b42318;
box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.08);
}
.payment-rejection-message {
margin-bottom: 18px;
padding: 16px 18px;
border: 1px solid #f1c7c2;
border-radius: 12px;
background: #fff7f6;
color: #8b2c23;
}

.payment-rejection-message strong {
display: block;
margin-bottom: 6px;
font-size: 15px;
}

.payment-rejection-message p {
margin: 0 0 5px;
font-size: 14px;
}

.payment-rejection-message span {
display: block;
font-size: 13px;
color: #6f4a46;
}
/* ============================= */
/* ألوان حالات الدفعات */
/* ============================= */

.payment-status-paid {
background: #e8f5ec;
color: #2f7a4f;
border: 1px solid #cfe8d7;
}

.payment-status-review {
background: #eef4fb;
color: #3e6f9e;
border: 1px solid #d7e4f2;
}

.payment-status-pending,
.payment-status-waiting_payment {
background: #fff4d8;
color: #9a6a00;
border: 1px solid #f1dfaa;
}

.payment-status-rejected {
background: #fdeaea;
color: #a34444;
border: 1px solid #f1cccc;
}

.payment-status-overdue {
background: #ffe5e5;
color: #b42323;
border: 1px solid #f2bcbc;
}

.payment-status {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 90px;
padding: 6px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}
/* ========================================
Annual Reports Page
======================================== */

.annual-reports-content {
padding: 32px;
}

.annual-reports-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
margin-bottom: 24px;
}

.annual-reports-header h1 {
margin: 0 0 8px;
font-size: 30px;
}

.annual-reports-header p {
margin: 0;
color: #6b7280;
}

.annual-report-year {
display: flex;
align-items: center;
gap: 10px;
}

.annual-report-year select {
min-width: 100px;
padding: 9px 12px;
border: 1px solid #dfe4e8;
border-radius: 10px;
background: #ffffff;
}


/* بطاقات الإحصائيات */

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

.annual-stat-card {
background: #ffffff;
border: 1px solid #e5e9ed;
border-radius: 16px;
padding: 20px;
min-height: 130px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.annual-stat-card span {
color: #5f6b76;
font-size: 14px;
}

.annual-stat-card strong {
font-size: 28px;
color: #17212b;
}

.annual-stat-card small {
color: #8a949e;
}


/* المنطقة الرئيسية */

.annual-report-main-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
align-items: start;
}

.annual-report-card {
background: #ffffff;
border: 1px solid #e5e9ed;
border-radius: 16px;
padding: 22px;
}

.annual-card-header {
margin-bottom: 22px;
}

.annual-card-header h2 {
margin: 0 0 7px;
font-size: 20px;
}

.annual-card-header p {
margin: 0;
color: #7b8792;
}


/* الرسم الشهري */

.annual-chart {
height: 300px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 10px;
padding-top: 30px;
border-bottom: 1px solid #e6eaee;
}

.annual-chart-item {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
gap: 7px;
min-width: 0;
}

.annual-chart-item strong {
font-size: 13px;
}

.annual-chart-item span {
font-size: 11px;
color: #6b7280;
}

.annual-chart-bar {
width: 70%;
max-width: 34px;
min-height: 0;
background: #315f7d;
border-radius: 8px 8px 3px 3px;
transition: height 0.35s ease;
}


/* توزيع الخدمات */

.annual-service-list {
display: flex;
flex-direction: column;
gap: 14px;
}

.annual-service-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
padding: 13px 0;
border-bottom: 1px solid #edf0f2;
}

.annual-service-item:last-child {
border-bottom: 0;
}

.annual-service-item strong {
display: block;
margin-bottom: 4px;
}

.annual-service-item small {
color: #7d8790;
}


/* جدول الجهات */

.annual-clients-report {
margin-top: 20px;
}

.annual-table-wrap {
width: 100%;
overflow-x: auto;
}

.annual-report-table {
width: 100%;
border-collapse: collapse;
margin-top: 18px;
}

.annual-report-table th,
.annual-report-table td {
padding: 13px 14px;
text-align: right;
border-bottom: 1px solid #e9edef;
}

.annual-report-table th {
background: #f7f9fa;
color: #59636e;
font-size: 13px;
}

.annual-export-button {
border: 0;
border-radius: 10px;
padding: 10px 16px;
background: #123b52;
color: #ffffff;
font-weight: 700;
cursor: pointer;
}


/* الشاشات الأصغر */

@media (max-width: 1000px) {
.annual-report-stats {
grid-template-columns: repeat(2, 1fr);
}

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

@media (max-width: 650px) {
.annual-reports-content {
padding: 18px;
}

.annual-reports-header {
flex-direction: column;
}

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

.annual-chart {
overflow-x: auto;
}

.annual-chart-item {
min-width: 45px;
}
}
/* ==============================
Annual Reports - Main Layout
============================== */

.annual-report-main-grid {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 22px;
align-items: stretch;
margin-top: 24px;
margin-bottom: 24px;
}

.annual-report-main-grid > .annual-report-card {
margin: 0;
min-width: 0;
}

.annual-services-chart,
.annual-services-distribution {
height: 100%;
}

@media (max-width: 1000px) {
.annual-report-main-grid {
grid-template-columns: 1fr;
}
}
/* ===== Annual Reports Layout Fix ===== */

.annual-report-main-grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
gap: 24px;
align-items: start;
width: 100%;
}

.annual-services-chart,
.annual-services-distribution {
width: 100%;
min-width: 0;
}

.annual-services-chart {
grid-column: 1;
}

.annual-services-distribution {
grid-column: 2;
}

.annual-clients-report {
grid-column: 1 / -1;
width: 100%;
}

/* للشاشات الصغيرة */
@media (max-width: 900px) {
.annual-report-main-grid {
grid-template-columns: 1fr;
}

.annual-services-chart,
.annual-services-distribution,
.annual-clients-report {
grid-column: 1;
}
}
/* ===== Annual Reports Final Layout ===== */

.annual-reports-page .dashboard-layout {
align-items: stretch;
}

.annual-reports-page .dashboard-content,
.annual-reports-content {
padding: 24px !important;
margin: 0 !important;
}

.annual-reports-page .dashboard-sidebar {
min-height: 100vh;
align-self: stretch;
}

/* الكرتين جنب بعض */
.annual-reports-page .annual-report-main-grid {
display: grid !important;
grid-template-columns: 2fr 1fr !important;
gap: 20px !important;
align-items: start !important;
width: 100% !important;
}

/* الخدمات المقدمة */
.annual-reports-page .annual-services-chart {
grid-column: 1 !important;
width: 100% !important;
min-height: 420px !important;
}

/* توزيع أنواع الخدمات */
.annual-reports-page .annual-services-distribution {
grid-column: 2 !important;
width: 100% !important;
min-height: 420px !important;
}

/* إزالة الفراغات الكبيرة داخل توزيع الخدمات */
.annual-reports-page .annual-service-list {
display: flex;
flex-direction: column;
gap: 10px !important;
}

.annual-reports-page .annual-service-item {
min-height: auto !important;
padding: 12px 14px !important;
margin: 0 !important;
}

/* الملخص السنوي لحاله تحت */
.annual-reports-page .annual-clients-report {
grid-column: 1 / -1 !important;
width: 100% !important;
margin-top: 24px !important;
}

/* عنوان الملخص + الزر */
.annual-reports-page .annual-clients-report .annual-card-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 20px !important;
width: 100% !important;
}

/* زر PDF على اليسار */
.annual-reports-page .annual-export-button {
margin-right: auto !important;
margin-left: 0 !important;
padding: 10px 18px !important;
border-radius: 10px !important;
font-weight: 700 !important;
white-space: nowrap;
}

/* تصميم الجدول */
.annual-reports-page .annual-table-wrap {
margin-top: 18px !important;
border: 1px solid #e4e8ec;
border-radius: 14px;
overflow: hidden;
background: #ffffff;
}

.annual-reports-page .annual-report-table {
width: 100% !important;
border-collapse: collapse !important;
}

.annual-reports-page .annual-report-table th {
padding: 14px 12px !important;
background: #f5f7f9;
font-weight: 700;
border-bottom: 1px solid #e3e7eb;
}

.annual-reports-page .annual-report-table td {
padding: 14px 12px !important;
border-bottom: 1px solid #edf0f2;
}

.annual-reports-page .annual-report-table tbody tr:last-child td {
border-bottom: none;
}

@media (max-width: 1000px) {
.annual-reports-page .annual-report-main-grid {
grid-template-columns: 1fr !important;
}

.annual-reports-page .annual-services-chart,
.annual-reports-page .annual-services-distribution,
.annual-reports-page .annual-clients-report {
grid-column: 1 !important;
}
}
/* ===== Annual Services Cards ===== */

.annual-services-distribution {
min-height: 0 !important;
height: auto !important;
align-self: start !important;
}

.annual-services-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 18px;
}

.annual-service-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;

padding: 18px;

border: 1px solid #e4e9ed;
border-radius: 14px;

background: #ffffff;

min-height: 90px;
}

.annual-service-card > div {
display: flex;
flex-direction: column;
gap: 6px;
}

.annual-service-card strong {
font-size: 15px;
color: #1f2d38;
}

.annual-service-card small {
font-size: 12px;
color: #7a8791;
}

.annual-service-card > span {
display: inline-flex;
align-items: center;
justify-content: center;

min-width: 54px;
height: 34px;

padding: 0 10px;

border-radius: 10px;

background: #edf4f7;
color: #315f7d;

font-size: 13px;
font-weight: 700;
}

@media (max-width: 800px) {
.annual-services-cards {
grid-template-columns: 1fr;
}
}
/* ===== Annual Reports - Final Layout Fix ===== */

.annual-reports-page .annual-top-services-grid {
display: grid !important;
grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr) !important;
gap: 20px !important;
align-items: start !important;
width: 100% !important;
}

.annual-reports-page .annual-services-main-card,
.annual-reports-page .annual-services-side-card {
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
}

.annual-reports-page .annual-services-side-card {
align-self: start !important;
}

.annual-reports-page .annual-services-cards {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
margin-top: 16px !important;
}

.annual-reports-page .annual-service-card {
min-height: 82px !important;
height: auto !important;
padding: 14px !important;
margin: 0 !important;
}

@media (max-width: 900px) {
.annual-reports-page .annual-top-services-grid {
grid-template-columns: 1fr !important;
}

.annual-reports-page .annual-services-cards {
grid-template-columns: 1fr 1fr !important;
}
}
.annual-reports-page .annual-services-chart {
min-height: 560px !important;
padding: 28px !important;
}

.annual-reports-page .annual-services-chart .annual-card-header h2 {
font-size: 24px !important;
}

.annual-reports-page .annual-services-chart .annual-card-header p {
font-size: 15px !important;
}

.annual-reports-page .annual-services-chart .annual-chart {
min-height: 420px !important;
}

.annual-reports-page .annual-services-chart .annual-chart-item {
min-height: 330px !important;
}

.annual-reports-page .annual-services-chart .annual-chart-bar {
width: 34px !important;
}
.annual-reports-page .annual-services-chart {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}

.annual-reports-page .annual-report-main-grid {
display: block !important;
width: 100% !important;
}

.annual-reports-page .annual-services-chart {
display: block !important;
}
/* ================================
System Management Page
================================ */

.system-management-page {
background: #f5f7f9;
}

.system-management-content {
padding: 34px;
}

/* Header */

.system-page-header {
margin-bottom: 28px;
}

.system-page-header h1 {
margin: 0 0 8px;
font-size: 30px;
font-weight: 800;
color: #172b3a;
}

.system-page-header p {
margin: 0;
font-size: 14px;
color: #7a8791;
}


/* Statistics */

.system-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 30px;
}

.system-stat-card {
background: #ffffff;
border: 1px solid #e5e9ed;
border-radius: 16px;
padding: 22px;
min-height: 115px;

display: flex;
flex-direction: column;
justify-content: space-between;

box-shadow: 0 4px 14px rgba(0, 0, 0, 0.035);
}

.system-stat-card span {
font-size: 13px;
color: #74808a;
font-weight: 600;
}

.system-stat-card strong {
font-size: 30px;
color: #17384d;
font-weight: 800;
}


/* Main options */

.system-options-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}

.system-option-card {
position: relative;

display: flex;
align-items: center;
gap: 18px;

min-height: 135px;
padding: 22px 24px;

background: #ffffff;
border: 1px solid #e4e9ed;
border-radius: 18px;

color: inherit;
text-decoration: none;

box-shadow: 0 5px 18px rgba(0, 0, 0, 0.04);

transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
}

.system-option-card:hover {
transform: translateY(-2px);
border-color: #b9ccd8;
box-shadow: 0 9px 24px rgba(0, 0, 0, 0.07);
}

.system-option-icon {
width: 58px;
height: 58px;
min-width: 58px;

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

border-radius: 15px;

background: #edf4f7;

font-size: 25px;
}

.system-option-card > div:nth-child(2) {
flex: 1;
}

.system-option-card h2 {
margin: 0 0 8px;
font-size: 18px;
color: #18394e;
}

.system-option-card p {
margin: 0;

color: #7b8790;
font-size: 13px;
line-height: 1.8;
}

.system-option-arrow {
width: 34px;
height: 34px;

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

border-radius: 50%;

background: #f4f7f8;
color: #315f7d;

font-size: 18px;
}


/* Fix system page sidebar links */

.system-management-page .sidebar-nav {
display: flex;
flex-direction: column;
gap: 8px;
}

.system-management-page .sidebar-nav a {
display: block;

padding: 11px 14px;

color: #edf4f7;
text-decoration: none;

border-radius: 10px;

font-size: 14px;
font-weight: 600;
}

.system-management-page .sidebar-nav a:hover {
background: rgba(255, 255, 255, 0.08);
}

.system-management-page .sidebar-nav a.active {
background: rgba(68, 143, 184, 0.28);
color: #ffffff;
}


/* Responsive */

@media (max-width: 1000px) {

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

.system-options-grid {
grid-template-columns: 1fr;
}
}

@media (max-width: 650px) {

.system-management-content {
padding: 20px;
}

.system-stats-grid {
grid-template-columns: 1fr;
}
}
/* =========================
System Users Page
========================= */

.system-users-content {
padding: 28px;
}

.system-users-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 24px;
}

.system-users-header h1 {
margin: 0 0 8px;
font-size: 28px;
}

.system-users-header p {
margin: 0;
color: #6b7280;
font-size: 14px;
}

.system-add-user-button {
border: 0;
border-radius: 12px;
padding: 11px 18px;
background: #12384d;
color: #ffffff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}

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

.system-users-stats article {
background: #ffffff;
border: 1px solid #e7ebee;
border-radius: 16px;
padding: 20px;
min-height: 105px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}

.system-users-stats span {
color: #68727c;
font-size: 13px;
}

.system-users-stats strong {
font-size: 28px;
color: #18232c;
}

.system-users-card {
background: #ffffff;
border: 1px solid #e5e9ec;
border-radius: 18px;
padding: 22px;
}

.system-users-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.system-users-card-header h2 {
margin: 0 0 6px;
font-size: 20px;
}

.system-users-card-header p {
margin: 0;
color: #74808a;
font-size: 13px;
}

.system-users-table-wrap {
width: 100%;
overflow-x: auto;
}

.system-users-table {
width: 100%;
border-collapse: collapse;
}

.system-users-table th {
padding: 13px 12px;
background: #f6f8f9;
color: #59636d;
font-size: 13px;
font-weight: 700;
text-align: right;
border-bottom: 1px solid #e7ebee;
}

.system-users-table td {
padding: 15px 12px;
border-bottom: 1px solid #edf0f2;
font-size: 13px;
vertical-align: middle;
}

.system-users-table tbody tr:last-child td {
border-bottom: 0;
}

.user-status {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 70px;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}

.user-status.active {
background: #e8f4ec;
color: #2f7b4a;
}

.user-status.inactive {
background: #fbeaea;
color: #a43d3d;
}

.user-action-button {
border: 1px solid #d8dee3;
border-radius: 9px;
padding: 7px 12px;
background: #ffffff;
color: #24323d;
cursor: pointer;
font-weight: 600;
}

.user-action-button:hover {
background: #f4f6f7;
}

@media (max-width: 900px) {
.system-users-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.system-users-header {
align-items: stretch;
flex-direction: column;
}
}
/* =========================
Add System User Page
========================= */

.system-user-add-content {
padding: 30px;
}

.system-user-add-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 26px;
}

.system-user-add-header h1 {
margin: 0 0 8px;
font-size: 28px;
}

.system-user-add-header p {
margin: 0;
color: #6b7280;
font-size: 14px;
}

.system-user-back-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border: 1px solid #d9e0e5;
border-radius: 10px;
background: #ffffff;
color: #24333d;
text-decoration: none;
font-size: 13px;
font-weight: 700;
}

.system-user-form-card {
max-width: 850px;
margin: 0 auto;
padding: 28px;
background: #ffffff;
border: 1px solid #e5e9ec;
border-radius: 18px;
}

.system-user-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}

.system-form-group {
display: flex;
flex-direction: column;
gap: 8px;
}

.system-form-group label {
color: #26333d;
font-size: 13px;
font-weight: 700;
}

.system-form-group input,
.system-form-group select {
width: 100%;
min-height: 44px;
padding: 10px 12px;
border: 1px solid #d9e0e5;
border-radius: 10px;
background: #ffffff;
color: #18232c;
font-size: 14px;
box-sizing: border-box;
}

.system-form-group input:focus,
.system-form-group select:focus {
outline: none;
border-color: #315f7d;
box-shadow: 0 0 0 3px rgba(49, 95, 125, 0.10);
}

.system-user-form-actions {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid #edf0f2;
}

.system-user-save-button,
.system-user-cancel-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 120px;
min-height: 42px;
padding: 10px 18px;
border-radius: 10px;
font-size: 13px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
}

.system-user-save-button {
border: 0;
background: #12384d;
color: #ffffff;
}

.system-user-cancel-button {
border: 1px solid #d9e0e5;
background: #ffffff;
color: #4b5964;
}

.system-message {
max-width: 850px;
margin: 0 auto 18px;
padding: 12px 16px;
border-radius: 10px;
font-size: 13px;
}

.system-message.error {
background: #fbeaea;
color: #9b3838;
}

.system-message.success {
background: #e8f4ec;
color: #2f7b4a;
}

@media (max-width: 800px) {
.system-user-add-header {
flex-direction: column;
align-items: stretch;
}

.system-user-form-grid {
grid-template-columns: 1fr;
}
}
.system-user-active-field {
margin-top: 22px;
padding: 16px;
background: #f7f9fa;
border: 1px solid #e5e9ec;
border-radius: 12px;
}

.system-user-active-field label {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}

.system-user-active-field input {
width: 17px;
height: 17px;
}
.system-users-card-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 20px;
}
.system-users-topbar {
margin-bottom: 24px;
}

.system-back-button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
background: #ffffff;
color: #12384d;
border: 1px solid #d9e3ea;
border-radius: 14px;
text-decoration: none;
font-size: 14px;
font-weight: 700;
box-shadow: 0 4px 14px rgba(18, 56, 77, 0.08);
transition: all 0.2s ease;
}

.system-back-button:hover {
background: #f5f9fc;
border-color: #12384d;
transform: translateY(-1px);
}

.system-back-button:active {
transform: translateY(0);
}
/* =========================
System Roles Page
========================= */

.system-roles-content {
padding: 30px;
}

.system-roles-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 28px;
}

.system-roles-header h1 {
margin: 0 0 8px;
font-size: 30px;
}

.system-roles-header p {
margin: 0;
color: #6b7280;
font-size: 14px;
}

.system-roles-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: stretch;
}

.system-role-card {
background: #ffffff;
border: 1px solid #e4e9ed;
border-radius: 18px;
padding: 24px;
box-shadow: 0 6px 18px rgba(15, 45, 70, 0.06);
}

.system-role-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 14px;
}

.system-role-code {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 10px;
margin-bottom: 10px;
border-radius: 8px;
background: #edf3f7;
color: #315f7d;
font-size: 12px;
font-weight: 700;
}

.system-role-card h2 {
margin: 0;
color: #17242d;
font-size: 21px;
}

.system-role-description {
min-height: 48px;
margin: 0 0 20px;
color: #66727c;
font-size: 13px;
line-height: 1.8;
}

.system-role-permissions {
padding-top: 18px;
border-top: 1px solid #edf0f2;
}

.system-role-permissions h3 {
margin: 0 0 14px;
color: #26333d;
font-size: 15px;
}

.system-role-permissions ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 11px;
}

.system-role-permissions li {
display: flex;
align-items: center;
gap: 9px;
color: #48545d;
font-size: 13px;
}

.system-role-permissions li span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
min-width: 22px;
border-radius: 50%;
background: #e8f4ec;
color: #3f8054;
font-size: 12px;
font-weight: 800;
}

@media (max-width: 1050px) {
.system-roles-grid {
grid-template-columns: 1fr;
}
}

@media (max-width: 700px) {
.system-roles-header {
flex-direction: column;
align-items: stretch;
}
}
/* =========================
System Settings Page
========================= */

.system-settings-content {
padding: 30px;
}

.system-settings-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 26px;
}

.system-settings-header h1 {
margin: 0 0 8px;
font-size: 30px;
}

.system-settings-header p {
margin: 0;
color: #6b7280;
font-size: 14px;
}

.system-settings-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}

.system-settings-card {
background: #ffffff;
border: 1px solid #e5e9ec;
border-radius: 18px;
padding: 24px;
box-shadow: 0 6px 18px rgba(15, 45, 70, 0.05);
}

.system-settings-card-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
}

.system-settings-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: #eef4f7;
font-size: 20px;
}

.system-settings-card-header h2 {
margin: 0 0 5px;
font-size: 18px;
}

.system-settings-card-header p {
margin: 0;
color: #7a858e;
font-size: 12px;
}

.system-settings-fields {
display: flex;
flex-direction: column;
gap: 16px;
}

.system-settings-options {
display: flex;
flex-direction: column;
gap: 12px;
}

.system-settings-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 15px;
background: #f8fafb;
border: 1px solid #edf0f2;
border-radius: 12px;
}

.system-settings-option div {
display: flex;
flex-direction: column;
gap: 5px;
}

.system-settings-option strong {
font-size: 13px;
color: #25323b;
}

.system-settings-option small {
color: #7a858e;
font-size: 11px;
}

.system-setting-status {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 75px;
padding: 7px 10px;
border-radius: 9px;
font-size: 11px;
font-weight: 700;
}

.system-setting-status.enabled {
background: #e8f4ec;
color: #36764b;
}

.system-setting-status.disabled {
background: #f1f3f5;
color: #69737c;
}

@media (max-width: 900px) {
.system-settings-grid {
grid-template-columns: 1fr;
}

.system-settings-header {
flex-direction: column;
align-items: stretch;
}
}
.system-settings-save-area {
display: flex;
justify-content: flex-start;
margin-top: 24px;
}

.system-settings-save-button {
border: none;
border-radius: 12px;
padding: 12px 24px;
background: #12384d;
color: #ffffff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: 0.2s ease;
}

.system-settings-save-button:hover {
background: #0f2f41;
transform: translateY(-1px);
}

.system-settings-option input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: #315f7d;
}
.settings-switch {
position: relative;
display: inline-block;
width: 46px;
height: 25px;
flex-shrink: 0;
}

.settings-switch input {
opacity: 0;
width: 0;
height: 0;
}

.settings-slider {
position: absolute;
inset: 0;
cursor: pointer;
background: #d6dce0;
border-radius: 999px;
transition: 0.25s ease;
}

.settings-slider::before {
content: "";
position: absolute;
width: 19px;
height: 19px;
right: 3px;
top: 3px;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
transition: 0.25s ease;
}

.settings-switch input:checked + .settings-slider {
background: #315f7d;
}

.settings-switch input:checked + .settings-slider::before {
transform: translateX(-21px);
}
.system-settings-card .system-settings-options {
margin-top: 24px;
}
.system-settings-save-area {
    width: 50%;
    margin-right: auto;
    margin-top: 18px;
    display: flex;
    justify-content: flex-start;
    direction: ltr;
}

.system-settings-save-button {
border: none;
border-radius: 12px;
padding: 12px 24px;
background: #12384d;
color: #ffffff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.system-settings-save-area {
    width: 50%;
    margin-right: auto;
    margin-top: 12px;
    display: flex;
    justify-content: flex-start;
    direction: ltr;
}
.system-settings-content {
padding-bottom: 30px;
}
/* =========================
   Advanced System Page
========================= */

.system-advanced-content {
    padding: 30px;
}

.system-advanced-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.system-advanced-header h1 {
    margin: 0 0 8px;
    font-size: 30px;
}

.system-advanced-header p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.8;
}


.system-advanced-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}


.system-advanced-card {
    background: #ffffff;
    border: 1px solid #e5e9ec;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 6px 18px rgba(15, 45, 70, 0.05);
}


.system-advanced-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}


.system-advanced-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;

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

    border-radius: 12px;

    background: #eef4f7;

    font-size: 20px;
}


.system-advanced-card-header h2,
.advanced-admin-card h2 {
    margin: 0 0 5px;
    font-size: 18px;
}


.system-advanced-card-header p,
.advanced-admin-card p {
    margin: 0;
    color: #7a858e;
    font-size: 12px;
    line-height: 1.7;
}


/* حالة النظام */

.system-health-list,
.support-status-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.system-health-item,
.support-status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding: 15px;

    border: 1px solid #edf0f2;
    border-radius: 12px;

    background: #f8fafb;
}


.system-health-item > div,
.support-status-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.system-health-item strong,
.support-status-item strong {
    font-size: 13px;
    color: #26333d;
}


.system-health-item small,
.support-status-item small {
    font-size: 11px;
    color: #7a858e;
}


.advanced-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 75px;

    padding: 7px 11px;

    border-radius: 9px;

    font-size: 11px;
    font-weight: 700;
}


.advanced-status.available {
    background: #e8f4ec;
    color: #36764b;
}


.advanced-status.busy {
    background: #fff1dc;
    color: #a1691b;
}


.advanced-status.neutral {
    background: #f0f2f4;
    color: #67717a;
}


/* سجل النشاط */

.system-activity-empty {
    padding: 24px;

    text-align: center;

    background: #f8fafb;

    border: 1px dashed #dfe5e9;
    border-radius: 12px;
}


.system-activity-empty strong {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
}


.system-activity-empty small {
    color: #7c8790;
    font-size: 11px;
}


/* النسخ الاحتياطي */

.backup-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding: 17px;

    background: #f8fafb;

    border: 1px solid #edf0f2;
    border-radius: 12px;
}


.backup-summary > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.backup-summary span {
    color: #7b858e;
    font-size: 11px;
}


.backup-summary strong {
    font-size: 13px;
    color: #26333d;
}


.advanced-secondary-button {
    border: 1px solid #d8e0e5;
    border-radius: 10px;

    padding: 9px 14px;

    background: #ffffff;

    color: #2c3b45;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


/* الإدارة التقنية */

.advanced-admin-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    margin-top: 20px;
    padding: 24px;

    background: #ffffff;

    border: 1px solid #e5e9ec;
    border-radius: 18px;

    box-shadow: 0 6px 18px rgba(15, 45, 70, 0.05);
}


.advanced-admin-content {
    display: flex;
    align-items: center;
    gap: 15px;
}


.advanced-admin-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 17px;
border-radius: 11px;

    background: #12384d;
    color: #ffffff;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}


@media (max-width: 950px) {

    .system-advanced-grid {
        grid-template-columns: 1fr;
    }

    .system-advanced-header,
    .advanced-admin-card {
        flex-direction: column;
        align-items: stretch;
    }
}

.forgot-password-row {
    margin: 10px 0 18px;
    text-align: right;
}

.forgot-password-link {
    color: #315f7d;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.forgot-password-link:hover {
    text-decoration: underline;
}
/* =========================
Password Reset Confirm
========================= */

.password-reset-page {
min-height: 100vh;
margin: 0;
background: #f3f6f8;
font-family: "Segoe UI", Tahoma, Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
direction: rtl;
}

.password-reset-container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 20px;
}

.password-reset-card {
width: min(560px, 92%);
background: #ffffff;
border: 1px solid #e5e9ec;
border-radius: 24px;
padding: 42px 44px;
box-shadow: 0 16px 45px rgba(15, 45, 62, 0.08);
text-align: center;
}

.reset-icon {
width: 64px;
height: 64px;
margin: 0 auto 18px;
border-radius: 18px;
background: #edf4f7;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
}

.password-reset-card h1 {
margin: 0 0 12px;
font-size: 30px;
font-weight: 800;
color: #102f40;
}

.password-reset-card .description {
margin: 0 auto 30px;
max-width: 430px;
font-size: 15px;
line-height: 1.9;
color: #66757e;
}

.reset-field {
text-align: right;
margin-bottom: 22px;
}

.reset-field label {
display: block;
margin-bottom: 8px;
font-size: 15px;
font-weight: 700;
color: #243b49;
}

.reset-field input {
width: 100%;
box-sizing: border-box;
min-height: 54px;
padding: 12px 16px;
border: 1px solid #ccd6dc;
border-radius: 14px;
background: #ffffff;
font-size: 16px;
outline: none;
transition: 0.2s ease;
}

.reset-field input:focus {
border-color: #315f7d;
box-shadow: 0 0 0 3px rgba(49, 95, 125, 0.10);
}

.password-reset-card .submit-button {
width: 100%;
min-height: 54px;
border: 0;
border-radius: 14px;
background: #07384d;
color: #ffffff;
font-size: 16px;
font-weight: 800;
cursor: pointer;
margin-top: 6px;
}

.password-reset-card .submit-button:hover {
background: #0a4862;
}

.password-reset-card .back-link {
display: inline-block;
margin-top: 22px;
color: #214f68;
font-weight: 700;
text-decoration: none;
}

.password-reset-card .errorlist {
margin: 8px 0 0;
padding: 0;
list-style: none;
color: #b42318;
font-size: 13px;
text-align: right;
}
.reset-login-button {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-sizing: border-box;
}
/* =========================================
   System Services Page
========================================= */

.system-services-page {
    background: #f4f7fb;
}

.system-services-content {
    flex: 1;
    padding: 32px;
    min-height: 100vh;
}

.page-header-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
    margin-bottom: 24px;
}

.page-header-card h1 {
    margin: 0 0 8px;
    font-size: 36px;
    color: #0f172a;
}

.page-header-card p {
    margin: 0;
    color: #64748b;
    font-size: 16px;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 600;
    transition: 0.2s ease;
}

.back-btn:hover {
    background: #e2e8f0;
}

.services-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.stat-label {
    display: block;
    font-size: 14px;
    color: #64748b;
    margin-bottom: 10px;
}

.stat-value {
    font-size: 30px;
    color: #0f172a;
    font-weight: 700;
}

.services-panel {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.section-head h2 {
    margin: 0 0 6px;
    font-size: 28px;
    color: #0f172a;
}

.section-head p {
    margin: 0;
    color: #64748b;
}

.primary-btn {
    background: #0f172a;
    color: #ffffff;
    border: none;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

.primary-btn:hover {
    opacity: 0.92;
}

.table-wrapper {
    overflow-x: auto;
}

.services-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.services-table thead th {
    text-align: right;
    background: #f8fafc;
    color: #334155;
    padding: 16px;
    font-size: 14px;
    border-bottom: 1px solid #e2e8f0;
}

.services-table tbody td {
    padding: 16px;
    border-bottom: 1px solid #eef2f7;
    color: #0f172a;
    font-size: 15px;
}

.services-table tbody tr:hover {
    background: #fafcff;
}

.status-badge {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.status-badge.active {
    background: #dcfce7;
    color: #166534;
}

.status-badge.inactive {
    background: #fee2e2;
    color: #991b1b;
}

.actions-cell {
    white-space: nowrap;
}

.table-action {
    text-decoration: none;
    font-weight: 600;
    margin-left: 10px;
}

.table-action.edit {
    color: #2563eb;
}

.table-action.view {
    color: #0f172a;
}

.empty-state-card {
    text-align: center;
    padding: 48px 20px;
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    background: #f8fafc;
}

.empty-icon {
    font-size: 42px;
    margin-bottom: 12px;
}

.empty-state-card h3 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 24px;
}

.empty-state-card p {
    margin: 0 0 20px;
    color: #64748b;
}

/* تحسين السايدبار */
.dashboard-sidebar {
    width: 280px;
    min-height: 100vh;
    background: linear-gradient(180deg, #0b1e3a 0%, #0f2c4d 100%);
    color: #ffffff;
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sidebar-brand h2 {
    margin: 0;
    font-size: 28px;
    color: #ffffff;
}

.sidebar-brand p {
    margin-top: 8px;
    color: rgba(255,255,255,0.75);
    font-size: 14px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
}

.sidebar-link {
text-decoration: none;
    color: #ffffff;
    padding: 14px 16px;
    border-radius: 14px;
    transition: 0.2s ease;
    font-weight: 600;
}

.sidebar-link:hover,
.sidebar-link.active {
    background: rgba(255,255,255,0.12);
}

.sidebar-user-box {
    background: rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 18px;
}

.sidebar-user-box strong {
    display: block;
    margin-bottom: 6px;
}

.sidebar-user-box span {
    display: block;
    margin-bottom: 12px;
    color: rgba(255,255,255,0.75);
    font-size: 14px;
}

.logout-btn {
    display: inline-block;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 700;
}

/* تجاوب */
@media (max-width: 992px) {
    .services-stats-grid {
        grid-template-columns: 1fr;
    }

    .page-header-card,
    .section-head {
        flex-direction: column;
        align-items: flex-start;
    }
}



/* =========================================
System Services Page
========================================= */

.system-services-page {
background: #f5f7f9;
}

.system-services-page .dashboard-layout {
display: flex;
min-height: 100vh;
}

/* المحتوى الرئيسي */
.system-services-page .services-management-content {
flex: 1;
padding: 24px 28px 40px;
min-width: 0;
}


/* =========================================
رأس الصفحة
========================================= */

.system-services-page .services-page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;

background: #ffffff;
border: 1px solid #e6eaed;
border-radius: 16px;

padding: 18px 20px;
margin-bottom: 16px;
}

.system-services-page .services-page-title h1 {
margin: 0 0 5px;
font-size: 26px;
line-height: 1.4;
font-weight: 700;
color: #162630;
}

.system-services-page .services-page-title p {
margin: 0;
font-size: 13px;
line-height: 1.8;
color: #74808a;
}

.system-services-page .system-back-button {
display: inline-flex;
align-items: center;
justify-content: center;

min-height: 40px;
padding: 9px 14px;

border: 1px solid #dce2e6;
border-radius: 10px;

background: #ffffff;
color: #253945;

font-size: 13px;
font-weight: 600;
text-decoration: none;

transition: 0.2s ease;
}

.system-services-page .system-back-button:hover {
background: #f4f7f9;
}


/* =========================================
بطاقات الإحصائيات
========================================= */

.system-services-page .services-stats-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;

margin-bottom: 16px;
}

.system-services-page .services-stat-card {
background: #ffffff;
border: 1px solid #e6eaed;
border-radius: 14px;

padding: 16px 18px;
}

.system-services-page .services-stat-card span {
display: block;
margin-bottom: 7px;

font-size: 12px;
font-weight: 500;
color: #78848d;
}

.system-services-page .services-stat-card strong {
display: block;

font-size: 24px;
line-height: 1.2;
font-weight: 700;
color: #162630;
}


/* =========================================
بطاقة الخدمات
========================================= */

.system-services-page .services-list-card {
background: #ffffff;
border: 1px solid #e6eaed;
border-radius: 16px;

overflow: hidden;
}

.system-services-page .services-list-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;

padding: 17px 20px;

border-bottom: 1px solid #edf0f2;
}

.system-services-page .services-list-header h2 {
margin: 0 0 4px;

font-size: 19px;
font-weight: 700;
color: #162630;
}

.system-services-page .services-list-header p {
margin: 0;

font-size: 12px;
color: #7a858e;
}

.system-services-page .services-add-button {
min-height: 39px;

border: 0;
border-radius: 9px;

background: #12364d;
color: #ffffff;

padding: 9px 15px;

font-size: 13px;
font-weight: 600;

cursor: pointer;
transition: 0.2s ease;
}

.system-services-page .services-add-button:hover {
background: #0d2b3d;
}


/* =========================================
جدول الخدمات
========================================= */

.system-services-page .services-table-wrapper {
width: 100%;
overflow-x: auto;
}

.system-services-page .services-table {
width: 100%;
min-width: 850px;

border-collapse: collapse;
table-layout: auto;
}

.system-services-page .services-table thead {
background: #f7f9fa;
}

.system-services-page .services-table th {
padding: 12px 14px;

text-align: right;

font-size: 12px;
font-weight: 600;
color: #63717b;

border-bottom: 1px solid #e6eaed;
}

.system-services-page .services-table td {
padding: 13px 14px;

text-align: right;
vertical-align: middle;

font-size: 13px;


color: #253640;

border-bottom: 1px solid #eef1f3;
}

.system-services-page .services-table tbody tr:last-child td {
border-bottom: 0;
}

.system-services-page .services-table tbody tr:hover {
background: #fafcfd;
}

.system-services-page .services-table td strong {
font-size: 13px;
font-weight: 600;
color: #162630;
}

.system-services-page .service-description-cell {
max-width: 330px;

line-height: 1.7;
color: #64727c;
}


/* =========================================
حالة الخدمة
========================================= */

.system-services-page .service-status {
display: inline-flex;
align-items: center;
justify-content: center;

min-width: 58px;

padding: 5px 9px;

border-radius: 999px;

font-size: 11px;
font-weight: 600;
}

.system-services-page .service-status.active {
background: #e8f5ed;
color: #2f7750;
}

.system-services-page .service-status.inactive {
background: #f1f2f3;
color: #747d84;
}


/* =========================================
زر التعديل
========================================= */

.system-services-page .service-actions-cell {
white-space: nowrap;
}

.system-services-page .service-action-button {
border: 1px solid #d9e0e4;
border-radius: 8px;

background: #ffffff;
color: #294454;

padding: 6px 11px;

font-size: 12px;
font-weight: 600;

cursor: pointer;
transition: 0.2s ease;
}

.system-services-page .service-action-button:hover {
background: #f4f7f9;
}


/* =========================================
في حالة عدم وجود خدمات
========================================= */

.system-services-page .services-empty-row td {
padding: 35px 20px;

text-align: center;
color: #7b858c;
}


/* =========================================
القائمة الجانبية - خاصة بصفحة الخدمات
========================================= */

.system-services-page .dashboard-sidebar {
width: 235px;
min-width: 235px;
min-height: 100vh;

padding: 22px 16px;

background: linear-gradient(
180deg,
#08263a 0%,
#0b3049 100%
);

color: #ffffff;

display: flex;
flex-direction: column;
}

.system-services-page .sidebar-brand {
display: flex;
align-items: center;
gap: 11px;

margin-bottom: 32px;
}

.system-services-page .sidebar-logo {
width: 38px;
height: 38px;

border-radius: 11px;

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

background: #63bda3;
color: #102d3d;

font-size: 18px;
font-weight: 700;
}

.system-services-page .sidebar-brand h2 {
margin: 0 0 3px;

font-size: 18px;
font-weight: 700;
color: #ffffff;
}

.system-services-page .sidebar-brand span {
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
}

.system-services-page .sidebar-nav {
display: flex;
flex-direction: column;
gap: 7px;
}

.system-services-page .sidebar-nav a {
display: block;

padding: 11px 13px;

border-radius: 9px;

color: rgba(255, 255, 255, 0.82);

font-size: 13px;
font-weight: 500;

text-decoration: none;

transition: 0.2s ease;
}

.system-services-page .sidebar-nav a:hover {
background: rgba(255, 255, 255, 0.07);
color: #ffffff;
}

.system-services-page .sidebar-nav a.active {
background: rgba(72, 141, 182, 0.22);
color: #ffffff;
}

.system-services-page .sidebar-user {
margin-top: auto;

padding: 14px;

border-radius: 12px;

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

text-align: right;
}

.system-services-page .sidebar-user strong {
display: block;

margin-bottom: 3px;

font-size: 13px;
color: #ffffff;
}

.system-services-page .sidebar-user span {
display: block;

margin-bottom: 10px;

font-size: 11px;
color: rgba(255, 255, 255, 0.68);
}

.system-services-page .sidebar-user a {
display: block;

padding: 8px 10px;

border-radius: 8px;

background: rgba(255, 255, 255, 0.09);
color: #ffffff;

text-align: center;
text-decoration: none;


font-size: 12px;
}


/* =========================================
Responsive
========================================= */

@media (max-width: 900px) {

.system-services-page .services-stats-grid {
grid-template-columns: 1fr;
}

.system-services-page .services-page-header,
.system-services-page .services-list-header {
flex-direction: column;
align-items: stretch;
}

}
/* تحسين تمركز صفحة الخدمات */

.system-services-page .services-management-content {
max-width: 1180px;
width: 100%;
margin: 0 auto;
padding: 24px 26px 40px;
}

/* تقريب العنوان وزر العودة */
.system-services-page .services-page-header {
padding: 16px 18px;
}

/* جعل زر الإضافة قريب من عنوان الخدمات */
.system-services-page .services-list-header {
flex-direction: row;
align-items: center;
}

.system-services-page .services-add-button {
margin-right: auto;
}

/* تحسين شكل الجدول */
.system-services-page .services-list-card {
box-shadow: 0 4px 18px rgba(20, 40, 55, 0.05);
}

.system-services-page .services-table th,
.system-services-page .services-table td {
padding-top: 12px;
padding-bottom: 12px;
}

/* تصغير بسيط للخط */
.system-services-page .services-page-title h1 {
font-size: 24px;
}

.system-services-page .services-list-header h2 {
font-size: 18px;
}

.system-services-page .services-table td {
font-size: 12px;
}


/* =========================================
Add Service Page
========================================= */

.system-service-add-page {
background: #f5f7f9;
}

.system-service-add-page .dashboard-layout {
display: flex;
min-height: 100vh;
}

/* المحتوى */
.system-service-add-page .service-form-content {
flex: 1;
width: 100%;
max-width: 1050px;
margin: 0 auto;
padding: 26px 30px 45px;
}

/* رأس الصفحة */
.system-service-add-page .service-form-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;

background: #ffffff;
border: 1px solid #e5e9ec;
border-radius: 16px;

padding: 18px 20px;
margin-bottom: 18px;
}

.system-service-add-page .service-form-header h1 {
margin: 0 0 5px;
font-size: 24px;
font-weight: 700;
color: #172832;
}

.system-service-add-page .service-form-header p {
margin: 0;
font-size: 13px;
color: #74808a;
}

/* البطاقة */
.system-service-add-page .service-form-card {
background: #ffffff;
border: 1px solid #e5e9ec;
border-radius: 16px;

padding: 24px;
}

/* توزيع الحقول */
.system-service-add-page .service-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}

.system-service-add-page .service-form-field {
display: flex;
flex-direction: column;
gap: 7px;
}

.system-service-add-page .service-form-field.full-width {
grid-column: 1 / -1;
}

/* العناوين */
.system-service-add-page .service-form-field label {
font-size: 13px;
font-weight: 600;
color: #2a3c46;
}

/* الحقول */
.system-service-add-page .service-form-field input,
.system-service-add-page .service-form-field textarea {
width: 100%;
box-sizing: border-box;

border: 1px solid #dce2e6;
border-radius: 10px;

background: #ffffff;

padding: 11px 12px;

font-size: 13px;
color: #1f3039;

outline: none;

transition: 0.2s ease;
}

.system-service-add-page .service-form-field textarea {
min-height: 110px;
resize: vertical;
}

.system-service-add-page .service-form-field input:focus,
.system-service-add-page .service-form-field textarea:focus {
border-color: #315f7d;
box-shadow: 0 0 0 3px rgba(49, 95, 125, 0.08);
}

/* النص التوضيحي */
.system-service-add-page .service-form-field small {
font-size: 11px;
line-height: 1.6;
color: #818b92;
}

/* خيار نشطة */
.system-service-add-page .service-active-option {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;

width: fit-content;

cursor: pointer;
}

.system-service-add-page .service-active-option input {
width: 16px;
height: 16px;
margin: 0;
}

.system-service-add-page .service-active-option span {
font-size: 13px;
font-weight: 600;
color: #31434d;
}

/* الأزرار */
.system-service-add-page .service-form-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;

margin-top: 24px;
padding-top: 18px;

border-top: 1px solid #edf0f2;
}

.system-service-add-page .service-save-button {
border: 0;
border-radius: 9px;

background: #12364d;
color: #ffffff;

padding: 10px 18px;

font-size: 13px;
font-weight: 600;

cursor: pointer;
}

.system-service-add-page .service-save-button:hover {
background: #0d2b3d;
}

.system-service-add-page .service-cancel-button {
border: 1px solid #dce2e6;
border-radius: 9px;

background: #ffffff;
color: #354852;

padding: 9px 18px;

font-size: 13px;
font-weight: 600;

text-decoration: none;
}

/* السايدبار لنفس هوية صفحة الخدمات */
.system-service-add-page .dashboard-sidebar {
width: 235px;
min-width: 235px;
min-height: 100vh;

padding: 22px 16px;

background: linear-gradient(
180deg,
#08263a 0%,
#0b3049 100%
);

color: #ffffff;

display: flex;
flex-direction: column;
}

.system-service-add-page .sidebar-brand {
display: flex;
align-items: center;


gap: 11px;
margin-bottom: 32px;
}

.system-service-add-page .sidebar-logo {
width: 38px;
height: 38px;

border-radius: 11px;

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

background: #63bda3;
color: #102d3d;

font-weight: 700;
}

.system-service-add-page .sidebar-brand h2 {
margin: 0 0 3px;
font-size: 18px;
color: #ffffff;
}

.system-service-add-page .sidebar-brand span {
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
}

.system-service-add-page .sidebar-nav {
display: flex;
flex-direction: column;
gap: 7px;
}

.system-service-add-page .sidebar-nav a {
padding: 11px 13px;

border-radius: 9px;

color: rgba(255, 255, 255, 0.82);

font-size: 13px;
text-decoration: none;
}

.system-service-add-page .sidebar-nav a:hover,
.system-service-add-page .sidebar-nav a.active {
background: rgba(72, 141, 182, 0.22);
color: #ffffff;
}

.system-service-add-page .sidebar-user {
margin-top: auto;

padding: 14px;

border-radius: 12px;

background: rgba(255, 255, 255, 0.06);
}

.system-service-add-page .sidebar-user strong {
display: block;
margin-bottom: 3px;
font-size: 13px;
color: #ffffff;
}

.system-service-add-page .sidebar-user span {
display: block;
margin-bottom: 10px;

font-size: 11px;
color: rgba(255, 255, 255, 0.68);
}

.system-service-add-page .sidebar-user a {
display: block;

padding: 8px 10px;
border-radius: 8px;

background: rgba(255, 255, 255, 0.09);
color: #ffffff;

text-align: center;
text-decoration: none;

font-size: 12px;
}

@media (max-width: 850px) {

.system-service-add-page .service-form-grid {
grid-template-columns: 1fr;
}

.system-service-add-page .service-form-header {
flex-direction: column;
align-items: stretch;
}

}
/* =========================================
   Service Edit Form
========================================= */

.system-services-content .service-form-card {
    background: #ffffff;
    border: 1px solid #e7ebee;
    border-radius: 18px;
    padding: 28px;
    margin-top: 22px;
    box-shadow: 0 8px 24px rgba(15, 37, 51, 0.05);
}

.system-services-content .service-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;
}

.system-services-content .service-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.system-services-content .service-form-field label {
    font-size: 14px;
    font-weight: 700;
    color: #1d2d38;
}

.system-services-content .service-form-field input,
.system-services-content .service-form-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d9e0e4;
    border-radius: 12px;
    background: #ffffff;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    color: #172832;
    outline: none;
    transition: 0.2s ease;
}

.system-services-content .service-form-field input {
    min-height: 46px;
}

.system-services-content .service-form-field textarea {
    min-height: 130px;
    resize: vertical;
}

.system-services-content .service-form-field input:focus,
.system-services-content .service-form-field textarea:focus {
    border-color: #315f7d;
    box-shadow: 0 0 0 3px rgba(49, 95, 125, 0.08);
}

.system-services-content .service-form-field small {
    color: #7b8992;
    font-size: 12px;
}

.system-services-content .service-description-field {
    margin-top: 22px;
}

.system-services-content .service-active-row {
    margin-top: 22px;
    padding: 16px 18px;
    background: #f8fafb;
    border: 1px solid #e8edef;
    border-radius: 12px;
}

.system-services-content .service-active-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-weight: 600;
}

.system-services-content .service-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.system-services-content .primary-btn,
.system-services-content .secondary-btn {
    min-height: 44px;
    padding: 0 22px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.system-services-content .primary-btn {
    border: none;
    background: #102b3a;
    color: #ffffff;
}

.system-services-content .secondary-btn {
    border: 1px solid #d7dfe3;
    background: #ffffff;
    color: #263944;
}

@media (max-width: 850px) {
    .system-services-content .service-form-grid {
        grid-template-columns: 1fr;
    }
}
.service-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-toggle-form {
    margin: 0;
}

.service-action-btn {
    min-width: 68px;
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.service-action-btn.edit {
    border: 1px solid #cfd8de;
    background: #ffffff;
    color: #315f7d;
}

.service-action-btn.disable {
    border: 1px solid #ead2d2;
    background: #fff7f7;
    color: #9b3d3d;
}

.service-action-btn.enable {
    border: 1px solid #cfe2d5;
    background: #f4fbf6;
    color: #34714a;
}

.service-action-btn:hover {
    transform: translateY(-1px);
}
.modern-payments-toolbar {
    background: #ffffff;
    border: 1px solid #e9edf3;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.payments-toolbar-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.payments-toolbar-top h2 {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.payments-toolbar-top p {
    margin: 0;
    color: #6b7280;
    font-size: 15px;
}

.modern-payments-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
    align-items: end;
}

.payments-filter-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payments-filter-field label {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
}

.payments-filter-field input,
.payments-filter-field select {
    height: 48px;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    padding: 0 14px;
    font-size: 14px;
    background: #fff;
    color: #111827;
    outline: none;
    transition: 0.2s ease;
}

.payments-filter-field input:focus,
.payments-filter-field select:focus {
    border-color: #0f2744;
    box-shadow: 0 0 0 3px rgba(15, 39, 68, 0.08);
}

.payments-filter-actions {
    display: flex;
    align-items: end;
}

.payments-filter-button,
.payments-add-button {
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s ease;
}

.payments-filter-button,
.payments-add-button {
    background: #10263f;
    color: #fff;
}

.payments-filter-button:hover,
.payments-add-button:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.subscriptions-table-section,
.payments-table-section {
    background: #ffffff;
    border: 1px solid #e9edf3;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.payments-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    gap: 16px;
    flex-wrap: wrap;
}

.payments-table-header h2 {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 800;
    color: #111827;
}

.payments-table-header p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

.payments-table-wrap {
    overflow-x: auto;
}

.payments-table {
    width: 100%;
    border-collapse: collapse;
}

.payments-table th {
    background: #f8fafc;
    color: #374151;
    font-size: 14px;
    font-weight: 800;
    padding: 14px 12px;
    border-bottom: 1px solid #e5e7eb;
    text-align: right;
}

.payments-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #111827;
    font-size: 14px;
    vertical-align: middle;
}

.payments-table tr:hover td {
    background: #fcfcfd;
}

.payments-empty-state {
    text-align: center;
    padding: 24px 12px;
    color: #6b7280;
}

.payments-empty-state strong {
    display: block;
    color: #111827;
    margin-bottom: 8px;
    font-size: 16px;
}

.payment-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.payment-status.paid {
    background: #dcfce7;
    color: #166534;
}

.payment-status.overdue {
    background: #fee2e2;
    color: #991b1b;
}

.payment-status.pending {
    background: #fef3c7;
    color: #92400e;
}

.payment-status.review {
    background: #dbeafe;
    color: #1d4ed8;
}

@media (max-width: 992px) {
    .modern-payments-filters {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 640px) {
    .modern-payments-filters {
        grid-template-columns: 1fr;
    }

    .payments-toolbar-top,
    .payments-table-header {
        flex-direction: column;
        align-items: stretch;
    }

    .payments-add-button,
    .payments-filter-button {
        width: 100%;
        text-align: center;
    }
}
.modern-payments-toolbar {
padding: 22px 24px;
}

.payments-toolbar-top {
margin-bottom: 16px;
}

.modern-payments-filters {
margin-top: 10px;
}

.subscriptions-table-section {
margin-top: 20px;
}

.payments-empty-state {
padding: 32px 12px;
}
.subscription-services-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 12px;
}

.subscription-service-option {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border: 1px solid #dfe5e8;
border-radius: 12px;
background: #ffffff;
cursor: pointer;
}

.subscription-service-option input {
width: 18px;
height: 18px;
flex-shrink: 0;
}

.subscription-service-option span {
font-size: 14px;
font-weight: 600;
}
.subscription-services-list {
gap: 8px;
}

.subscription-service-option {
min-height: 42px;
padding: 7px 10px;
border-radius: 9px;
}

.subscription-service-option input {
width: 15px;
height: 15px;
}

.subscription-service-option span {
font-size: 13px;
}
/* تصغير صفحة إضافة الاشتراك بالكامل */

.add-payment-card {
padding: 20px 24px !important;
}

.add-payment-form {
gap: 14px !important;
}

.add-payment-grid {
gap: 14px 18px !important;
}

.add-payment-field {
margin: 0 !important;
gap: 5px !important;
}

.add-payment-field label {
margin-bottom: 4px !important;
font-size: 14px !important;
}

.add-payment-field input,
.add-payment-field select {
min-height: 40px !important;
height: 40px !important;
padding: 7px 10px !important;
}

/* الخدمات */
.subscription-services-list {
gap: 6px 10px !important;
margin-top: 6px !important;
margin-bottom: 8px !important;
}

.subscription-service-option {
min-height: 38px !important;
height: 38px !important;
padding: 5px 10px !important;
margin: 0 !important;
}

.subscription-service-option input[type="checkbox"] {
width: 15px !important;
height: 15px !important;
}

.subscription-service-option span {
font-size: 13px !important;
}

/* تصغير مربع الاشتراك نشط */
.add-payment-checkbox-field {
min-height: 40px !important;
padding: 5px 0 !important;
}

.add-payment-checkbox-field input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
}

/* الأزرار */
.add-payment-actions {
margin-top: 12px !important;
gap: 8px !important;
}

.payment-save-button,
.payment-cancel-button {
padding: 9px 16px !important;
min-height: 38px !important;
}
/* تقليل الفراغ الكبير داخل نموذج إضافة الاشتراك */

.add-payment-grid {
align-items: start !important;
row-gap: 12px !important;
}

.add-payment-field {
min-height: auto !important;
}

/* منع قسم الخدمات من تمديد الصف بالكامل */
.subscription-services-list {
align-self: start !important;
}

/* تقريب دورة السداد من الجهة */
.add-payment-grid > .add-payment-field {
margin-top: 0 !important;
margin-bottom: 0 !important;
}

/* ترتيب الاشتراك نشط: النص والمربع جنب بعض */
.add-payment-checkbox-field {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
min-height: 36px !important;
}

.add-payment-checkbox-field .subscription-active-option {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
width: auto !important;
}

.add-payment-checkbox-field input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
margin: 0 !important;
}
.services-column {
    align-self: start;
}

.services-column .subscription-services-list {
    gap: 8px;
}

.services-column .subscription-service-option {
    min-height: 38px;
    padding: 7px 12px;
}
.add-payment-checkbox-field {
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 8px;
}

.subscription-active-option {
display: flex;
align-items: center;
gap: 7px;
margin: 0;
}

.add-payment-actions {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.payment-service-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
}

.payment-service-row strong {
margin: 0;
}

.payment-service-row span {
white-space: nowrap;
}
.support-assignment-card {
    background: #ffffff;
    border: 1px solid #e5e9ec;
    border-radius: 16px;
    padding: 24px;
    margin-top: 20px;
}

.support-assignment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.support-assignment-header h3 {
    margin: 0 0 5px;
    font-size: 20px;
}

.support-assignment-header span {
    font-size: 14px;
    color: #7a858d;
}

.support-assignment-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.support-assignment-service {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border: 1px solid #e3e7ea;
    border-radius: 10px;
    cursor: pointer;
}

.support-assignment-service input {
    width: 16px;
    height: 16px;
}

.support-assignment-footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 22px;
}

.support-assignment-save-button {
    border: 0;
    border-radius: 9px;
    padding: 10px 20px;
    background: #263b48;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}

.support-assignment-save-button:hover {
    opacity: 0.9;
}
.system-support-assignment-card {
    margin-top: 18px;
}

.support-assignment-card {
    background: #ffffff;
    border: 1px solid #e4e8eb;
    border-radius: 16px;
    padding: 22px;
    margin-top: 18px;
}

.support-assignment-header {
    margin-bottom: 18px;
}

.support-assignment-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
}

.support-assignment-service {
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid #e5e8ea;
    border-radius: 10px;
}

.support-assignment-footer {
    margin-top: 16px;
}

.support-assignment-save-button {
    min-width: 120px;
}
.support-assignment-list {

    margin-top: 12px;

}

.support-assignment-card {

    margin-top: 10px;

}