:root{
    --primary:#1b6ec2; --bg:#f4f6f9; --sidebar:#1f2d3d; --sidebar-hover:#2c3e50;
    --border:#e5e8ee; --text:#2a2f3a;
}
*{box-sizing:border-box}
body{font-family:'Cairo',sans-serif;background:var(--bg);color:var(--text);margin:0}
.ltr{direction:ltr;text-align:right;unicode-bidi:plaintext}

/* ===== Layout ===== */
.app-wrapper{display:flex;min-height:100vh}
.app-sidebar{width:250px;background:var(--sidebar);color:#cdd6e0;flex-shrink:0;
    position:fixed;inset-inline-start:0;top:0;bottom:0;overflow-y:auto;z-index:1040;transition:.25s}
.app-main{flex:1;margin-inline-start:250px;display:flex;flex-direction:column;min-width:0}
.sidebar-brand{display:flex;align-items:center;gap:.6rem;padding:1.1rem 1.25rem;font-size:1.2rem;
    font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-brand i{color:#4da3ff;font-size:1.5rem}
.sidebar-nav{padding:.75rem 0}
.sidebar-nav .nav-link{display:flex;align-items:center;gap:.65rem;padding:.65rem 1.25rem;color:#cdd6e0;
    text-decoration:none;font-size:.95rem;border-inline-start:3px solid transparent}
.sidebar-nav .nav-link:hover{background:var(--sidebar-hover);color:#fff}
.sidebar-nav .nav-link i{width:20px;text-align:center}
.nav-section{padding:.75rem 1.25rem .25rem;font-size:.72rem;color:#7f8fa4;letter-spacing:1px;text-transform:uppercase}

.topbar{background:#fff;height:60px;display:flex;align-items:center;gap:.75rem;padding:0 1.25rem;
    border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1030}
.topbar-title{font-weight:600}
.app-content{padding:1.5rem;flex:1}

.page-head{margin-bottom:1.25rem}
.page-head h3{font-weight:700;font-size:1.4rem}

/* ===== Cards / stats ===== */
.card{border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 3px rgba(20,30,50,.04)}
.stat-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem;
    display:flex;align-items:center;gap:.9rem;height:100%}
.stat-ico{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.stat-num{font-size:1.6rem;font-weight:700;line-height:1}
.stat-lbl{color:#6b7588;font-size:.85rem}

/* ===== File tabs (segmented style) ===== */
.file-tabs{
    --ft-primary:#1b6ec2;
    border:1px solid var(--border);
    background:#eef2f7;
    padding:.4rem;
    border-radius:14px;
    gap:.3rem;
    flex-wrap:wrap;
    box-shadow:inset 0 1px 2px rgba(20,30,50,.04);
}
.file-tabs .nav-item{ margin:0; }
.file-tabs .nav-link{
    display:inline-flex; align-items:center; gap:.45rem;
    color:#51607a; font-weight:600; font-size:.9rem;
    border:none; border-radius:10px;
    padding:.55rem .95rem; margin:0;
    white-space:nowrap; transition:all .18s ease;
}
.file-tabs .nav-link i{ margin:0; font-size:1.05rem; opacity:.8; transition:inherit; }
.file-tabs .nav-link:hover{
    color:var(--ft-primary); background:#e1e9f3;
}
.file-tabs .nav-link:hover i{ opacity:1; }
.file-tabs .nav-link.active,
.file-tabs .nav-link.active:hover{
    color:#fff;
    background:linear-gradient(135deg,#2b7fd4,#155ba3);
    box-shadow:0 4px 12px rgba(27,110,194,.30);
}
.file-tabs .nav-link.active i{ opacity:1; }

@media (max-width:576px){
    .file-tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
        scrollbar-width:none; }
    .file-tabs::-webkit-scrollbar{ display:none; }
    .file-tabs .nav-link{ padding:.5rem .8rem; font-size:.85rem; }
}

/* ===== Data grid ===== */
.data-grid .data-row{padding:.85rem 1rem;border-bottom:1px solid var(--border)}
.data-grid .data-row:nth-child(odd){border-inline-end:1px solid var(--border)}
.data-label{font-size:.8rem;color:#8a93a6;margin-bottom:.2rem}
.data-value{font-weight:600}

/* ===== Timeline ===== */
.timeline{list-style:none;margin:0;padding:.5rem 0}
.timeline li{position:relative;padding:0 1.5rem 1.1rem;border-inline-start:2px solid var(--border);margin-inline-start:.5rem}
.timeline .t-dot{position:absolute;inset-inline-start:-7px;top:3px;width:12px;height:12px;border-radius:50%;
    background:var(--primary);border:2px solid #fff}

/* ===== Permissions ===== */
.perm-group{background:#fafbfc;border:1px solid var(--border);border-radius:10px;padding:.75rem .9rem;height:100%}
.perm-group-title{font-weight:700;font-size:.9rem;margin-bottom:.5rem;color:var(--primary)}
.field-perm-table th{background:#fafbfc}

/* ===== Login ===== */
.login-page{background:linear-gradient(135deg,#1f2d3d,#1b6ec2);min-height:100vh;display:flex;
    align-items:center;justify-content:center;font-family:'Cairo',sans-serif}
.login-card{background:#fff;border-radius:16px;padding:2.2rem;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login-brand{text-align:center;margin-bottom:1.5rem}
.login-brand i{font-size:2.5rem;color:var(--primary)}
.login-brand h4{font-weight:700;margin:.5rem 0 .2rem;font-size:1.15rem}
.login-brand p{color:#8a93a6;margin:0}

.copy-btn{padding:.1rem .4rem;line-height:1}

@media(max-width:991px){
    .app-sidebar{inset-inline-start:-260px}
    .app-sidebar.show{inset-inline-start:0}
    .app-main{margin-inline-start:0}
}

/* ===== مجموعة الاختيار المتعدد (الأنشطة / التصنيفات) ===== */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    max-height: 180px;
    overflow-y: auto;
    background: #fff;
}
.chip-group .chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: .3rem .7rem;
    border: 1px solid #d7dbe0;
    border-radius: 20px;
    cursor: pointer;
    font-size: .85rem;
    user-select: none;
    transition: all .15s ease;
    background: #f8f9fa;
}
.chip-group .chip input { accent-color: var(--bs-primary, #0d6efd); cursor: pointer; }
.chip-group .chip:hover { border-color: var(--bs-primary, #0d6efd); }
.chip-group .chip:has(input:checked) {
    background: #e7f1ff;
    border-color: var(--bs-primary, #0d6efd);
    color: #084298;
    font-weight: 600;
}

/* الإشعارات: غير المقروء مميّز، المقروء باهت */
.notif-unread{ background:#eaf2fb; border-inline-start:4px solid var(--primary); }
.notif-unread .notif-title{ font-weight:700; color:var(--text); }
.notif-read{ opacity:.55; }
.notif-read .notif-title{ font-weight:500; }
.notif-dot{ display:inline-block; width:9px; height:9px; border-radius:50%;
    background:var(--primary); margin-inline-end:.4rem; vertical-align:middle; }