:root{
  --primary:#6d5efc; --primary-2:#8b7bff;
  --secondary:#16c79a; --secondary-2:#1dd1a1;
  --accent:#ff6b6b; --warning:#f7b731;
  --dark:#1f2d3d; --muted:#6b7c93; --light:#f6f9fc;
  --sidebar:#1f2937; --sidebar-2:#111827;
  --card:#ffffff; --grad:linear-gradient(135deg,#6d5efc 0%,#16c79a 100%);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(130deg,#eef2f7 0%,#dde6f3 100%);color:var(--dark);display:flex}
.container{display:flex;width:100%}

/* Sidebar */
.sidebar{width:260px;background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));color:#fff;height:100vh;position:fixed;right:0;top:0;padding:22px 0;box-shadow:0 10px 25px rgba(2,12,27,.25)}
.logo{text-align:center;padding:8px 16px 18px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:14px}
.logo h2{font-size:1.35rem;display:flex;align-items:center;justify-content:center;gap:10px}
.logo i{color:#ffd166;filter:drop-shadow(0 0 6px rgba(255,209,102,.8))}

.user-profile{display:flex;flex-direction:column;align-items:center;margin:16px 0 22px}
.user-avatar{width:82px;height:82px;border-radius:50%;background:linear-gradient(135deg,#ffd166,#feca57);display:flex;align-items:center;justify-content:center;font-size:2rem;color:#1f2937;border:4px solid rgba(255,255,255,.9);box-shadow:0 10px 20px rgba(0,0,0,.18)}
.user-name{font-weight:700;margin-top:8px}
.user-role{font-size:.85rem;color:#cbd5e1}

.nav-links{list-style:none;margin:0;padding:6px 8px}
.nav-links li{margin:6px 8px}
.nav-links a{display:flex;align-items:center;gap:10px;color:#e5e7eb;text-decoration:none;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.03);transition:.25s}
.nav-links a:hover{background:rgba(255,255,255,.08);transform:translateX(-4px)}
.nav-links li.active a{background:linear-gradient(135deg,#6d5efc33,#16c79a33);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.18)}

/* Main */
.main-content{flex:1;margin-right:260px;padding:20px 22px}
.header{background:linear-gradient(135deg,#ffffff,#f7fafc);padding:16px 22px;border-radius:16px;box-shadow:0 10px 25px rgba(31,45,61,.08);display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.page-title{font-size:1.5rem;display:flex;align-items:center;gap:10px}
.page-title i{color:var(--primary)}

.search-box{display:flex;align-items:center;background:#fff;border-radius:30px;padding:6px 14px;width:320px;border:1px solid #e6ecf1;box-shadow:inset 0 1px 0 rgba(0,0,0,.02)}
.search-box input{border:none;outline:none;background:transparent;padding:8px;width:100%}

/* Cards / grid */
.card{background:var(--card);border-radius:16px;padding:18px;box-shadow:0 15px 25px rgba(31,45,61,.08)}
.grid{display:grid;gap:16px}
.stats-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:18px}
.stat-card{background:#fff;border-radius:16px;padding:16px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden}
.stat-card::after{content:"";position:absolute;inset:auto 0 -40px 0;height:100px;background:var(--grad);opacity:.15;filter:blur(30px)}
.stat-icon{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;background:linear-gradient(135deg,#f1f5f9,#eef2ff)}
.pending .stat-icon{color:#f7b731}
.progress .stat-icon{color:#6d5efc}
.completed .stat-icon{color:#16c79a}
.cancelled .stat-icon{color:#ff6b6b}
.stat-info h3{margin:0 0 6px;font-size:1.6rem}

/* Buttons */
.btn{padding:10px 16px;border:none;border-radius:14px;cursor:pointer;font-weight:700;display:inline-flex;align-items:center;gap:8px;transition:.2s}
.btn i{font-size:.95rem}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 20px rgba(109,94,252,.25)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-outline{background:#fff;border:1px solid #e6ecf1;color:var(--dark)}
.btn-danger{background:linear-gradient(135deg,#ff7f7f,#ff5252);color:#fff}

/* Table */
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{color:#64748b;font-weight:700;text-align:right;padding:10px 14px}
.table td{background:#fff;padding:12px 14px;border-top:1px solid #eef2f7;border-bottom:1px solid #eef2f7}
.table tr td:first-child{border-radius:10px 0 0 10px}
.table tr td:last-child{border-radius:0 10px 10px 0}

/* Tags */
.badge{display:inline-block;padding:6px 10px;border-radius:14px;font-size:.82rem;background:#eef2f7;color:#334155}
.task-status{padding:6px 12px;border-radius:16px;font-size:.85rem}
.status-pending{background:#fff6e5;color:#a37004}
.status-progress{background:#eff0ff;color:#5146ff}
.status-completed{background:#e6fff6;color:#0f9d76}
.status-cancelled{background:#ffe9e9;color:#cc3333}
.task-priority{padding:6px 12px;border-radius:16px;font-size:.85rem}
.priority-high{background:#ffe9e9;color:#d63031}
.priority-medium{background:#fff6e5;color:#a37004}
.priority-low{background:#e9fff6;color:#0f9d76}

/* Forms */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.input,select,textarea{width:100%;padding:11px;border:1px solid #e6ecf1;border-radius:12px;background:#fff}
.input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(109,94,252,.1);border-color:#d9d6ff}

/* Toggle groups (أولوية/حالة) */
.toggle-group{display:flex;gap:8px;flex-wrap:wrap}
.toggle{border:1px solid #e6ecf1;border-radius:12px;padding:8px 12px;background:#fff;cursor:pointer;user-select:none;transition:.2s}
.toggle input{display:none}
.toggle.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 10px 20px rgba(109,94,252,.2)}

/* Responsive */
@media(max-width:992px){
  .sidebar{width:84px}
  .sidebar .logo span,.sidebar .user-name,.sidebar .user-role,.nav-links a span{display:none}
  .main-content{margin-right:84px}
}
/* Quill RTL & styling */
#quill-editor { background:#fff; border:1px solid #e6ecf1; border-radius:12px; }
.ql-toolbar.ql-snow { border:1px solid #e6ecf1; border-radius:12px 12px 0 0; background:#fafbff; }
.ql-container.ql-snow { border:1px solid #e6ecf1; border-top:0; border-radius:0 0 12px 12px; }
.ql-editor { min-height:240px; direction:rtl; text-align:right; font-family:'Cairo',system-ui; }
/* Quill RTL & styling */
#quill-editor { background:#fff; border:1px solid #e6ecf1; border-radius:12px; }
.ql-toolbar.ql-snow { border:1px solid #e6ecf1; border-radius:12px 12px 0 0; background:#fafbff; }
.ql-container.ql-snow { border:1px solid #e6ecf1; border-top:0; border-radius:0 0 12px 12px; }
.ql-editor { min-height:240px; direction:rtl; text-align:right; font-family:'Cairo',system-ui; }
/* ====== File input fix & styling ====== */
.input[type="file"]{
  width: 100%;
  padding: 6px 8px;          /* خفّضنا الحشوة لأن المتصفح يدير الزر داخليًا */
  height: auto;
  line-height: 1.4;
  border: 1px solid #e6ecf1;
  border-radius: 12px;
  background: #fff;
  color: #475569;
  overflow: visible;          /* مهم: يمنع قص زر الاستعراض */
}

/* زر الاستعراض (كروم/إيدج وفايرفوكس الحديثة) */
.input[type="file"]::file-selector-button,
.input[type="file"]::-webkit-file-upload-button{
  margin-inline-start: 8px;   /* يحافظ على موقعه مع RTL */
  padding: 8px 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg,#6d5efc,#16c79a);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease;
}
.input[type="file"]:hover::file-selector-button,
.input[type="file"]:hover::-webkit-file-upload-button{
  transform: translateY(-1px);
}

/* اتجاه عربي للنص الافتراضي "لم يتم اختيار أي ملف" */
html[dir="rtl"] .input[type="file"]{ direction: rtl; }

/* متصفحات قديمة لا تدعم ::file-selector-button */
@supports not selector(input::file-selector-button){
  .input[type="file"]{ padding: 6px; }
}