body {
    font-family: 'Tajawal', Tahoma;
    background: #f4f6f9;
    padding: 20px;
    color: #333;
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header h2 {
    margin: 0;
}

/* Buttons */
.btn {
    background: #3498db;
    color: white;
    padding: 6px 14px;
    border-radius: 6px;
    text-decoration: none;
    border: none;
}

.btn.green { background: #2ecc71; }
.btn.red { background: #e74c3c; }

/* KPI */
.kpi-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.kpi {
    flex: 1;
    background: white;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}

.kpi span {
    font-size: 12px;
    color: #777;
}

.kpi strong {
    font-size: 20px;
}

.kpi.total { border-top: 4px solid #34495e; }
.kpi.new { border-top: 4px solid #3498db; }
.kpi.progress { border-top: 4px solid #f39c12; }
.kpi.done { border-top: 4px solid #2ecc71; }

/* Filters */
.filters {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.filters input, .filters select {
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

/* Table */
.card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background: #fafafa;
    text-align: right;
    padding: 10px;
}

td {
    padding: 10px;
    border-top: 1px solid #eee;
}

/* Badges */
.badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
}

.badge.new { background: #d6eaf8; color: #2980b9; }
.badge.in_progress { background: #fdebd0; color: #e67e22; }
.badge.done { background: #d5f5e3; color: #27ae60; }
.badge.rejected { background: #f5b7b1; color: #c0392b; }

/* Actions */
.link {
    text-decoration: none;
    margin-left: 8px;
    color: #3498db;
}

.link.red {
    color: #e74c3c;
}
.info-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
}
/* Timeline */
/* Timeline PRO */
.timeline {
    position: relative;
    padding-right: 25px;
    margin-top: 20px;
}

.timeline::before {
    content: '';
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ddd;
}

/* إذا المعاملة منتهية */
.timeline.done::before {
    background: #2ecc71;
}

/* إذا مرفوضة */
.timeline.rejected::before {
    background: #e74c3c;
}

.timeline-item {
    position: relative;
    margin-bottom: 25px;
}

.timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: absolute;
    right: 3px;
    top: 6px;
    border: 2px solid #fff;
}

/* الألوان */
.timeline-dot.new { background: #3498db; }
.timeline-dot.in_progress { background: #f39c12; }
.timeline-dot.done { background: #2ecc71; }
.timeline-dot.rejected { background: #e74c3c; }

/* الكرت */
.timeline-content {
    margin-right: 30px;
    background: #fff;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
    border-right: 4px solid #eee;
}

/* الكرت النشط */
.timeline-item.active .timeline-content {
    border-right: 4px solid #3498db;
    background: #f8fbff;
}

/* الهيدر */
.timeline-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.timeline-head .title {
    font-weight: bold;
}

.timeline-head .time {
    font-size: 12px;
    color: #888;
}

/* الحالة الحالية */
.current {
    background: #3498db;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 6px;
    margin-right: 5px;
}

/* الملاحظات */
.timeline-note {
    margin-top: 6px;
    font-size: 13px;
    color: #555;
}
/* Status Card */
.status-card {
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 12px;
}

.status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-main .label,
.status-progress .label {
    font-size: 12px;
    color: #777;
}

.status-main .value {
    font-size: 18px;
    margin-top: 5px;
}

/* Progress */
.progress-bar {
    background: #eee;
    height: 8px;
    border-radius: 10px;
    margin-top: 5px;
    width: 150px;
}

.progress-bar .fill {
    background: #3498db;
    height: 100%;
    border-radius: 10px;
}

/* Alert */
.alert.late {
    margin-top: 10px;
    background: #fdecea;
    color: #c0392b;
    padding: 8px;
    border-radius: 8px;
}

/* ألوان حسب الحالة */
.status-card.done { border-right: 4px solid #2ecc71; }
.status-card.in_progress { border-right: 4px solid #f39c12; }
.status-card.new { border-right: 4px solid #3498db; }
.status-card.rejected { border-right: 4px solid #e74c3c; }
.page-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}
.page-kicker{
    font-size:12px;
    color:#7b8794;
    margin-bottom:4px;
}
.page-title{
    margin:0;
    font-size:24px;
    font-weight:700;
}
.page-sub{
    margin-top:4px;
    color:#6b7280;
    font-size:13px;
}

.kpi-grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:12px;
    margin-bottom:14px;
}
.kpi-card{
    background:#fff;
    border-radius:14px;
    padding:14px;
    box-shadow:0 3px 10px rgba(0,0,0,.04);
    border-top:4px solid #dfe6ee;
}
.kpi-card.total{ border-top-color:#34495e; }
.kpi-card.new{ border-top-color:#3498db; }
.kpi-card.progress{ border-top-color:#f39c12; }
.kpi-card.done{ border-top-color:#2ecc71; }
.kpi-card.rejected{ border-top-color:#e74c3c; }

.kpi-label{
    font-size:12px;
    color:#6b7280;
    margin-bottom:6px;
}
.kpi-value{
    font-size:26px;
    font-weight:700;
    line-height:1;
}

.type-strip{
    display:flex;
    gap:10px;
    margin-bottom:14px;
    flex-wrap:wrap;
}
.type-pill{
    background:#fff;
    border-radius:999px;
    padding:8px 14px;
    font-size:13px;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.type-pill strong{
    margin-right:6px;
}
.type-pill.upgrade{
    border:1px solid #cfe8ff;
    color:#216eb4;
    background:#f4f9ff;
}
.type-pill.improve{
    border:1px solid #ffe2b8;
    color:#ad6a00;
    background:#fff8ee;
}
.type-pill.secret{
    border:1px solid #e8d5ff;
    color:#6d28d9;
    background:#faf5ff;
}

.filter-card{
    margin-bottom:14px;
    padding:14px;
}
.filters-advanced{
    display:grid;
    grid-template-columns:2fr 1fr 1fr auto;
    gap:12px;
    align-items:end;
}
.field label{
    display:block;
    font-size:12px;
    color:#6b7280;
    margin-bottom:6px;
}
.field input,
.field select,
.field textarea{
    width:100%;
    border:1px solid #d7dee7;
    border-radius:10px;
    padding:10px 12px;
    background:#fff;
    box-sizing:border-box;
}
.field-full{
    grid-column:1 / -1;
}

.filter-actions{
    display:flex;
    gap:8px;
}

.btn{
    background:#2f80ed;
    color:#fff;
    text-decoration:none;
    border:none;
    border-radius:10px;
    padding:10px 14px;
    cursor:pointer;
    display:inline-block;
}
.btn.green{
    background:#27ae60;
}
.btn.red{
    background:#e74c3c;
}
.btn-light{
    background:#eef2f7;
    color:#334155;
}

.table-card{
    padding:0;
    overflow:hidden;
}
.table-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    border-bottom:1px solid #edf1f5;
    background:#fbfcfd;
}
.table-title{
    font-weight:700;
}
.table-count{
    font-size:12px;
    color:#6b7280;
}
.table-wrap{
    overflow:auto;
}
.trx-table{
    width:100%;
    border-collapse:collapse;
}
.trx-table th{
    background:#fafbfd;
    color:#475569;
    font-size:13px;
    text-align:right;
    padding:12px 14px;
    border-bottom:1px solid #edf1f5;
    white-space:nowrap;
}
.trx-table td{
    padding:12px 14px;
    border-bottom:1px solid #f0f3f7;
    vertical-align:middle;
}
.trx-table tbody tr:hover{
    background:#fcfdff;
}
.trx-no a{
    color:#1565c0;
    text-decoration:none;
    font-weight:700;
}

.type-badge{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:5px 10px;
    font-size:12px;
    font-weight:600;
}
.type-pill.green {
    border: 1px solid #bbf7d0;
    color: #166534;
    background: #eefaf1;
}

.type-pill.blue {
    border: 1px solid #dbeafe;
    color: #1f4b99;
    background: #eef4ff;
}

.type-pill.red {
    border: 1px solid #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

.type-pill.yellow {
    border: 1px solid #fef08a;
    color: #854d0e;
    background: #fefce8;
}

.type-pill.orange {
    border: 1px solid #fed7aa;
    color: #9a3412;
    background: #fff7ed;
}

.type-pill.purple {
    border: 1px solid #ddd6fe;
    color: #5b21b6;
    background: #f5f3ff;
}

.type-pill.pink {
    border: 1px solid #fbcfe8;
    color: #be185d;
    background: #fdf2f8;
}

.type-pill.cyan {
    border: 1px solid #a5f3fc;
    color: #155e75;
    background: #ecfeff;
}

.type-pill.teal {
    border: 1px solid #99f6e4;
    color: #134e4a;
    background: #f0fdfa;
}

.type-pill.gray {
    border: 1px solid #e5e7eb;
    color: #374151;
    background: #f3f4f6;
}

.type-pill.navy {
    border: 1px solid #c7d2fe;
    color: #1e3a8a;
    background: #eef2ff;
}

.type-pill.brown {
    border: 1px solid #f5e1d6;
    color: #78350f;
    background: #fdf8f6;
}

.type-pill.olive {
    border: 1px solid #d9f99d;
    color: #4d7c0f;
    background: #f7fee7;
}

.type-pill.gold {
    border: 1px solid #fde68a;
    color: #92400e;
    background: #fffbeb;
}

.type-pill.dark {
    border: 1px solid #1f2937;
    color: #f9fafb;
    background: #1f2937;
}

.badge{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:5px 10px;
    font-size:12px;
    font-weight:600;
}
.badge.new{
    background:#eaf4ff;
    color:#1d70b8;
}
.badge.in_progress{
    background:#fff4e5;
    color:#b4690e;
}
.badge.done{
    background:#e9f9ef;
    color:#1f9254;
}
.badge.rejected{
    background:#fdecec;
    color:#c0392b;
}

.actions-cell{
    white-space:nowrap;
}
.link-btn{
    display:inline-block;
    text-decoration:none;
    font-size:12px;
    padding:6px 10px;
    border-radius:8px;
    background:#eef4ff;
    color:#185abc;
    margin-left:6px;
}
.link-btn.edit{
    background:#eefbf3;
    color:#1f9254;
}
.link-btn.delete{
    background:#fff1f1;
    color:#c0392b;
}
.empty-row{
    text-align:center;
    color:#6b7280;
    padding:20px !important;
}

.form-card{
    padding:16px;
}
.trx-form .form-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
}
.form-actions{
    margin-top:14px;
    display:flex;
    gap:8px;
}

@media (max-width: 1100px){
    .kpi-grid{
        grid-template-columns:repeat(2, 1fr);
    }
    .filters-advanced{
        grid-template-columns:1fr 1fr;
    }
}
@media (max-width: 700px){
    .kpi-grid,
    .trx-form .form-grid,
    .filters-advanced{
        grid-template-columns:1fr;
    }
    .table-head,
    .page-head{
        display:block;
    }
}
.page-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.detail-top-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:14px;
    margin-bottom:14px;
}

.hero-card{
    padding:18px;
}

.hero-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:12px;
}

.hero-kicker{
    font-size:12px;
    color:#7b8794;
    margin-bottom:4px;
}

.hero-number{
    font-size:28px;
    font-weight:800;
    color:#1f2937;
    line-height:1.1;
}

.hero-badges{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.hero-subject{
    font-size:20px;
    font-weight:700;
    color:#111827;
    margin-bottom:14px;
    line-height:1.7;
}

.hero-meta{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    margin-bottom:14px;
}

.meta-item{
    background:#f8fafc;
    border:1px solid #edf2f7;
    border-radius:12px;
    padding:12px;
}

.meta-label{
    display:block;
    font-size:12px;
    color:#6b7280;
    margin-bottom:6px;
}

.hero-notes{
    margin-top:8px;
}

.section-mini-title{
    font-size:13px;
    font-weight:700;
    margin-bottom:8px;
    color:#334155;
}

.notes-box{
    background:#fcfcfd;
    border:1px solid #edf1f5;
    border-radius:12px;
    padding:12px;
    color:#475569;
    line-height:1.9;
}

.summary-card{
    padding:16px;
    border-right:4px solid #dbe3ec;
}

.summary-card.new{
    border-right-color:#3498db;
}
.summary-card.in_progress{
    border-right-color:#f39c12;
}
.summary-card.done{
    border-right-color:#2ecc71;
}
.summary-card.rejected{
    border-right-color:#e74c3c;
}

.summary-title{
    font-size:16px;
    font-weight:800;
    margin-bottom:14px;
}

.summary-status-block,
.summary-progress-block{
    margin-bottom:14px;
}

.summary-label{
    font-size:12px;
    color:#6b7280;
    margin-bottom:6px;
}

.summary-value{
    font-size:15px;
    font-weight:700;
}

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

.progress-bar{
    background:#edf2f7;
    border-radius:999px;
    overflow:hidden;
}

.progress-bar.lg{
    height:10px;
    flex:1;
}

.progress-bar .fill{
    height:100%;
    background:#2f80ed;
    border-radius:999px;
}

.progress-text{
    min-width:42px;
    font-size:12px;
    font-weight:700;
    color:#475569;
}

.summary-mini-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
    margin-top:10px;
}

.mini-stat{
    background:#f8fafc;
    border:1px solid #edf2f7;
    border-radius:12px;
    padding:12px;
}

.mini-stat span{
    display:block;
    font-size:12px;
    color:#6b7280;
    margin-bottom:6px;
}

.mini-stat strong{
    font-size:18px;
    color:#111827;
}

.alert-box{
    margin-top:14px;
    border-radius:12px;
    padding:12px;
}

.alert-box.danger{
    background:#fff5f5;
    border:1px solid #ffd7d7;
    color:#b42318;
}

.alert-title{
    font-weight:800;
    margin-bottom:4px;
}

.alert-text{
    font-size:13px;
    line-height:1.7;
}

.section-card{
    padding:16px;
}

.section-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.section-kicker{
    font-size:12px;
    color:#7b8794;
    margin-bottom:4px;
}

.section-title{
    margin:0;
    font-size:18px;
    font-weight:800;
}

.timeline{
    position:relative;
    padding-right:26px;
    margin-top:12px;
}

.timeline::before{
    content:'';
    position:absolute;
    right:10px;
    top:0;
    bottom:0;
    width:2px;
    background:#dbe3ec;
}

.timeline.done::before{
    background:#2ecc71;
}
.timeline.rejected::before{
    background:#e74c3c;
}
.timeline.in_progress::before{
    background:#f39c12;
}
.timeline.new::before{
    background:#3498db;
}

.timeline-item{
    position:relative;
    margin-bottom:18px;
}

.timeline-dot{
    position:absolute;
    right:3px;
    top:10px;
    width:14px;
    height:14px;
    border-radius:50%;
    border:2px solid #fff;
    box-shadow:0 0 0 3px #fff;
    z-index:2;
}

.timeline-dot.new{ background:#3498db; }
.timeline-dot.in_progress{ background:#f39c12; }
.timeline-dot.done{ background:#2ecc71; }
.timeline-dot.rejected{ background:#e74c3c; }

.timeline-content{
    margin-right:30px;
    background:#fff;
    border:1px solid #edf1f5;
    border-radius:14px;
    padding:14px;
    box-shadow:0 3px 10px rgba(15,23,42,.04);
}

.timeline-item.active .timeline-content{
    background:#f8fbff;
    border-color:#d9e9ff;
}

.timeline-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    margin-bottom:8px;
}

.timeline-title-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.timeline-title{
    font-weight:800;
    color:#111827;
}

.timeline-time{
    font-size:12px;
    color:#6b7280;
    white-space:nowrap;
}

.current-chip{
    background:#2f80ed;
    color:#fff;
    font-size:11px;
    font-weight:700;
    border-radius:999px;
    padding:4px 8px;
}

.timeline-meta-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
    flex-wrap:wrap;
}

.timeline-date{
    font-size:12px;
    color:#94a3b8;
}

.timeline-note{
    color:#475569;
    line-height:1.9;
    background:#fcfcfd;
    border:1px solid #f1f5f9;
    border-radius:10px;
    padding:10px 12px;
}

.empty-state{
    background:#fafbfc;
    border:1px dashed #d7dee7;
    border-radius:12px;
    padding:18px;
    text-align:center;
    color:#6b7280;
}

@media (max-width: 1100px){
    .detail-top-grid{
        grid-template-columns:1fr;
    }

    .hero-meta{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width: 700px){
    .hero-head,
    .timeline-head,
    .timeline-meta-row{
        display:block;
    }

    .hero-meta{
        grid-template-columns:1fr;
    }

    .summary-mini-grid{
        grid-template-columns:1fr;
    }

    .page-actions{
        margin-top:10px;
    }
}
.hero-card.compact .hero-number{
    font-size:24px;
}

.action-form-card{
    padding:16px;
}

.form-title{
    margin-bottom:14px;
}

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

.form-actions.between{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin-top:14px;
}

@media (max-width: 700px){
    .form-actions.between{
        flex-direction:column;
        align-items:stretch;
    }

    .form-actions.between .btn{
        width:100%;
        text-align:center;
    }
}
body.app-body{
    margin:0;
    background:#f3f6fa;
    color:#1f2937;
    font-family:'Tajawal', Tahoma, Arial, sans-serif;
}

*{
    box-sizing:border-box;
}

.app-shell{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.app-header{
    background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-bottom:1px solid #e6edf5;
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:blur(6px);
}

.app-header-inner{
    max-width:1280px;
    margin:0 auto;
    padding:14px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.brand-block{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.brand-mark{
    width:42px;
    height:42px;
    border-radius:12px;
    background:linear-gradient(135deg, #1f6feb 0%, #2f80ed 100%);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:800;
    box-shadow:0 6px 18px rgba(47,128,237,.22);
    flex:0 0 auto;
}

.brand-kicker{
    font-size:11px;
    color:#7b8794;
    margin-bottom:2px;
}

.brand-title{
    font-size:18px;
    font-weight:800;
    color:#0f172a;
    line-height:1.2;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.top-link{
    text-decoration:none;
    color:#334155;
    background:#eef2f7;
    padding:10px 12px;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
}

.top-link:hover{
    background:#e6edf5;
}

.app-main{
    flex:1;
    width:100%;
}

.content-wrap{
    max-width:1280px;
    margin:0 auto;
    padding:22px 20px 26px;
}

.app-footer{
    border-top:1px solid #e6edf5;
    background:#fbfcfe;
}

.footer-text{
    max-width:1280px;
    margin:0 auto;
    padding:12px 20px;
    color:#6b7280;
    font-size:12px;
}

.footer-sep{
    margin:0 6px;
    color:#c0cad5;
}

.card{
    background:#fff;
    border:1px solid #ecf1f6;
    border-radius:16px;
    box-shadow:0 6px 20px rgba(15,23,42,.04);
}

.btn{
    background:#2f80ed;
    color:#fff;
    text-decoration:none;
    border:none;
    border-radius:10px;
    padding:10px 14px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:700;
    line-height:1;
}

.btn:hover{
    opacity:.95;
}

.btn.green{
    background:#27ae60;
}

.btn.red{
    background:#e74c3c;
}

.btn-light{
    background:#eef2f7;
    color:#334155;
}

@media (max-width: 900px){
    .app-header-inner{
        align-items:flex-start;
        flex-direction:column;
    }

    .header-actions{
        width:100%;
    }
}

@media (max-width: 640px){
    .content-wrap{
        padding:18px 14px 22px;
    }

    .header-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .header-actions .btn,
    .header-actions .top-link{
        width:100%;
        text-align:center;
    }

    .brand-title{
        font-size:16px;
    }
}
.login-page{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(circle at top right, #eaf4ff 0, transparent 30%),
        linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%);
    font-family:'Tajawal', Tahoma, Arial, sans-serif;
}

.login-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:1.1fr .9fr;
}

.login-side{
    padding:42px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    color:#0f172a;
}

.login-brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.login-brand-mark{
    width:48px;
    height:48px;
    border-radius:14px;
    background:linear-gradient(135deg, #1f6feb 0%, #2f80ed 100%);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:800;
    box-shadow:0 8px 22px rgba(47,128,237,.24);
}

.login-brand-kicker{
    font-size:12px;
    color:#64748b;
    margin-bottom:3px;
}

.login-brand-title{
    font-size:20px;
    font-weight:800;
}

.login-side-content{
    max-width:520px;
}

.login-side-content h1{
    margin:0 0 14px;
    font-size:38px;
    line-height:1.3;
    font-weight:800;
}

.login-side-content p{
    margin:0;
    font-size:16px;
    color:#475569;
    line-height:1.9;
}

.login-features{
    margin-top:24px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.login-feature{
    background:rgba(255,255,255,.8);
    border:1px solid #dce7f3;
    border-radius:999px;
    padding:8px 14px;
    font-size:13px;
    color:#334155;
    box-shadow:0 4px 12px rgba(15,23,42,.04);
}

.login-card-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
}

.login-card{
    width:100%;
    max-width:430px;
    background:#fff;
    border:1px solid #e9eef5;
    border-radius:22px;
    box-shadow:0 18px 40px rgba(15,23,42,.08);
    padding:24px;
}

.login-card-head{
    margin-bottom:14px;
}

.login-form .field{
    margin-bottom:14px;
}

.login-form .field label{
    display:block;
    font-size:12px;
    color:#6b7280;
    margin-bottom:6px;
}

.login-form .field input{
    width:100%;
    border:1px solid #d7dee7;
    border-radius:12px;
    padding:12px 14px;
    background:#fff;
    font-size:14px;
    outline:none;
}

.login-form .field input:focus{
    border-color:#93c5fd;
    box-shadow:0 0 0 4px rgba(59,130,246,.10);
}

.login-btn{
    width:100%;
    margin-top:6px;
    padding:13px 14px;
    font-size:14px;
    border-radius:12px;
}

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

    .login-side{
        padding:24px 20px 0;
    }

    .login-side-content{
        margin-top:18px;
        max-width:none;
    }

    .login-side-content h1{
        font-size:28px;
    }

    .login-card-wrap{
        padding:20px;
        align-items:flex-start;
    }
}

@media (max-width: 640px){
    .login-side{
        padding:18px 14px 0;
    }

    .login-card-wrap{
        padding:14px;
    }

    .login-card{
        padding:18px;
        border-radius:18px;
    }

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

    .login-side-content p{
        font-size:14px;
    }
}
.flash-alert{
    margin-bottom:14px;
    border-radius:14px;
    padding:14px 16px;
    border:1px solid transparent;
    box-shadow:0 6px 18px rgba(15,23,42,.04);
}

.flash-title{
    font-size:13px;
    font-weight:800;
    margin-bottom:4px;
}

.flash-text{
    font-size:14px;
    line-height:1.8;
}

.flash-alert.success{
    background:#ecfdf3;
    border-color:#c9f1d8;
    color:#166534;
}

.flash-alert.error{
    background:#fff4f4;
    border-color:#ffd6d6;
    color:#b42318;
}

.flash-alert.warning{
    background:#fff9ec;
    border-color:#ffe2a8;
    color:#92400e;
}

.flash-alert.info{
    background:#eff6ff;
    border-color:#cfe2ff;
    color:#1d4ed8;
}
.row-late{
    background:#fffafb;
}

.row-late:hover{
    background:#fff3f5 !important;
}

.due-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.late-badge{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:4px 8px;
    font-size:11px;
    font-weight:700;
    background:#fff1f1;
    color:#c0392b;
    border:1px solid #ffd6d6;
}
.kpi-card.late{
    border-top-color:#e74c3c;
}
/* =========================
   Compact UI
   ========================= */

body.app-body,
body.login-page{
    font-size:13px;
}

/* الهيدر العام */
.app-header-inner{
    padding:10px 16px;
}

.brand-mark{
    width:36px;
    height:36px;
    border-radius:10px;
    font-size:17px;
}

.brand-kicker,
.page-kicker,
.section-kicker,
.hero-kicker,
.brand-kicker,
.login-brand-kicker,
.kpi-label,
.meta-label,
.summary-label,
.table-count,
.footer-text,
.flash-title,
.flash-text,
.timeline-time,
.timeline-date,
.current-chip,
.late-badge,
.type-badge,
.badge,
.link-btn,
.top-link{
    font-size:11px;
}

.brand-title{
    font-size:16px;
}

.content-wrap{
    padding:16px 16px 20px;
}

/* العناوين */
.page-title{
    font-size:20px;
}

.page-sub{
    font-size:12px;
}

.section-title,
.summary-title,
.table-title,
.form-title{
    font-size:15px;
}

.hero-number{
    font-size:22px;
}

.hero-subject{
    font-size:17px;
}

.login-side-content h1{
    font-size:30px;
}

.login-side-content p{
    font-size:14px;
}

.login-brand-title{
    font-size:17px;
}

/* البطاقات */
.card{
    border-radius:12px;
}

.hero-card,
.summary-card,
.section-card,
.filter-card,
.form-card,
.action-form-card,
.login-card{
    padding:12px !important;
}

/* KPI */
.kpi-grid{
    gap:10px;
}

.kpi-card{
    padding:10px;
    border-radius:12px;
}

.kpi-value{
    font-size:22px;
}

.type-strip{
    gap:8px;
    margin-bottom:12px;
}

.type-pill{
    padding:6px 10px;
    font-size:12px;
}

/* الفورم */
.field label,
.login-form .field label{
    font-size:11px;
    margin-bottom:5px;
}

.field input,
.field select,
.field textarea,
.login-form .field input{
    padding:8px 10px;
    border-radius:8px;
    font-size:13px;
}

.form-actions,
.filter-actions,
.page-actions{
    gap:6px;
    margin-top:10px;
}

/* الأزرار */
.btn,
.top-link,
.link-btn{
    padding:8px 10px;
    border-radius:8px;
    font-size:12px;
}

.login-btn{
    padding:10px 12px;
    font-size:13px;
}

/* الجداول */
.table-head{
    padding:10px 12px;
}

.trx-table th{
    font-size:12px;
    padding:10px 12px;
}

.trx-table td{
    padding:10px 12px;
    font-size:12px;
}

.trx-no a{
    font-size:12px;
}

.empty-row{
    font-size:12px;
}

/* الشارات */
.badge,
.type-badge,
.late-badge{
    padding:4px 8px;
    font-size:11px;
}

/* تفاصيل المعاملة */
.hero-head{
    margin-bottom:10px;
}

.hero-meta{
    gap:8px;
    margin-bottom:10px;
}

.meta-item,
.mini-stat,
.notes-box{
    padding:10px;
    border-radius:10px;
}

.mini-stat strong{
    font-size:16px;
}

/* progress */
.progress-bar.lg{
    height:8px;
}

.progress-text{
    font-size:11px;
}

/* التايم لاين */
.timeline{
    padding-right:22px;
}

.timeline::before{
    right:8px;
}

.timeline-dot{
    width:12px;
    height:12px;
    right:2px;
    top:8px;
}

.timeline-content{
    margin-right:24px;
    padding:10px 12px;
    border-radius:10px;
}

.timeline-title{
    font-size:13px;
}

.timeline-note{
    font-size:12px;
    padding:8px 10px;
    border-radius:8px;
}

/* التنبيهات */
.flash-alert,
.alert-box{
    padding:10px 12px;
    border-radius:10px;
}

/* صفحة الدخول */
.login-card{
    max-width:380px;
    border-radius:16px;
}

.login-brand-mark{
    width:40px;
    height:40px;
    border-radius:12px;
    font-size:18px;
}

.login-feature{
    padding:6px 10px;
    font-size:12px;
}

@media (max-width: 700px){
    body.app-body,
    body.login-page{
        font-size:12px;
    }

    .page-title{
        font-size:18px;
    }

    .hero-number{
        font-size:18px;
    }

    .hero-subject{
        font-size:15px;
    }

    .btn,
    .top-link,
    .link-btn{
        font-size:11px;
        padding:7px 9px;
    }

    .trx-table th,
    .trx-table td{
        padding:8px 10px;
    }
}
.alert-box.info{
    background:#eff6ff;
    border:1px solid #cfe2ff;
    color:#1d4ed8;
}

.parent-transaction-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:14px;
    border:1px solid #edf1f5;
    border-radius:14px;
    background:#fbfcfe;
    flex-wrap:wrap;
}

.parent-transaction-no a{
    font-size:15px;
    font-weight:800;
    color:#1565c0;
    text-decoration:none;
}

.parent-transaction-subject{
    margin-top:4px;
    color:#475569;
    line-height:1.8;
}

.parent-transaction-meta{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.main-row{
    font-weight:700;
}

.child-row{
    background:#fafcff;
}

.child-prefix{
    color:#94a3b8;
    margin-left:6px;
    font-size:12px;
}
.timeline-user{
    margin-top:6px;
    font-size:11px;
    color:#64748b;
}
.simple-login-page{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(circle at top right, #eaf4ff 0, transparent 28%),
        linear-gradient(180deg, #f6f9fc 0%, #eef3f8 100%);
    font-family:'Tajawal', Tahoma, Arial, sans-serif;
}

.simple-login-wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.simple-login-card{
    width:100%;
    max-width:380px;
    background:#fff;
    border:1px solid #e7edf4;
    border-radius:18px;
    box-shadow:0 18px 40px rgba(15,23,42,.08);
    padding:20px;
}

.text-center{
    text-align:center;
}

.login-brand-mark.centered{
    margin:0 auto;
    width:42px;
    height:42px;
    border-radius:12px;
    background:linear-gradient(135deg, #1f6feb 0%, #2f80ed 100%);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:800;
    box-shadow:0 8px 20px rgba(47,128,237,.20);
}

.simple-login-card .login-card-head{
    margin-bottom:16px;
    padding-bottom:12px;
    border-bottom:1px solid #eef2f6;
}

.simple-login-card .page-title{
    margin:6px 0 4px;
    font-size:20px;
}

.simple-login-card .page-sub{
    font-size:12px;
    color:#64748b;
}

.simple-login-card .login-form .field{
    margin-bottom:12px;
}

.simple-login-card .login-form .field label{
    display:block;
    font-size:11px;
    color:#6b7280;
    margin-bottom:6px;
    text-align:right;
}

.simple-login-card .login-form .field input{
    width:100%;
    border:1px solid #d7dee7;
    border-radius:10px;
    padding:10px 12px;
    background:#fff;
    font-size:13px;
    outline:none;
    box-sizing:border-box;
}

.simple-login-card .login-form .field input:focus{
    border-color:#93c5fd;
    box-shadow:0 0 0 4px rgba(59,130,246,.10);
}

.simple-login-card .login-btn{
    width:100%;
    margin-top:6px;
    padding:11px 12px;
    font-size:13px;
    border-radius:10px;
}

@media (max-width: 640px){
    .simple-login-wrap{
        padding:14px;
    }

    .simple-login-card{
        max-width:100%;
        padding:16px;
        border-radius:16px;
    }

    .simple-login-card .page-title{
        font-size:18px;
    }
}
.priority-note{
    font-size:11px;
    color:#64748b;
    background:#f8fafc;
    border:1px solid #e7edf4;
    border-radius:10px;
    padding:8px 10px;
}
.priority-badge{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:4px 8px;
    font-size:11px;
    font-weight:700;
}

.priority-badge.urgent-very{
    background:#fff1f1;
    color:#b42318;
    border:1px solid #ffd6d6;
}

.priority-badge.urgent{
    background:#fff7e8;
    color:#b4690e;
    border:1px solid #ffe2b8;
}

.priority-badge.medium{
    background:#eef6ff;
    color:#1d4ed8;
    border:1px solid #d6e5ff;
}
.pagination-wrap{
    padding:12px 14px 16px;
    border-top:1px solid #edf1f5;
    background:#fff;
}

.pagination{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    align-items:center;
}

.page-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    height:34px;
    padding:0 10px;
    border-radius:8px;
    text-decoration:none;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    color:#334155;
    font-size:12px;
    font-weight:700;
}

.page-link.active{
    background:#2f80ed;
    border-color:#2f80ed;
    color:#fff;
}
.dashboard-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.kpi-card.urgent-very{
    border-top-color:#b42318;
}

@media (max-width: 1000px){
    .dashboard-grid{
        grid-template-columns:1fr;
    }
}
.type-form-grid{
    display:grid;
    grid-template-columns:2fr 1fr 120px auto;
    gap:10px;
    align-items:end;
}

.type-field label{
    display:block;
    margin-bottom:6px;
    font-weight:700;
    font-size:13px;
}

.type-field input{
    width:100%;
    height:40px;
    border:1px solid #dbe3ee;
    border-radius:10px;
    padding:0 12px;
    font-family:inherit;
    font-size:14px;
    background:#fff;
}

.type-actions{
    display:flex;
    gap:8px;
    align-items:end;
    flex-wrap:wrap;
}

@media (max-width: 900px){
    .type-form-grid{
        grid-template-columns:1fr;
    }
}
/* أخضر */
.type-badge.green {
    background: #eefaf1;
    color: #166534;
}

/* أزرق */
.type-badge.blue {
    background: #eef4ff;
    color: #1f4b99;
}

/* أحمر */
.type-badge.red {
    background: #fef2f2;
    color: #991b1b;
}

/* أصفر */
.type-badge.yellow {
    background: #fefce8;
    color: #854d0e;
}

/* برتقالي */
.type-badge.orange {
    background: #fff7ed;
    color: #9a3412;
}

/* بنفسجي */
.type-badge.purple {
    background: #f5f3ff;
    color: #5b21b6;
}

/* وردي */
.type-badge.pink {
    background: #fdf2f8;
    color: #be185d;
}

/* سماوي */
.type-badge.cyan {
    background: #ecfeff;
    color: #155e75;
}

/* تركوازي */
.type-badge.teal {
    background: #f0fdfa;
    color: #134e4a;
}

/* رمادي */
.type-badge.gray {
    background: #f3f4f6;
    color: #374151;
}

/* كحلي */
.type-badge.navy {
    background: #eef2ff;
    color: #1e3a8a;
}

/* بني */
.type-badge.brown {
    background: #fdf8f6;
    color: #78350f;
}

/* زيتوني */
.type-badge.olive {
    background: #f7fee7;
    color: #4d7c0f;
}

/* ذهبي */
.type-badge.gold {
    background: #fffbeb;
    color: #92400e;
}

/* داكن */
.type-badge.dark {
    background: #1f2937;
    color: #f9fafb;
}
.color-guide.modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}

/* كل عنصر */
.color-guide.modern .color-item {
    display: flex;
    justify-content: center;
}

/* شكل البادج */
.color-guide.modern .type-badge {
    width: 100%;
    text-align: center;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    transition: all .2s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

/* Hover بسيط */
.color-guide.modern .type-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.type-form-grid{
    display:grid;
    grid-template-columns: 1.2fr 1fr 120px 1fr 120px auto;
    gap:10px;
    align-items:end;
}
.type-field label{
    display:block;
    margin-bottom:6px;
    font-weight:700;
    font-size:13px;
}
.type-field input{
    width:100%;
    height:40px;
    border:1px solid #dbe3ee;
    border-radius:10px;
    padding:0 12px;
    font-family:inherit;
    font-size:14px;
    background:#fff;
}
.type-actions{
    display:flex;
    gap:8px;
    align-items:end;
    flex-wrap:wrap;
}
@media (max-width: 1100px){
    .type-form-grid{
        grid-template-columns:1fr;
    }
}
.field-hint{
    margin-top:8px;
    padding:8px 10px;
    border-radius:10px;
    font-size:.88rem;
    line-height:1.7;
}

.field-hint.danger{
    background:#fff7f7;
    color:#b42318;
    border:1px solid #f1d0d0;
}

.field-hint a{
    color:inherit;
    font-weight:700;
    text-decoration:none;
}

.field-hint a:hover{
    text-decoration:underline;
}

.hint-sub{
    margin-top:2px;
    color:#7a5a5a;
    font-size:.82rem;
}
/* =========================
   Dashboard Advanced
   ========================= */

.dashboard-filter-card{
    margin-bottom:14px;
}

.dashboard-filters{
    grid-template-columns: 260px auto;
}

.dashboard-hero{
    display:grid;
    grid-template-columns: 1.3fr 1fr;
    gap:16px;
    padding:16px;
    margin-bottom:14px;
}

.dashboard-hero-main{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.dashboard-hero-kicker{
    font-size:11px;
    color:#7b8794;
    margin-bottom:6px;
}

.dashboard-hero-number{
    font-size:30px;
    font-weight:800;
    color:#111827;
    line-height:1;
}

.dashboard-hero-sub{
    margin-top:8px;
    color:#6b7280;
    font-size:12px;
}

.dashboard-hero-side{
    background:#f8fafc;
    border:1px solid #edf2f7;
    border-radius:14px;
    padding:12px;
}

.hero-stat-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
    font-size:12px;
    color:#475569;
}

.hero-stat-row strong{
    color:#111827;
    font-size:14px;
}

.hero-progress{
    margin-top:8px;
    height:10px;
    border-radius:999px;
    overflow:hidden;
    background:#e8eef5;
}

.hero-progress-fill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
}

.dashboard-kpis{
    grid-template-columns:repeat(4, 1fr);
}

.kpi-card.today{
    border-top-color:#b7791f;
}

.kpi-card.soon{
    border-top-color:#2563eb;
}

.dashboard-mini-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:12px;
    margin-bottom:14px;
}

.dashboard-mini-card{
    padding:12px;
}

.mini-card-label{
    font-size:11px;
    color:#6b7280;
    margin-bottom:6px;
}

.mini-card-value{
    font-size:20px;
    font-weight:800;
    color:#111827;
    line-height:1.1;
}

.table-sub{
    font-size:11px;
    color:#94a3b8;
    margin-top:2px;
}

.dashboard-section-card{
    padding:0;
    overflow:hidden;
}

.dashboard-grid-bottom{
    margin-top:14px;
}

.late-days{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:4px 8px;
    font-size:11px;
    font-weight:700;
    background:#fff5f5;
    color:#b42318;
    border:1px solid #ffd6d6;
}

.dashboard-note-card{
    padding:16px;
}

.dashboard-note-head{
    margin-bottom:14px;
}

.dashboard-note-list{
    display:grid;
    gap:12px;
}

.dashboard-note-item{
    display:flex;
    gap:10px;
    align-items:flex-start;
    background:#fafbfd;
    border:1px solid #edf2f7;
    border-radius:12px;
    padding:10px 12px;
}

.note-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    margin-top:5px;
    flex:0 0 auto;
}

.note-dot.blue{ background:#2f80ed; }
.note-dot.red{ background:#e74c3c; }
.note-dot.orange{ background:#f39c12; }
.note-dot.green{ background:#27ae60; }

.note-title{
    font-size:12px;
    font-weight:700;
    margin-bottom:4px;
    color:#111827;
}

.note-text{
    font-size:12px;
    color:#475569;
    line-height:1.8;
}

.dashboard-latest-card{
    margin-top:14px;
    padding:0;
    overflow:hidden;
}

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

    .dashboard-mini-grid{
        grid-template-columns:repeat(2, 1fr);
    }

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

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

    .dashboard-kpis,
    .dashboard-mini-grid{
        grid-template-columns:1fr;
    }
}
.dashboard-filters-wide{
    grid-template-columns: 220px 220px auto;
}

@media (max-width: 900px){
    .dashboard-filters-wide{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width: 700px){
    .dashboard-filters-wide{
        grid-template-columns:1fr;
    }
}
.form-section{
    margin-bottom:16px;
}

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

.form-grid.form-grid-4{
    grid-template-columns:repeat(4, 1fr);
}

.form-grid.form-grid-3{
    grid-template-columns:repeat(3, 1fr);
}

.field-note-muted{
    margin-top:6px;
    font-size:11px;
    color:#6b7280;
    line-height:1.6;
}

.field input[readonly]{
    background:#f8fafc;
    color:#475569;
}

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

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

@media (max-width: 700px){
    .form-grid.form-grid-4,
    .form-grid.form-grid-3{
        grid-template-columns:1fr;
    }
}
.form-grid.form-grid-4{
    grid-template-columns:repeat(4, 1fr);
}

.field input[readonly]{
    background:#f8fafc;
    color:#475569;
}

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

@media (max-width: 700px){
    .form-grid.form-grid-4{
        grid-template-columns:1fr;
    }
}
.subject-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    align-items:start;
}

.subject-search-btn{
    white-space:nowrap;
}

.similar-box{
    margin-top:10px;
    border:1px solid #e7edf4;
    background:#fbfcfe;
    border-radius:12px;
    padding:10px;
}

.similar-box-title{
    font-size:12px;
    font-weight:800;
    color:#334155;
    margin-bottom:8px;
}

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

.similar-item{
    display:block;
    text-decoration:none;
    color:inherit;
    background:#fff;
    border:1px solid #edf1f5;
    border-radius:10px;
    padding:10px;
    transition:.15s ease;
}

.similar-item:hover{
    background:#f8fbff;
    border-color:#d9e9ff;
}

.similar-item-top{
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:11px;
    color:#64748b;
    margin-bottom:4px;
}

.similar-item-top strong{
    color:#1565c0;
    font-size:12px;
}

.similar-item-subject{
    font-size:12px;
    color:#334155;
    line-height:1.8;
}

@media (max-width: 700px){
    .subject-row{
        grid-template-columns:1fr;
    }

    .subject-search-btn{
        width:100%;
    }
}
.notif-wrap{
    position:relative;
}

.notif-btn{
    position:relative;
    background:none;
    border:none;
    font-size:18px;
    cursor:pointer;
}

.notif-badge{
    position:absolute;
    top:-6px;
    right:-6px;
    background:#ef4444;
    color:#fff;
    font-size:10px;
    padding:2px 6px;
    border-radius:999px;
    font-weight:700;
}

.notif-dropdown{
    position:absolute;
    top:38px;
    right:0;
    width:280px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    display:none;
    z-index:100;
    padding:10px;
}

.notif-dropdown.show{
    display:block;
}

.notif-title{
    font-size:13px;
    font-weight:800;
    margin-bottom:8px;
    color:#111827;
}

.notif-item{
    display:block;
    padding:8px;
    border-radius:8px;
    text-decoration:none;
    color:inherit;
    transition:.15s;
}

.notif-item:hover{
    background:#f8fafc;
}

.notif-top{
    display:flex;
    justify-content:space-between;
    font-size:11px;
    color:#64748b;
}

.notif-subject{
    font-size:12px;
    color:#334155;
    margin-top:3px;
}

.notif-empty{
    font-size:12px;
    color:#64748b;
    text-align:center;
    padding:10px;
}
.notif-dropdown{
    max-height:320px;
    overflow-y:auto;
}
.notif-view-all{
    display:block;
    text-align:center;
    padding:8px;
    font-size:12px;
    color:#1565c0;
    text-decoration:none;
    border-top:1px solid #eee;
    margin-top:6px;
}

.notif-view-all:hover{
    background:#f8fafc;
}
.text-center{
    text-align:center;
}
.trx-table th.text-center,
.trx-table td.text-center{
    text-align:center;
}
.actions-inline{
    display:flex;
    justify-content:center;
    gap:10px;
}

.icon-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:15px;
    transition:all .15s ease;
    opacity:.7;
}

/* عند المرور */
.icon-btn:hover{
    opacity:1;
    transform:scale(1.15);
}

/* ألوان خفيفة */
.icon-btn.view{
    color:#2563eb; /* أزرق */
}

.icon-btn.edit{
    color:#16a34a; /* أخضر */
}

.icon-btn.delete{
    color:#dc2626; /* أحمر */
}
.icon-btn{
    position:relative;
}

.icon-btn:hover::after{
    content:attr(title);
    position:absolute;
    bottom:-22px;
    font-size:10px;
    background:#111;
    color:#fff;
    padding:2px 6px;
    border-radius:6px;
    white-space:nowrap;
}
.child-chip{
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:10px;
    padding:2px 6px;
    border-radius:6px;
    background:#fef2f2;
    color:#dc2626;
    font-weight:700;
}

.child-icon{
    font-size:11px;
    line-height:1;
}

.trx-parent{
    font-size:11px;
    color:#64748b;
    margin-top:3px;
}
.log-badge{
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    border:1px solid transparent;
}

.log-badge.action{
    background:#eef6ff;
    color:#1d4ed8;
    border-color:#d6e5ff;
}

.log-badge.entity{
    background:#f8fafc;
    color:#475569;
    border-color:#e2e8f0;
}

.log-desc,
.log-url{
    max-width:280px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.log-url{
    direction:ltr;
    text-align:left;
    color:#64748b;
    font-size:11px;
}

.ip-text{
    font-family:monospace;
    font-size:11px;
    color:#475569;
}

.log-date{
    font-size:11px;
    color:#475569;
    white-space:nowrap;
}

.trx-table th.text-center,
.trx-table td.text-center{
    text-align:center;
}
.trx-number-row{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    margin-bottom:3px;
}

.child-chip{
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:10px;
    padding:2px 6px;
    border-radius:6px;
    background:#fef2f2;
    color:#dc2626;
    font-weight:700;
}

.trx-parent{
    font-size:11px;
    color:#64748b;
    margin-top:2px;
}
.page-link.dots{
    pointer-events:none;
    background:transparent;
    border:none;
    min-width:auto;
}
.ultra-footer{
    text-align:center;
    font-size:12px;
    color:#9ca3af;
    margin-top:30px;
    padding:10px;
}

.ultra-footer .footer-sep{
    margin:0 6px;
    color:#d1d5db;
}