/* ================================================================
   Employee Self Service Portal — Enhanced UI v2
   Primary: #590046 | Responsive: Mobile + Desktop
   Bilingual: Arabic (RTL) + English (LTR) compatible
   ================================================================ */

:root {
    --brand:       #590046;
    --brand-dark:  #3d002f;
    --brand-mid:   #7a0060;
    --brand-light: #fdf2fb;
    --brand-pale:  #f0d6eb;
    --white:       #ffffff;
    --gray-100:    #f4f6f8;
    --gray-200:    #e9ecef;
    --gray-400:    #ced4da;
    --gray-600:    #6c757d;
    --gray-800:    #343a40;
    --shadow-sm:   0 2px 8px rgba(89,0,70,0.07);
    --shadow-md:   0 4px 20px rgba(89,0,70,0.12);
    --shadow-lg:   0 8px 32px rgba(89,0,70,0.18);
    --radius:      14px;
    --radius-sm:   9px;
    --transition:  0.25s ease;
}

/* ── Keyframe Animations ────────────────────────────────────── */
@keyframes shimmer {
    0%   { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(250%)  skewX(-15deg); }
}
@keyframes slideInUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseBadge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,193,7,0.5); }
    50%       { box-shadow: 0 0 0 5px rgba(255,193,7,0); }
}
@keyframes pulseBadgeBlue {
    0%, 100% { box-shadow: 0 0 0 0 rgba(13,110,253,0.4); }
    50%       { box-shadow: 0 0 0 5px rgba(13,110,253,0); }
}
@keyframes iconBounce {
    0%, 100% { transform: translateX(0); }
    50%       { transform: translateX(4px); }
}

/* ── Page ───────────────────────────────────────────────────── */
body.o_portal { background: var(--gray-100) !important; }

/* Hide "Addresses" and "Connection & Security" from portal home */
#portal_common_category { display: none !important; }

/* ── Breadcrumbs ─────────────────────────────────────────────── */
.o_portal_submenu {
    background: linear-gradient(135deg, var(--brand), var(--brand-mid)) !important;
    border-radius: 0 !important;
    padding: 12px 24px !important;
    margin-bottom: 0 !important;
}
.o_portal_submenu .breadcrumb { margin-bottom: 0; }
.o_portal_submenu .breadcrumb-item a,
.o_portal_submenu .breadcrumb-item,
.o_portal_submenu .breadcrumb-item.active { color: rgba(255,255,255,0.9) !important; font-weight: 500; }
.o_portal_submenu .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.5) !important; }
.o_portal_submenu .breadcrumb-item a:hover { color: white !important; }

/* ── Search bar ──────────────────────────────────────────────── */
.o_searchbar_form.o_portal_searchbar {
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--white);
    padding: 12px 20px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}

/* ── Portal Home cards ───────────────────────────────────────── */
.o_portal_docs .o_portal_doc_entry,
#portal_client_category .o_portal_doc_entry {
    background: var(--white) !important;
    border: none !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: var(--transition) !important;
    position: relative !important;
    padding: 22px 20px 22px 28px !important;
    overflow: hidden !important;
}
.o_portal_docs .o_portal_doc_entry::before,
#portal_client_category .o_portal_doc_entry::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 5px; height: 100%;
    background: linear-gradient(180deg, var(--brand), var(--brand-mid));
}
.o_portal_docs .o_portal_doc_entry:hover,
#portal_client_category .o_portal_doc_entry:hover {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-3px) !important;
}
.o_portal_docs .o_portal_doc_entry h5,
#portal_client_category .o_portal_doc_entry h5 { color: var(--brand) !important; font-weight: 700; }

/* RTL home card accent */
html[dir="rtl"] .o_portal_docs .o_portal_doc_entry::before,
html[dir="rtl"] #portal_client_category .o_portal_doc_entry::before { left: auto; right: 0; }

/* ── Tables ──────────────────────────────────────────────────── */
.o_portal_my_doc_table {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: none;
    margin-bottom: 0;
}
.o_portal_my_doc_table thead tr {
    background: linear-gradient(135deg, var(--brand), var(--brand-mid)) !important;
}
.o_portal_my_doc_table thead th {
    border: none !important;
    padding: 14px 16px;
    font-weight: 600;
    font-size: 0.88rem;
    color: white !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.o_portal_my_doc_table tbody tr {
    transition: background var(--transition), transform 0.2s ease, box-shadow 0.2s ease;
}
.o_portal_my_doc_table tbody tr:hover {
    background: var(--brand-light) !important;
    transform: translateX(-3px);
    box-shadow: 2px 0 12px rgba(89,0,70,0.08);
}
html[dir="rtl"] .o_portal_my_doc_table tbody tr:hover { transform: translateX(3px); }
.o_portal_my_doc_table tbody td {
    padding: 12px 16px;
    border-color: var(--gray-200) !important;
    vertical-align: middle;
    color: var(--gray-800);
}
.o_portal_my_doc_table tbody a { color: var(--brand); font-weight: 600; }
.table-responsive {
    border-radius: var(--radius);
    overflow: clip;
    box-shadow: var(--shadow-sm);
    scrollbar-width: thin;
    scrollbar-color: var(--brand-pale) transparent;
}
.table-responsive::-webkit-scrollbar { height: 5px; }
.table-responsive::-webkit-scrollbar-thumb { background: var(--brand-pale); border-radius: 10px; }
.o_portal_my_doc_table { margin-bottom: 0 !important; }
.o_portal_my_doc_table tbody tr:hover { background: var(--brand-light); }
.o_portal_my_doc_table tbody td { border-color: var(--gray-200) !important; vertical-align: middle; }

/* ── Buttons — Base ──────────────────────────────────────────── */
.btn-primary {
    background: linear-gradient(135deg, var(--brand), var(--brand-mid)) !important;
    border-color: var(--brand) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
    position: relative;
    overflow: hidden;
}
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
    transform: skewX(-15deg);
}
.btn-primary:hover::after { animation: shimmer 0.6s ease forwards; }
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand)) !important;
    border-color: var(--brand-dark) !important;
    box-shadow: 0 4px 18px rgba(89,0,70,0.35) !important;
    transform: translateY(-2px);
}
.btn-primary .fa { transition: transform 0.2s ease; }
.btn-primary:hover .fa { transform: scale(1.2); }

.btn-danger { border-radius: var(--radius-sm) !important; font-weight: 600 !important; transition: var(--transition) !important; }

.btn-outline-primary {
    color: var(--brand) !important;
    border-color: var(--brand) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    padding: 4px 10px !important;
    background: transparent !important;
    transition: var(--transition) !important;
    position: relative; overflow: hidden;
}
.btn-outline-primary:hover { background: var(--brand) !important; color: white !important; box-shadow: 0 3px 12px rgba(89,0,70,0.3) !important; }
.btn-outline-primary .fa { transition: transform 0.2s ease; }
.btn-outline-primary:hover .fa { transform: scale(1.15) rotate(-5deg); }

.btn-outline-danger {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    padding: 4px 10px !important;
    background: transparent !important;
    transition: var(--transition) !important;
    position: relative; overflow: hidden;
}
.btn-outline-danger:hover { background: #dc3545 !important; color: white !important; box-shadow: 0 3px 12px rgba(220,53,69,0.3) !important; }

.portal-action-btn { margin: 2px !important; }

@media (min-width: 769px) {
    .portal-action-btn { font-size: 0.82rem !important; padding: 5px 12px !important; border-width: 1.5px !important; letter-spacing: 0.01em; }
    a.portal-action-btn.btn-outline-primary { color: var(--brand) !important; border-color: var(--brand) !important; }
    a.portal-action-btn.btn-outline-primary:hover { background: var(--brand) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(89,0,70,0.3) !important; }
    a.portal-action-btn.btn-outline-danger { color: #dc3545 !important; border-color: #dc3545 !important; }
    a.portal-action-btn.btn-outline-danger:hover { background: #dc3545 !important; color: #fff !important; box-shadow: 0 3px 10px rgba(220,53,69,0.3) !important; }
}
.btn-lg { padding: 10px 28px !important; }

/* ── Action Buttons (طلب جديد / Back) ────────────────────────── */
.portal-action-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.portal-btn-new {
    flex: 1;
    text-align: center;
    font-size: 1rem !important;
    padding: 12px 20px !important;
    min-width: 160px;
}
.portal-btn-new .fa { margin-inline-end: 6px; }
.portal-btn-new:hover .fa { animation: iconBounce 0.4s ease; }

.portal-btn-back {
    flex: 1;
    text-align: center;
    color: var(--brand) !important;
    border: 2px solid var(--brand) !important;
    background: transparent !important;
    border-radius: var(--radius-sm) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    min-width: 160px;
    transition: var(--transition) !important;
    position: relative; overflow: hidden;
}
.portal-btn-back::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 100%;
    background: var(--brand);
    transition: width 0.3s ease;
    z-index: 0;
}
.portal-btn-back span, .portal-btn-back .fa { position: relative; z-index: 1; }
.portal-btn-back:hover::before { width: 100%; }
.portal-btn-back:hover { color: white !important; }

/* ── Leave Balance Cards ─────────────────────────────────────── */
.portal-balance-section { margin: 0 0 20px 0; }
.portal-balance-section h5 {
    color: var(--brand);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--brand-pale);
    display: flex;
    align-items: center;
    gap: 8px;
}
.portal-balance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
@media (min-width: 769px) {
    .portal-balance-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
}

/* Per-card unique colors */
.portal-leave-card:nth-child(1)  { --c:#590046; --cl:#fdf0f9; --cb:#e8c8e0; }
.portal-leave-card:nth-child(2)  { --c:#0d6efd; --cl:#e8f0fe; --cb:#c5d9fd; }
.portal-leave-card:nth-child(3)  { --c:#198754; --cl:#e8f5ef; --cb:#b8dfc9; }
.portal-leave-card:nth-child(4)  { --c:#e05d1a; --cl:#fdf0e8; --cb:#f8d4b4; }
.portal-leave-card:nth-child(5)  { --c:#6610f2; --cl:#efe8fd; --cb:#d0b8fb; }
.portal-leave-card:nth-child(6)  { --c:#0dcaf0; --cl:#e0f8fd; --cb:#b0ecf8; }
.portal-leave-card:nth-child(7)  { --c:#d63384; --cl:#fde8f3; --cb:#f8b8d8; }
.portal-leave-card:nth-child(8)  { --c:#20c997; --cl:#e6faf4; --cb:#b0ecd8; }
.portal-leave-card:nth-child(9)  { --c:#fd7e14; --cl:#fef3e8; --cb:#fdd4a0; }
.portal-leave-card:nth-child(10) { --c:#6f42c1; --cl:#f0ecfd; --cb:#d4c4f8; }

.portal-leave-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 20px 14px 16px;
    text-align: center;
    border-top: 5px solid var(--c, var(--brand));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
/* Shimmer overlay on card */
.portal-leave-card::before {
    content: '';
    position: absolute;
    top: 0; left: -70%;
    width: 45%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-15deg);
    transition: none;
}
.portal-leave-card:hover::before { animation: shimmer 0.7s ease forwards; }
.portal-leave-card::after {
    content: '';
    position: absolute;
    bottom: -25px; right: -25px;
    width: 80px; height: 80px;
    background: var(--cl, var(--brand-light));
    border-radius: 50%;
    opacity: 0.7;
}
.portal-leave-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px) scale(1.02); }
.portal-leave-card a { text-decoration: none !important; color: inherit !important; display: block; }
.portal-leave-card .leave-icon {
    width: 54px; height: 54px;
    background: var(--cl, var(--brand-light));
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
    transition: var(--transition);
    border: 2px solid var(--cb, var(--brand-pale));
    position: relative; z-index: 1;
}
.portal-leave-card:hover .leave-icon { background: var(--c, var(--brand)); border-color: var(--c, var(--brand)); transform: rotate(-8deg) scale(1.1); }
.portal-leave-card:hover .leave-icon .fa { color: white; }
.portal-leave-card .leave-icon .fa { color: var(--c, var(--brand)); font-size: 22px; transition: var(--transition); }
.portal-leave-card .leave-days {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--c, var(--brand));
    line-height: 1;
    letter-spacing: -1px;
    position: relative; z-index: 1;
}
.portal-leave-card .leave-name {
    color: var(--gray-600);
    font-size: 0.78rem;
    margin-top: 6px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    position: relative; z-index: 1;
}
@media (min-width: 769px) {
    .portal-leave-card { padding: 28px 20px 22px; }
    .portal-leave-card .leave-icon { width: 70px; height: 70px; }
    .portal-leave-card .leave-icon .fa { font-size: 28px; }
    .portal-leave-card .leave-days { font-size: 3rem; }
    .portal-leave-card .leave-name { font-size: 0.85rem; margin-top: 8px; }
}

/* ── Leave Type Row tinting ───────────────────────────────────── */
.leave-type-bg-1  { background: rgba(89,  0,   70,  0.06) !important; }
.leave-type-bg-2  { background: rgba(13,  110, 253, 0.06) !important; }
.leave-type-bg-3  { background: rgba(25,  135, 84,  0.06) !important; }
.leave-type-bg-4  { background: rgba(224, 93,  26,  0.06) !important; }
.leave-type-bg-5  { background: rgba(102, 16,  242, 0.06) !important; }
.leave-type-bg-6  { background: rgba(13,  202, 240, 0.06) !important; }
.leave-type-bg-7  { background: rgba(214, 51,  132, 0.06) !important; }
.leave-type-bg-8  { background: rgba(32,  201, 151, 0.06) !important; }
.leave-type-bg-9  { background: rgba(253, 126, 20,  0.06) !important; }
.leave-type-bg-10 { background: rgba(111, 66,  193, 0.06) !important; }

.o_portal_my_doc_table tbody tr.leave-type-bg-1:hover  { background: rgba(89,  0,   70,  0.12) !important; }
.o_portal_my_doc_table tbody tr.leave-type-bg-2:hover  { background: rgba(13,  110, 253, 0.12) !important; }
.o_portal_my_doc_table tbody tr.leave-type-bg-3:hover  { background: rgba(25,  135, 84,  0.12) !important; }
.o_portal_my_doc_table tbody tr.leave-type-bg-4:hover  { background: rgba(224, 93,  26,  0.12) !important; }
.o_portal_my_doc_table tbody tr.leave-type-bg-5:hover  { background: rgba(102, 16,  242, 0.12) !important; }
.o_portal_my_doc_table tbody tr.leave-type-bg-6:hover  { background: rgba(13,  202, 240, 0.12) !important; }
.o_portal_my_doc_table tbody tr.leave-type-bg-7:hover  { background: rgba(214, 51,  132, 0.12) !important; }
.o_portal_my_doc_table tbody tr.leave-type-bg-8:hover  { background: rgba(32,  201, 151, 0.12) !important; }
.o_portal_my_doc_table tbody tr.leave-type-bg-9:hover  { background: rgba(253, 126, 20,  0.12) !important; }
.o_portal_my_doc_table tbody tr.leave-type-bg-10:hover { background: rgba(111, 66,  193, 0.12) !important; }

/* ── Status Badges ───────────────────────────────────────────── */
.portal-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.portal-status-draft    { background: #e9ecef; color: #495057; border: 1px solid #dee2e6; }
.portal-status-confirm  { background: #fff3cd; color: #856404; border: 1px solid #ffc107; animation: pulseBadge 2s infinite; }
.portal-status-validate1 { background: #cce5ff; color: #004085; border: 1px solid #b8daff; animation: pulseBadgeBlue 2s infinite; }
.portal-status-validate  { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.portal-status-refuse    { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* Row left-border accent by state */
tr.leave-row-draft     > td:first-child { border-left: 4px solid #adb5bd !important; }
tr.leave-row-confirm   > td:first-child { border-left: 4px solid #ffc107 !important; }
tr.leave-row-validate1 > td:first-child { border-left: 4px solid #0d6efd !important; }
tr.leave-row-validate  > td:first-child { border-left: 4px solid #198754 !important; }
tr.leave-row-refuse    > td:first-child { border-left: 4px solid #dc3545 !important; }
tr.leave-row-refuse td { opacity: 0.8; }

/* RTL border flip */
html[dir="rtl"] tr.leave-row-draft     > td:first-child { border-left: none !important; border-right: 4px solid #adb5bd !important; }
html[dir="rtl"] tr.leave-row-confirm   > td:first-child { border-left: none !important; border-right: 4px solid #ffc107 !important; }
html[dir="rtl"] tr.leave-row-validate1 > td:first-child { border-left: none !important; border-right: 4px solid #0d6efd !important; }
html[dir="rtl"] tr.leave-row-validate  > td:first-child { border-left: none !important; border-right: 4px solid #198754 !important; }
html[dir="rtl"] tr.leave-row-refuse    > td:first-child { border-left: none !important; border-right: 4px solid #dc3545 !important; }

/* ── Form ────────────────────────────────────────────────────── */
.shadow.p-5 { border-radius: var(--radius) !important; box-shadow: var(--shadow-md) !important; background: var(--white); }
.form-control { border-radius: var(--radius-sm) !important; border-color: var(--gray-400) !important; transition: var(--transition) !important; }
.form-control:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(89,0,70,0.12) !important; }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert { border-radius: var(--radius-sm) !important; border: none !important; }
.alert-danger { background: #fce8ea !important; color: #721c24 !important; }
.alert-success { background: #d4f0db !important; color: #155724 !important; }

/* ── Leave detail card ───────────────────────────────────────── */
#leave_content .card, #portal_leave_content {
    border: none !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-md) !important;
}
.card-header.bg-white { border-bottom: 2px solid var(--brand-pale) !important; padding: 18px 24px !important; }
.card-header h2, #introduction h2 { color: var(--brand) !important; font-weight: 700; }
#details h3 { color: var(--brand-mid); font-weight: 700; border-bottom: 1px solid var(--brand-pale); padding-bottom: 8px; }

/* ── Season warning ──────────────────────────────────────────── */
.portal-season-warning {
    background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 16px; border-left: 4px solid #ffc107; margin-bottom: 16px;
}
html[dir="rtl"] .portal-season-warning { border-left: none; border-right: 4px solid #ffc107; }
.portal-season-warning h6 { color: #856404; font-weight: 700; margin-bottom: 8px; }

/* ── RTL misc fixes ────────────────────────────────────────────── */
html[lang^="ar"] .float-left,  html[dir="rtl"] .float-left  { float: right !important; }
html[lang^="ar"] .float-right, html[dir="rtl"] .float-right { float: left !important; }

/* ================================================================
   MOBILE — Card Style (≤768px)
   ================================================================ */
@media (max-width: 768px) {
    /* Balance cards: 2 columns */
    .portal-balance-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .portal-leave-card { padding: 16px 10px 12px; }
    .portal-leave-card .leave-days { font-size: 1.8rem; }
    .portal-leave-card .leave-name { font-size: 0.72rem; }
    .portal-leave-card .leave-icon { width: 46px; height: 46px; }
    .portal-leave-card .leave-icon .fa { font-size: 18px; }

    /* Action buttons: stacked full width */
    .portal-action-buttons { flex-direction: column; gap: 8px; margin-bottom: 10px !important; }
    .portal-btn-new, .portal-btn-back { width: 100% !important; min-width: unset; text-align: center; }

    .table-responsive { margin-top: 0 !important; }
    .o_portal_my_doc_table { margin-top: 0 !important; }
    .portal-balance-section { margin-bottom: 10px !important; }

    /* Fix hardcoded 400px margins */
    div[style*="margin-right:400px"], div[style*="margin-left:400px"] {
        margin-right: 0 !important; margin-left: 0 !important; padding: 0 8px !important;
    }

    /* ── Leave rows → card style ── */
    .o_portal_my_doc_table thead { display: none !important; }
    .o_portal_my_doc_table tbody tr {
        display: block !important;
        background: var(--white);
        border-radius: var(--radius-sm);
        margin-bottom: 14px;
        box-shadow: var(--shadow-sm);
        padding: 14px;
        border-right: 5px solid var(--brand-pale) !important;
        border-left: none !important;
        border-top: none !important;
        border-bottom: none !important;
        animation: slideInUp 0.35s ease both;
    }
    /* Staggered entrance */
    .o_portal_my_doc_table tbody tr:nth-child(1)  { animation-delay: 0.04s; }
    .o_portal_my_doc_table tbody tr:nth-child(2)  { animation-delay: 0.08s; }
    .o_portal_my_doc_table tbody tr:nth-child(3)  { animation-delay: 0.12s; }
    .o_portal_my_doc_table tbody tr:nth-child(4)  { animation-delay: 0.16s; }
    .o_portal_my_doc_table tbody tr:nth-child(5)  { animation-delay: 0.20s; }
    .o_portal_my_doc_table tbody tr:nth-child(6)  { animation-delay: 0.24s; }
    .o_portal_my_doc_table tbody tr:nth-child(7)  { animation-delay: 0.28s; }
    .o_portal_my_doc_table tbody tr:nth-child(8)  { animation-delay: 0.32s; }
    .o_portal_my_doc_table tbody tr:nth-child(9)  { animation-delay: 0.36s; }
    .o_portal_my_doc_table tbody tr:nth-child(10) { animation-delay: 0.40s; }

    /* State colors */
    .o_portal_my_doc_table tbody tr.leave-row-validate  { border-right-color: #198754 !important; background: #f8fff9; }
    .o_portal_my_doc_table tbody tr.leave-row-confirm   { border-right-color: #ffc107 !important; background: #fffef0; }
    .o_portal_my_doc_table tbody tr.leave-row-validate1 { border-right-color: #0d6efd !important; background: #f0f5ff; }
    .o_portal_my_doc_table tbody tr.leave-row-refuse    { border-right-color: #dc3545 !important; background: #fff5f5; opacity: 0.85; }
    .o_portal_my_doc_table tbody tr.leave-row-draft     { border-right-color: #adb5bd !important; }

    /* ── Employee name → card title (displayed as header, no label) ── */
    .o_portal_my_doc_table tbody td[data-label="الموظف"],
    .o_portal_my_doc_table tbody td[data-label-en="Employee"] {
        display: block !important;
        text-align: center !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: var(--brand) !important;
        padding: 0 0 10px 0 !important;
        border-bottom: 2px solid var(--brand-pale) !important;
        border-top: none !important;
        margin-bottom: 6px;
    }
    .o_portal_my_doc_table tbody td[data-label="الموظف"]::before,
    .o_portal_my_doc_table tbody td[data-label-en="Employee"]::before { display: none !important; }
    .o_portal_my_doc_table tbody td[data-label="الموظف"] a,
    .o_portal_my_doc_table tbody td[data-label-en="Employee"] a {
        font-size: 1rem !important; font-weight: 700 !important; color: var(--brand) !important;
    }

    /* ── Description: hidden on mobile (private_name is auto-generated noise) ── */
    .o_portal_my_doc_table tbody td[data-label="الوصف"],
    .o_portal_my_doc_table tbody td[data-label-en="Description"] { display: none !important; }

    /* ── td as key-value — stacked: label on top, value full width ── */
    .o_portal_my_doc_table tbody td {
        display: block !important;
        padding: 7px 4px !important;
        border: none !important;
        border-bottom: 1px solid var(--gray-200) !important;
        font-size: 0.88rem;
    }
    .o_portal_my_doc_table tbody td:last-child { border-bottom: none !important; }
    .o_portal_my_doc_table tbody td.portal-td-empty { display: none !important; }

    /* Label — small header above the value */
    .o_portal_my_doc_table tbody td[data-label]::before {
        content: attr(data-label) " :";
        display: block;
        font-weight: 700;
        color: var(--brand);
        font-size: 0.72rem;
        text-align: right;
        margin-bottom: 2px;
    }

    /* Value — full width */
    .o_portal_my_doc_table tbody td > * {
        display: block;
        width: 100%;
        text-align: right;
        word-break: break-word;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    /* ── Status badge td — centered ── */
    .o_portal_my_doc_table tbody td.portal-td-status {
        text-align: center !important;
        padding: 10px 4px !important;
        border-bottom: none !important;
    }
    .o_portal_my_doc_table tbody td.portal-td-status .portal-status-badge {
        font-size: 0.85rem; padding: 6px 18px;
    }
    .o_portal_my_doc_table tbody td.portal-td-status::before { display: none !important; }

    /* ── Action buttons td ── */
    .o_portal_my_doc_table tbody td.portal-td-actions {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 8px;
        padding-top: 8px;
        border-bottom: none !important;
    }
    .o_portal_my_doc_table tbody td.portal-td-actions a {
        flex: 1; text-align: center; font-size: 0.85rem !important; padding: 7px 4px !important;
    }
    .o_portal_my_doc_table tbody td.portal-td-actions::before { display: none !important; }

    /* Leave type bg tinted borders on mobile */
    .o_portal_my_doc_table tbody tr.leave-type-bg-1  { border-right-color: #590046 !important; background: rgba(89,  0,   70,  0.06) !important; }
    .o_portal_my_doc_table tbody tr.leave-type-bg-2  { border-right-color: #0d6efd !important; background: rgba(13,  110, 253, 0.06) !important; }
    .o_portal_my_doc_table tbody tr.leave-type-bg-3  { border-right-color: #198754 !important; background: rgba(25,  135, 84,  0.06) !important; }
    .o_portal_my_doc_table tbody tr.leave-type-bg-4  { border-right-color: #e05d1a !important; background: rgba(224, 93,  26,  0.06) !important; }
    .o_portal_my_doc_table tbody tr.leave-type-bg-5  { border-right-color: #6610f2 !important; background: rgba(102, 16,  242, 0.06) !important; }
    .o_portal_my_doc_table tbody tr.leave-type-bg-6  { border-right-color: #0dcaf0 !important; background: rgba(13,  202, 240, 0.06) !important; }
    .o_portal_my_doc_table tbody tr.leave-type-bg-7  { border-right-color: #d63384 !important; background: rgba(214, 51,  132, 0.06) !important; }
    .o_portal_my_doc_table tbody tr.leave-type-bg-8  { border-right-color: #20c997 !important; background: rgba(32,  201, 151, 0.06) !important; }
    .o_portal_my_doc_table tbody tr.leave-type-bg-9  { border-right-color: #fd7e14 !important; background: rgba(253, 126, 20,  0.06) !important; }
    .o_portal_my_doc_table tbody tr.leave-type-bg-10 { border-right-color: #6f42c1 !important; background: rgba(111, 66,  193, 0.06) !important; }

    /* Form */
    .shadow.p-5 { padding: 16px 12px !important; }
    .btn-lg { width: 100%; margin-bottom: 8px; }
    .col-6.text-center[style*="float"] { float: none !important; width: 100% !important; }
}

@media (max-width: 480px) {
    .portal-balance-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .portal-leave-card { padding: 12px 8px; }
    .portal-leave-card .leave-days { font-size: 1.5rem; }
}

/* Mobile hotfix: prevent desktop column widths from leaving empty space in leave cards */
@media (max-width: 768px) {
    .o_portal_my_doc_table,
    .o_portal_my_doc_table tbody,
    .o_portal_my_doc_table tbody tr,
    .o_portal_my_doc_table tbody td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .o_portal_my_doc_table {
        table-layout: fixed !important;
    }

    .o_portal_my_doc_table tbody tr {
        overflow: hidden !important;
    }
}