/*! EDMS Theme (RTL) – Consolidated stylesheet
   Colors: Forest #054239, Golden Wheat #b9a779
   Font: Cairo
   Author: ChatGPT – مشروع الديوان
*/

/* =====================
   1) Design Tokens
   ===================== */
:root{
  /* Brand */
  --brand-primary:#054239;
  --brand-primary-rgb:5,66,57;
  --brand-accent:#b9a779;
  --brand-accent-rgb:185,167,121;

  /* Neutrals / Surfaces */
  --surface-0:#ffffff;
  --surface-1:#f6f7f4;
  --surface-2:#eef0ec;
  --ink:#13231f;
  --muted:#5b6a66;

  /* States */
  --ok:#2f9e44;
  --warn:#e67700;
  --danger:#d6336c;
  --info:#1c7ed6;

  /* Layout */
  --radius-xl:1.25rem;
  --radius-lg:1.1rem;
  --radius-md:.75rem;
  --radius-sm:.5rem;
  --shadow-sm:0 4px 10px rgba(0,0,0,.04);
  --shadow-md:0 10px 20px rgba(0,0,0,.06), 0 3px 8px rgba(0,0,0,.05);
  --shadow-lg:0 22px 44px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.08);
}

/* Optional dark theme */
.theme-dark{
  --ink:#e3eee9; --muted:#9ab2aa;
  --surface-0:#0f1715; --surface-1:#101c19; --surface-2:#13231f;
  --shadow-sm:0 4px 10px rgba(0,0,0,.35);
  --shadow-md:0 10px 20px rgba(0,0,0,.45),0 3px 10px rgba(0,0,0,.3);
  --shadow-lg:0 22px 44px rgba(0,0,0,.55),0 6px 16px rgba(0,0,0,.35);
}

/* Base */
html,body{font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;color:var(--ink);background:var(--surface-1)}

/* =====================
   2) Global / Bootstrap Overrides
   ===================== */
.navbar{background:var(--surface-0); box-shadow:var(--shadow-sm)}
.navbar-brand{color:var(--brand-primary); font-weight:800}
.nav-link{color:var(--ink)}
.nav-link.active,.nav-link:hover{color:var(--brand-primary)}

.btn{border-radius:var(--radius-md)}
.btn-primary{
  --bs-btn-bg:var(--brand-primary);
  --bs-btn-border-color:var(--brand-primary);
  --bs-btn-hover-bg:rgba(var(--brand-primary-rgb),.9);
  --bs-btn-hover-border-color:rgba(var(--brand-primary-rgb),.95);
  box-shadow:0 10px 22px rgba(var(--brand-primary-rgb),.18);
}
.btn-accent{
  --bs-btn-color:var(--brand-accent);
  --bs-btn-border-color:var(--brand-accent);
  --bs-btn-hover-bg:var(--brand-accent);
  --bs-btn-hover-border-color:var(--brand-accent);
  --bs-btn-hover-color:#1c2322;
  box-shadow:0 10px 22px rgba(var(--brand-accent-rgb),.18);
}
.btn-ghost{color:var(--brand-primary); background:rgba(var(--brand-primary-rgb),.07); border:1px solid rgba(var(--brand-primary-rgb),.18)}
.btn-group .btn{border-radius:999px}

.form-control,.form-select,.form-check-input,.input-group-text{
  border-radius:var(--radius-sm);
  border-color:rgba(var(--brand-primary-rgb),.22);
  background:var(--surface-0);
  color:var(--ink);
}
.form-control:focus,.form-select:focus{
  border-color:rgba(var(--brand-primary-rgb),.66);
  box-shadow:0 0 0 .2rem rgba(var(--brand-primary-rgb),.15);
}

.card{border:0; border-radius:var(--radius-xl); background:var(--surface-0); box-shadow:var(--shadow-md)}
.card-header{
  border:0; color:var(--brand-primary); font-weight:800;
  background:linear-gradient(135deg, rgba(var(--brand-primary-rgb),.07), transparent)
}
.list-group-item{border-color:rgba(var(--brand-primary-rgb),.12)}

.table{--bs-table-color:var(--ink); --bs-table-striped-bg:rgba(var(--brand-accent-rgb),.07); --bs-table-hover-bg:rgba(var(--brand-primary-rgb),.06)}
.table thead th{border-bottom:2px solid rgba(var(--brand-primary-rgb),.25); color:var(--brand-primary); font-weight:800}
.table-rounded{overflow:hidden; border-radius:var(--radius-lg); box-shadow:var(--shadow-md)}

.pagination .page-link{color:var(--brand-primary); border-radius:999px; border:1px solid rgba(var(--brand-primary-rgb),.25)}
.pagination .page-item.active .page-link{background:var(--brand-primary); border-color:var(--brand-primary)}

.progress{background:rgba(var(--brand-primary-rgb),.08)}
.progress-bar{background-color:var(--brand-primary)}

.badge-accent{background:var(--brand-accent); color:#1f2423}
.breadcrumb{--bs-breadcrumb-divider:'/'}
.tooltip-inner{background:var(--brand-primary)}
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before{border-top-color:var(--brand-primary)}

/* =====================
   3) Utilities & Chips & Extras
   ===================== */
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:999px;font-weight:600;font-size:.8rem;border:1px solid transparent}
.chip-tag{background:rgba(var(--brand-accent-rgb),.25); color:#1f2523; border-color:rgba(var(--brand-accent-rgb),.5)}
.chip-priority{background:rgba(230,119,0,.15); color:#7a4300; border-color:rgba(230,119,0,.4)}
.chip-internal{background:rgba(var(--brand-primary-rgb),.12); color:var(--brand-primary); border-color:rgba(var(--brand-primary-rgb),.35)}
.chip-urgent{background:rgba(214,51,108,.12); color:#8a2042; border-color:rgba(214,51,108,.35)}
.chip-success{background:rgba(47,158,68,.12); color:#1c5e2a; border-color:rgba(47,158,68,.35)}

.filter-pill{border-radius:999px; border:1px solid rgba(var(--brand-primary-rgb),.2); background:rgba(var(--brand-primary-rgb),.05)}
.notify-dot{position:relative}
.notify-dot:before{content:""; position:absolute; top:-2px; left:-2px; width:10px; height:10px; background:var(--danger); border:2px solid var(--surface-0); border-radius:50%; animation:glow 1.6s ease-in-out infinite}
.status-dot{width:.6rem;height:.6rem;border-radius:50%;display:inline-block;margin-left:.35rem}
.stamp{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;border:2px dashed rgba(var(--brand-primary-rgb),.45);color:var(--brand-primary);border-radius:.6rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase}

/* Switch */
.switch{position:relative; width:48px; height:26px}
.switch input{opacity:0; width:0; height:0}
.slider{position:absolute; inset:0; background:rgba(var(--brand-primary-rgb),.2); border-radius:999px; transition:.2s}
.slider:before{content:""; position:absolute; height:20px; width:20px; right:3px; top:3px; background:#fff; border-radius:50%; box-shadow:var(--shadow-sm); transition:.2s}
.switch input:checked + .slider{background:var(--brand-accent)}
.switch input:checked + .slider:before{right:25px}

/* =====================
   4) Animations
   ===================== */
@keyframes fadeInUp{from{opacity:0; transform:translate3d(0,16px,0)} to{opacity:1; transform:none}}
@keyframes slideInR{from{opacity:0; transform:translateX(24px)} to{opacity:1; transform:none}}
@keyframes scaleIn{from{opacity:0; transform:scale(.96)} to{opacity:1; transform:scale(1)}}
@keyframes shimmer{0%{background-position:200% 0} 100%{background-position:-200% 0}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(var(--brand-accent-rgb),0)} 50%{box-shadow:0 0 0 .5rem rgba(var(--brand-accent-rgb),.12)}}

.anim{opacity:0}
.anim.in{opacity:1; animation:fadeInUp .7s ease-out both}
.anim-s.in{animation:scaleIn .45s ease-out both}
.anim-r.in{animation:slideInR .6s ease-out both}
.skeleton{background:linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.12), rgba(0,0,0,.06)); background-size:200% 100%; animation:shimmer 1.2s linear infinite}
.hover-float:hover{animation: floatPulse 1.6s ease-in-out infinite}

@keyframes floatPulse{0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* =====================
   5) Layout Shells (EDMS)
   ===================== */
.edms-header{ background:var(--surface-0); border-bottom:1px solid rgba(var(--brand-primary-rgb), .08); position:sticky; top:0; z-index:1010 }
.edms-shell{ min-height:100vh; display:grid; grid-template-columns: 280px 1fr }
.edms-sidebar{ background:linear-gradient(180deg, #fff, #f9faf7); border-left:1px solid rgba(var(--brand-primary-rgb), .08); box-shadow: var(--shadow-sm) }
.edms-sidebar .section-title{ padding:.75rem 1rem; color:var(--muted); font-weight:700; font-size:.8rem; letter-spacing:.8px; text-transform:uppercase }
.edms-nav a{ display:flex; align-items:center; gap:.6rem; padding:.6rem .9rem; border-radius: var(--radius-sm); color:var(--ink); text-decoration:none }
.edms-nav a.active, .edms-nav a:hover{ background:rgba(var(--brand-primary-rgb), .07); color:var(--brand-primary) }

.header{background:var(--surface-0); border-bottom:1px solid rgba(var(--brand-primary-rgb),.08); position:sticky; top:0; z-index:1010}
.tools{position:sticky; top:64px; z-index:1005; background:var(--surface-1); padding:.6rem; border-bottom:1px solid rgba(var(--brand-primary-rgb),.08); border-radius:var(--radius-lg)}

@media (max-width:992px){
  .edms-shell{ grid-template-columns:1fr }
  .edms-sidebar{ display:none }
}

/* =====================
   6) Components (EDMS)
   ===================== */
/* Document row card */
.doc-row{ display:grid; grid-template-columns: 1fr auto; gap:.75rem; padding:.85rem; border-radius: var(--radius-md); background:var(--surface-0); box-shadow: var(--shadow-sm); border:1px solid rgba(var(--brand-primary-rgb), .08) }
.doc-row:hover{ border-color: rgba(var(--brand-primary-rgb), .2); transform: translateY(-1px); transition:.2s ease }
.doc-meta{ color:var(--muted); font-size:.85rem }
/* Timeline */
.timeline{ position:relative; padding-right: 1rem }
.timeline::before{ content:""; position:absolute; right:.4rem; top:0; bottom:0; width:2px; background: rgba(var(--brand-primary-rgb), .15) }
.tl-item{ position:relative; padding-right:1.6rem; margin-bottom:1rem }
.tl-item::before{ content:""; position:absolute; right:-2px; top:.3rem; width:.75rem; height:.75rem; background: var(--brand-accent); border:2px solid #fff; border-radius:50%; box-shadow: var(--shadow-sm) }
/* File card */
.file-card{ display:flex; align-items:center; gap:.8rem; border:1px dashed rgba(var(--brand-primary-rgb), .25); padding:.8rem; border-radius: var(--radius-md); background: rgba(var(--brand-primary-rgb), .02) }
.file-icon{ width:44px; height:44px; display:grid; place-items:center; background: rgba(var(--brand-primary-rgb), .08); border-radius: .6rem; color: var(--brand-primary) }
/* Route bar */
.route-bar{ display:flex; gap:.5rem; flex-wrap:wrap }
.route-bar .btn{ border-radius: 999px; padding:.35rem .9rem }
/* Legends */
.legend{ display:flex; flex-wrap:wrap; gap:.4rem .8rem }
.legend .item{ display:flex; align-items:center; gap:.4rem; font-size:.85rem }
.legend .dot{ width:.7rem; height:.7rem; border-radius:50%; display:inline-block }
/* Sticky tools over table */
.sticky-tools{ position:sticky; top:68px; z-index:1000; background: var(--surface-1); padding:.5rem; border-bottom:1px solid rgba(var(--brand-primary-rgb), .08) }
/* Empty state */
.empty{ text-align:center; padding:3rem 1rem; color:var(--muted) }
/* Uploader */
.uploader{ border:2px dashed rgba(var(--brand-primary-rgb), .25); padding:1rem; border-radius:var(--radius-md); background:linear-gradient(180deg, rgba(var(--brand-accent-rgb), .08), transparent) }
.uploader:hover{ animation: glow 1.6s ease-in-out infinite }

/* =====================
   7) Page-specific helpers
   ===================== */
/* Hero */
.hero{
  background: radial-gradient(80% 60% at 50% 40%, rgba(var(--brand-accent-rgb), .25), transparent),
              linear-gradient(180deg, #ffffff, #f6f7f4);
  border-bottom: 1px solid rgba(var(--brand-primary-rgb), .08);
}
/* Offcanvas rounding */
.offcanvas{ border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg) }

/* Pills */
.pill{border-radius:999px}

/* =====================
   8) Print tweaks
   ===================== */
@media print{
  .btn,.tools,.sticky-tools,.offcanvas,.modal,.toast{display:none !important}
  .card{box-shadow:none}
}


/* اللون الأساسي للنظام */
:root {
    --brand-primary: #054239;
    --brand-primary-hover: #063f33;
    --brand-accent: #b9a779;
    --brand-accent-hover: #a18f66;
    --brand-danger: #b03a2e;
    --brand-success: #218838;
    --brand-secondary: #6c757d;
}

/* زر رئيسي */
.btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 8px;
    transition: 0.25s;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--brand-primary-hover) !important;
        border-color: var(--brand-primary-hover) !important;
    }

/* زر الثانوي */
.btn-secondary {
    background-color: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
    color: #fff !important;
}

    .btn-secondary:hover {
        background-color: #5a6268 !important;
    }

/* زر النجاح */
.btn-success {
    background-color: var(--brand-success) !important;
    border-color: var(--brand-success) !important;
    color: #fff !important;
}

    .btn-success:hover {
        background-color: #1e7e34 !important;
    }

/* زر الخطر */
.btn-danger {
    background-color: var(--brand-danger) !important;
    border-color: var(--brand-danger) !important;
    color: #fff !important;
}

    .btn-danger:hover {
        background-color: #922b21 !important;
    }

/* زر التمييز (الذهبي) */
.btn-accent {
    background-color: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    color: #fff !important;
    font-weight: 600;
}

    .btn-accent:hover {
        background-color: var(--brand-accent-hover) !important;
        border-color: var(--brand-accent-hover) !important;
    }

/* أزرار شبحية (outline) */
.btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    background-color: transparent !important;
}

    .btn-outline-primary:hover {
        background-color: var(--brand-primary) !important;
        color: #fff !important;
    }

.btn-outline-accent {
    color: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    background-color: transparent !important;
}

    .btn-outline-accent:hover {
        background-color: var(--brand-accent) !important;
        color: #fff !important;
    }

/* أزرار بأيقونات */
.btn i {
    margin-inline-end: 6px;
    font-size: 1.1rem;
    vertical-align: middle;
}


.upload-zone {
    border: 2px dashed var(--brand-accent);
    border-radius: var(--radius-lg);
    padding: 2rem;
    background: var(--surface-0);
    color: var(--brand-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .upload-zone:hover,
    .upload-zone.dragover {
        background: rgba(185, 167, 121, 0.08);
        border-color: var(--brand-primary);
        box-shadow: 0 0 10px rgba(5, 66, 57, 0.2);
    }

.upload-content i {
    color: var(--brand-accent);
}

.list-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem;
}

.file-icon {
    color: var(--brand-primary);
    margin-inline-end: 8px;
}

.remove-file {
    color: #dc3545;
    cursor: pointer;
    font-size: 1.1rem;
    transition: 0.2s;
}

    .remove-file:hover {
        color: #a71d2a;
    }