/* ===============================
   LOCAL CAIRO FONT
=============================== */

@font-face {
  font-family: "Cairo";
  src: url("../fonts/Cairo-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Cairo";
  src: url("../fonts/Cairo-Bold.ttf") format("truetype");
  font-weight: 700;
}





/* ===============================
   LUXURY DARK BLUE + GOLD THEME
=============================== */

:root{
  --bg:#f6f8fc;
  --bg2:#ffffff;

  --card:#ffffff;
  --card-soft:#fbfdff;

  --text:#17233a;
  --muted:#607089;

  --gold:#c6a74a;
  --gold-soft:rgba(198,167,74,.15);
  --gold-glow:rgba(198,167,74,.25);

  --danger:#b42318;
  --line:rgba(15,39,71,.09);

  --primary:#0f2747;
  --primary-2:#1f497d;
  --border:rgba(15,39,71,.10);
}

*{
  box-sizing:border-box;
}


body{
  margin: 0;
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  letter-spacing: .2px;

  background:
    radial-gradient(circle at 88% 12%, rgba(198,167,74,.10), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 42%, #f6f8fc 100%);
  color:var(--text);
}

h1, h2, h3 {
  font-weight: 700;
}

p, small {
  font-weight: 400;
}

button {
  font-weight: 600;
}


/* ===============================
   LOGIN
=============================== */

.lock-screen{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
}

.login-box{
  background:linear-gradient(160deg,var(--card),var(--card-soft));
  padding:30px;
  border-radius:20px;
  width:340px;
  border:1px solid var(--gold-soft);
  box-shadow:
    0 20px 50px rgba(0,0,0,.6),
    inset 0 0 30px rgba(198,167,74,.05);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.login-box h2{
  margin:0 0 10px 0;
  text-align:center;
}

.login-box input{
  background:rgba(255,255,255,.03);
  border:1px solid var(--gold-soft);
  border-radius:12px;
  padding:10px;
  color:var(--text);
}

.login-box input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 10px var(--gold-glow);
}

/* ===============================
   APP LAYOUT
=============================== */

.app{
  max-width:1100px;
  margin:40px auto;
  padding:20px;
}

.hidden{
  display:none;
}



/* ===============================
   STATUS PILLS
=============================== */

.stats{
  display:flex;
  gap:12px;
}

.pill{
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--gold-soft);
  background:rgba(255,255,255,.03);
  font-size:13px;
  transition:.2s ease;
}

.pill:hover{
  border-color:var(--gold);
  box-shadow:0 0 10px var(--gold-glow);
}
/* LATE PILL */

.pill.late {
  border: 1px solid rgba(255,120,120,.25);
  background: rgba(255,120,120,.05);
}

.late-dot {
  background: #e57373;
  box-shadow: 0 0 8px rgba(255,120,120,.6);
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--muted);
  display:inline-block;
  margin-left:6px;
}


/* ===============================
   CARD
=============================== */

.card{
  background:linear-gradient(160deg,var(--card),var(--card-soft));
  padding:22px;
  border-radius:22px;
  border:1px solid var(--gold-soft);
  box-shadow:
    0 15px 40px rgba(0,0,0,.6),
    inset 0 0 25px rgba(198,167,74,.04);
}

.card h2{
  margin-top:0;
  position:relative;
  display:inline-block;
}

.card h2::after{
  content:"";
  position:absolute;
  bottom:-6px;
  right:0;
  width:40%;
  height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
}

.mytodo-public-tools-intro{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.8;
}

/* ===============================
   FORM ELEMENTS
=============================== */

.row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}

input,textarea,select{
  background:rgba(255,255,255,.03);
  border:1px solid var(--gold-soft);
  border-radius:12px;
  padding:10px;
  color:var(--text);
  transition:.2s ease;
}

input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 10px var(--gold-glow);
}

textarea{
  min-height:90px;
  resize:vertical;
}

/* ===============================
   BUTTON SYSTEM
=============================== */

button{
  background:rgba(255,255,255,.04);
  color:var(--text);
  border:1px solid var(--gold-soft);
  padding:10px 18px;
  border-radius:14px;
  cursor:pointer;
  transition:.25s ease;
  backdrop-filter:blur(6px);
}

button:hover{
  border-color:var(--gold);
  box-shadow:0 0 12px var(--gold-glow);
  transform:translateY(-1px);
}

.btn-danger{
  background:rgba(255,90,90,.08);
  color:var(--danger);
  border:1px solid rgba(255,90,90,.25);
}

.btn-danger:hover{
  border-color:var(--danger);
  box-shadow:0 0 12px rgba(255,90,90,.4);
}

/* ===============================
   TOOLBAR
=============================== */

.toolbar{
  display:flex;
  gap:12px;
  margin-top:18px;
  flex-wrap:wrap;
}

/* ===============================
   LIST
=============================== */

.list{
  list-style:none;
  padding:0;
  margin:20px 0 0 0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.list li{
  background:rgba(255,255,255,.03);
  padding:14px;
  border-radius:14px;
  border:1px solid var(--gold-soft);
  transition:.2s ease;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
/* === PATCH: Done task style (soft gold clean) === */
.list li.is-done{
  background: linear-gradient(160deg, rgba(198,167,74,.16), rgba(198,167,74,.06));
  border: 1px solid rgba(198,167,74,.35);
  box-shadow: inset 0 0 18px rgba(198,167,74,.10);
}

/* خلّي البطاقة الداخلية شفافة حتى لا تصير بطاقة داخل بطاقة */
.list li.is-done .task-card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* لمسة خفيفة على النص */
.list li.is-done .task-body p{
  opacity: .92;
}

.list li.is-done .task-header h3{
  opacity: .95;
}
/* === END PATCH === */

/* === PATCH: ensure cards take full width === */
.task-card{
  width:100%;
}
/* === END PATCH === */
/* === PATCH: Done task card style (soft gold) === */

.list li .task-card.is-done .task-body p,
.list li .task-card.is-done .task-header h3{
  color: #fff7dd; /* ذهبي فاتح مقروء */
}

.list li .task-card.is-done .task-info{
  color: rgba(255, 247, 221, .85);
  font-weight: 600;
}
/* === END PATCH === */


.list li:hover{
  border-color:var(--gold);
  box-shadow:0 0 10px var(--gold-glow);
}



/* ===============================
   SMALL UTILITIES
=============================== */

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



.priority-badge {
  padding:4px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
}

.priority-high {
  background:rgba(239,68,68,.15);
  color:#ef4444;
}

.priority-medium {
  background:rgba(251,191,36,.15);
  color:#fbbf24;
}

.priority-low {
  background:rgba(34,197,94,.15);
  color:#22c55e;
}

/* Animation */
.fade-in {
  animation: fadeIn .35s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity:0;
    transform: translateY(8px);
  }
  to {
    opacity:1;
    transform: translateY(0);
  }
}



/* =========================
   SELECT DARK MODE FIX
========================= */

select {
  background: linear-gradient(145deg, #0f1935, #0c152d);
  color: var(--text);
  border: 1px solid var(--gold-soft);
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
}

/* شكل السهم */
select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(198,167,74,.35);
}

/* أهم سطر */
select option {
  background-color: #0f1935;  /* أزرق غامق */
  color: #e6ecff;             /* نص واضح */
}
select option:hover {
  background-color: #14224a;
}


/* ================================
   MOBILE OPTIMIZATION
================================ */

@media (max-width: 768px) {

  body {
    font-size: 14px; /* تصغير الخط العام قليلاً */
  }

  h1 {
    font-size: 20px;
  }

  h2 {
    font-size: 16px;
  }

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

  .card {
    padding: 16px;
  }

  input,
  textarea,
  select {
    font-size: 14px;
  }

  button {
    font-size: 13px;
    padding: 8px 14px;
  }

  .task-card h3 {
    font-size: 15px;
  }

  .task-body p {
    font-size: 13px;
  }

  .task-info {
    font-size: 12px;
  }

}



.app-header{
  display:flex;
  justify-content:center;
  text-align:center;
  margin-bottom:30px;
}

.header-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.main-title{
  font-size:32px;
  font-weight:700;
  background:linear-gradient(90deg,#c6a74a,#f1d37a);
  -webkit-background-clip:text;
  background-clip:text;           /* أضف هذا السطر */
  -webkit-text-fill-color:transparent;
  letter-spacing:.5px;
}


.status-indicator{
  cursor:pointer;
  font-size:14px;
  padding:6px 14px;
  border-radius:20px;
  border:1px solid rgba(198,167,74,.3);
  transition:.2s ease;
}

.status-indicator.online{
  color:#7dffb3;
  border-color:rgba(125,255,179,.4);
}

.status-indicator:hover{
  box-shadow:0 0 10px rgba(198,167,74,.4);
}


.stats{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}


.status-icon {
  width:18px;
  height:18px;
  margin-left:6px;
  fill:currentColor;
  transition:.3s ease;
}

.status-indicator {
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
}

/* ONLINE */
.status-indicator.online {
  color:#7dffb3;
  border-color:rgba(125,255,179,.4);
}

/* OFFLINE */
.status-indicator.offline {
  color:#ff7b7b;
  border-color:rgba(255,123,123,.4);
}



/* ===============================
   GLOBAL ACCORDION SYSTEM
=============================== */

.section-accordion {
  margin-bottom:18px;
  border-radius:18px;
  overflow:hidden; /* نخليه كما هو لباقي الأقسام */
  border:1px solid var(--gold-soft);
  background:linear-gradient(160deg,var(--card),var(--card-soft));
}

/* ✅ استثناء: داخل planner نسمح بالتمرير الأفقي بدون قص */
.section-accordion .planner-wrap{
  overflow-x:auto !important;
  overflow-y:hidden !important;
}


.section-header {
  padding:16px 20px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:600;
  transition:.25s ease;
}

.section-header:hover {
  background:rgba(198,167,74,.05);
}

.section-content {
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease, opacity .3s ease;
  opacity:0;
  padding:0 20px;
}

.section-accordion.active .section-content {
  max-height: 9000px;
  opacity:1;
  padding:20px;
  
}


/* === PATCH: Accordion triangle color + size === */
.section-icon{
  width: 30px;              /* أكبر قليلًا (كان 18 في HTML) */
  height:30px;
  color: var(--gold);      /* يجعل fill="currentColor" يصير ذهبي */
  flex:0 0 auto;
  transition: transform .3s ease;
}
/* === END PATCH === */


.section-accordion.active .section-icon {
  transform:rotate(180deg);
}

/* ===============================
   FOOTER
=============================== */

.app-footer {
  margin-top:60px;
  padding:25px;
  text-align:center;
  font-size:13px;
  color:var(--muted);
  border-top:1px solid var(--gold-soft);
}

.app-footer strong {
  color:var(--gold);
}


/* ===============================
   FLOATING SCROLL TO TOP (STRONGER)
=============================== */
.scroll-top{
  position:fixed;
  left:18px;
  bottom:22px;

  width:58px;          /* كان 44 */
  height:58px;         /* كان 44 */
  border-radius:18px;

  border:1px solid rgba(198,167,74,.6);
  background:linear-gradient(145deg,#0f1935,#0c152d);
  box-shadow:
    0 18px 35px rgba(0,0,0,.6),
    0 0 18px rgba(198,167,74,.25);

  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:9999;

  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:.3s ease;
}

.scroll-top.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.scroll-top-icon{
  width:26px;      /* كان 20 */
  height:26px;     /* كان 20 */
  fill:var(--gold);
}

.scroll-top:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:
    0 0 22px rgba(198,167,74,.45),
    0 18px 35px rgba(0,0,0,.6);
}

/* موبايل */
@media (max-width:768px){
  .scroll-top{
    width:52px;
    height:52px;
    border-radius:16px;
  }

  .scroll-top-icon{
    width:22px;
    height:22px;
  }
}


.type-badge{
  margin-right:8px;
  padding:4px 10px;
  border-radius:12px;
  font-size:11px;
  font-weight:600;
}

.type-badge.work{
  background:rgba(34,197,94,.15);
  color:#22c55e;
}

.type-badge.personal{
  background:rgba(59,130,246,.15);
  color:#3b82f6;
}
.status-icon,
.section-icon {
  pointer-events: none;
}


/* ===============================
   PLANNER TABLE (ENHANCED)
=============================== */
.planner-wrap{
  width:100%;
  max-width:100%;

  /* أهم سطرين لمنع القص على الموبايل */
  overflow-x:auto;
  overflow-y:hidden;

  -webkit-overflow-scrolling: touch;

  border:1px solid rgba(198,167,74,.35);
  border-radius:18px;
  box-shadow: inset 0 0 25px rgba(198,167,74,.05);
}


.planner-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;

  /* ✅ يمنع التمدد ويخلي الأعمدة تتوزع صح */
  table-layout: fixed;

  /* ✅ مهم: لا تفرض عرض كبير */
  min-width: 0;

  background:rgba(255,255,255,.015);

  
}
/* توزيع الأعمدة: الموعد / العنوان / التصنيف / الحالة */
.planner-table th:nth-child(1),
.planner-table td:nth-child(1){ width: 26%; }

.planner-table th:nth-child(2),
.planner-table td:nth-child(2){ width: 44%; }

.planner-table th:nth-child(3),
.planner-table td:nth-child(3){ width: 15%; }

.planner-table th:nth-child(4),
.planner-table td:nth-child(4){ width: 15%; }


/* HEADER */
.planner-table thead th{
  position:sticky;
  top:0;
  z-index:2;

  text-align:center;
  padding:14px 12px;

  color:var(--gold);
  font-weight:800;
  letter-spacing:.2px;

  background:linear-gradient(145deg, rgba(198,167,74,.14), rgba(16,26,53,.65));
  border-bottom:1px solid rgba(198,167,74,.35);
}

/* CELLS */
.planner-table th,
.planner-table td{
  padding:12px 12px;
  text-align:center;          /* ✅ توسيط */
  vertical-align:middle;      /* ✅ توسيط عمودي */
  border-bottom:1px solid rgba(198,167,74,.18); /* ✅ خطوط ذهبية */
}

/* Vertical gold lines */
.planner-table td + td,
.planner-table th + th{
  border-right:1px solid rgba(198,167,74,.12);
}

/* ROW HOVER */
.planner-table tbody tr{
  transition:.2s ease;
}
.planner-table tbody tr:hover{
  background:rgba(198,167,74,.06);
  box-shadow: inset 0 0 0 1px rgba(198,167,74,.18);
}

/* Title cell: allow nicer reading */
.planner-table td:nth-child(3){
  text-align:right; /* العنوان بالعربي أفضل يمين */
  vertical-align:middle;
  line-height:1.5;
}

/* Description */
.planner-desc{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  text-align:right;
}

/* Type badge */
.planner-type{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(198,167,74,.22);
  background:rgba(255,255,255,.03);
}

.planner-type.work{
  border-color:rgba(34,197,94,.28);
  color:#22c55e;
  background:rgba(34,197,94,.10);
}

.planner-type.personal{
  border-color:rgba(59,130,246,.28);
  color:#3b82f6;
  background:rgba(59,130,246,.10);
}

/* Status badge */
.planner-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(198,167,74,.22);
  min-width:78px;
}

.planner-status.todo{
  color:#e6ecff;
  background:rgba(255,255,255,.03);
}

.planner-status.overdue{
  color:#ffb4b4;
  border-color:rgba(255,123,123,.35);
  background:rgba(255,123,123,.10);
}

.planner-status.done{
  color:#fff3cf;
  border-color:rgba(198,167,74,.35);
  background:rgba(198,167,74,.12);
}

/* Done / Overdue rows (subtle) */
.planner-row.is-done{
  background:rgba(198,167,74,.04);
}

.planner-row.is-overdue{
  background:rgba(255,123,123,.04);
}

/* Mobile: compact mode (no heavy crowding) */
@media (max-width:768px){

  /* خفّف مساحة الجدول قدر الإمكان */
  .planner-wrap{
    border-radius:16px;
  }

  .planner-table{
    min-width: 0;          /* ✅ يسمح للجدول يصغر حسب الشاشة */
    width: 100%;
    font-size: 10px;          /* تصغير عام للجدول */
  }

  .planner-table thead th{
    padding: 10px 8px;
    font-size: 9px;
  }

  .planner-table td{
    padding: 10px 8px;        /* تقليل padding للخلايا */
  }

  /* badges أصغر */
  .planner-type,
  .planner-status{
    padding: 4px 9px;
    font-size: 10px;
    min-width: 0;
  }

  /* العنوان يبقى مقروء */
  .planner-table td:nth-child(3){
    font-size: 11px;
    line-height: 1.35;
  }

  .planner-desc{
    font-size: 10px;
  }

  /* فهرس الرموز مريح على الموبايل */
  .planner-legend{
    padding: 6px 8px;
    gap: 8px;
  }
  .planner-legend small{
    font-size: 9px;
  }
}

.planner-title{
  display:block;
  max-width:none;

  white-space: normal;     /* ✅ يسمح بالـ wrap */
  overflow: visible;
  text-overflow: unset;

  line-height:1;
  word-break: break-word;  /* ✅ يمنع قص الكلمات الطويلة */
}

 /* Planner title as link */
.planner-link{
  display:block;
  width:100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-align: right;
}

.planner-title{
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
}

/* highlight after jump */
.jump-highlight{
  outline: 2px solid rgba(198,167,74,.55);
  box-shadow: 0 0 18px rgba(198,167,74,.25);
  border-radius: 14px;
  transition: .25s ease;
}

/* أزراق المواقع والأرقام */
/* ===============================
   QUICK LINKS — MATCH APP BUTTONS 100%
=============================== */
.quick-links-row{
  display:flex;
  gap:12px;                 /* نفس روح toolbar */
  flex-wrap:wrap;
  margin: 8px 0 12px;
  padding: 0 6px;
}

.quick-links-row button{
  /* نفس قاعدة button الأساسية */
  background: rgba(255,255,255,.04);
  color: var(--text);
  border: 1px solid var(--gold-soft);
  padding: 10px 18px;       /* نفس button */
  border-radius: 14px;      /* نفس button */
  cursor: pointer;
  transition: .25s ease;
  backdrop-filter: blur(6px);

  /* نفس خط التطبيق */
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif !important;
  font-weight: 600;         /* نفس button */
  letter-spacing: .2px;

  /* توزيع مثل الأزرار */
  flex: 1;
  min-width: 170px;
}

/* نفس hover للزر */
.quick-links-row button:hover{
  border-color: var(--gold);
  box-shadow: 0 0 12px var(--gold-glow);
  transform: translateY(-1px);
}

/* ألوان الزرين (Primary / Gold) بنفس الثيم */
.quick-links-row .btn-primary{
  background: linear-gradient(145deg, rgba(79,124,255,.22), rgba(15,27,61,.75));
  border-color: rgba(79,124,255,.35);
}
.quick-links-row .btn-primary:hover{
  border-color: rgba(79,124,255,.65);
  box-shadow: 0 0 12px rgba(79,124,255,.25);
}

.quick-links-row .btn-gold{
  background: linear-gradient(145deg, rgba(198,167,74,.22), rgba(15,27,61,.75));
  border-color: rgba(198,167,74,.45);
  color: #fff3cf;
}
.quick-links-row .btn-gold:hover{
  border-color: rgba(198,167,74,.8);
  box-shadow: 0 0 12px rgba(198,167,74,.35);
}
/* ===============================
   BUTTON COLORS (Primary / Gold)
   (MyTodo)
=============================== */

.btn-primary{
  background: linear-gradient(145deg, rgba(79,124,255,.22), rgba(15,27,61,.75));
  border: 1px solid rgba(79,124,255,.35);
  color: var(--text);
}

.btn-primary:hover{
  border-color: rgba(79,124,255,.65);
  box-shadow: 0 0 12px rgba(79,124,255,.25);
}

.btn-gold{
  background: linear-gradient(145deg, rgba(198,167,74,.22), rgba(15,27,61,.75));
  border: 1px solid rgba(198,167,74,.45);
  color: #fff3cf;
}

.btn-gold:hover{
  border-color: rgba(198,167,74,.8);
  box-shadow: 0 0 12px rgba(198,167,74,.35);
}


/* ===============================
   MINI HEADER (for Morocco pages)
=============================== */
.mini-app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid var(--gold-soft);
  background:linear-gradient(160deg,var(--card),var(--card-soft));
  box-shadow:
    0 15px 40px rgba(0,0,0,.55),
    inset 0 0 25px rgba(198,167,74,.04);
  margin-bottom:14px;
}

.mini-logo{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(198,167,74,.35);
  background:linear-gradient(145deg, rgba(79,124,255,.22), rgba(15,27,61,.75));
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.mini-logo-icon{
  font-weight:900;
  color:#eef2ff;
  letter-spacing:.5px;
}

.mini-title{
  flex:1;
  text-align:right;
}


/* mini logo inside main header (index) */
.app-header.mini-home{
  position:relative;
}

.home-logo{
  position:absolute;
  left:22px;
  top:14px;
  z-index:5;
  opacity:.95;
}

@media (max-width:768px){
  .home-logo{
    left:12px;
    top:12px;
    transform: scale(.92);
    transform-origin: top left;
  }
}


/* make <a> look like buttons when it has button classes */
a.btn-primary, a.btn-gold, a.btn-danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* ===============================
   TABS (Templates)
=============================== */
.tabs-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.tab-btn{
  background: rgba(255,255,255,.04);
  color: var(--text);
  border: 1px solid var(--gold-soft);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: .25s ease;
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  font-weight: 700;
  font-size: 12px;
}

.tab-btn:hover{
  border-color: var(--gold);
  box-shadow: 0 0 10px var(--gold-glow);
}

.tab-btn.active{
  border-color: rgba(198,167,74,.8);
  background: rgba(198,167,74,.10);
  box-shadow: 0 0 12px rgba(198,167,74,.25);
}

/* =========================================================
   MYTODO LIGHT THEME V3 — منظّم مهامي
   تعديل مباشر على ثيم MyTodo المحلي ليتوافق مع ConsuTrain
   ========================================================= */

html,
body{
  background:
    radial-gradient(circle at 88% 12%, rgba(198,167,74,.10), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 42%, #f6f8fc 100%) !important;
  color:#17233a !important;
}

.app{
  background: transparent !important;
}

.mytodo-page-hero,
.page-hero,
.hero{
  background:
    radial-gradient(circle at 88% 18%, rgba(198,167,74,.12), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  border: 1px solid rgba(15,39,71,.08) !important;
  border-radius: 26px !important;
  box-shadow: 0 12px 30px rgba(15,39,71,.06) !important;
  margin: 24px auto 20px !important;
  max-width: 1120px;
  padding: 34px 24px !important;
}

.mytodo-page-hero h1,
.page-hero h1,
.hero h1{
  color:#0f2747 !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
  text-shadow: none !important;
}

.mytodo-page-hero p,
.page-hero p,
.hero p{
  color:#607089 !important;
}

.main-title{
  color:#0f2747 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #0f2747 !important;
  text-shadow: none !important;
}

.header-center .main-title{
  color:#0f2747 !important;
}

.app-header,
.mini-home,
.mini-app-header{
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  border: 1px solid rgba(15,39,71,.10) !important;
  box-shadow: 0 12px 30px rgba(15,39,71,.06) !important;
}

.mini-logo,
.home-logo{
  background: linear-gradient(135deg, #f7d77a, #c6a74a) !important;
  border: 1px solid rgba(198,167,74,.45) !important;
  color:#0f2747 !important;
}

.mini-logo-icon{
  color:#0f2747 !important;
}

.card,
.section-accordion,
.login-box,
.list li,
.planner-table-wrap,
.planner-card,
.ideas-card,
.tasks-card{
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  color:#17233a !important;
  border: 1px solid rgba(15,39,71,.10) !important;
  box-shadow: 0 12px 30px rgba(15,39,71,.06) !important;
}

.card h2,
.card h3,
.section-accordion h2,
.section-accordion h3{
  color:#0f2747 !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
}

p,
small,
label,
.list li,
.task-desc,
.idea-desc{
  color:#607089;
}

input,
textarea,
select{
  background:#ffffff !important;
  color:#17233a !important;
  border:1px solid rgba(15,39,71,.14) !important;
  box-shadow:none !important;
}

input:focus,
textarea:focus,
select:focus{
  border-color:#c6a74a !important;
  box-shadow:0 0 0 4px rgba(198,167,74,.16) !important;
}

select option{
  background-color:#ffffff !important;
  color:#17233a !important;
}

button{
  background:#ffffff !important;
  color:#0f2747 !important;
  border:1px solid rgba(15,39,71,.12) !important;
  box-shadow:0 6px 16px rgba(15,39,71,.05) !important;
}

button:hover{
  border-color:#c6a74a !important;
  box-shadow:0 8px 20px rgba(198,167,74,.18) !important;
}

.btn-primary,
.btn-gold,
button[type="submit"]{
  background: linear-gradient(135deg, #f7d77a, #c6a74a) !important;
  color:#0f2747 !important;
  border:0 !important;
  font-weight:800;
}

.btn-danger{
  background:#fff5f5 !important;
  color:#b42318 !important;
  border:1px solid rgba(180,35,24,.22) !important;
}

.pill{
  background:#ffffff !important;
  color:#0f2747 !important;
  border:1px solid rgba(15,39,71,.12) !important;
  box-shadow:0 6px 16px rgba(15,39,71,.04) !important;
}

.pill.late{
  background:#fff5f5 !important;
  color:#b42318 !important;
  border-color:rgba(180,35,24,.22) !important;
}

.status-indicator,
.connection-bar{
  background:#f8fbff !important;
  color:#0f2747 !important;
  border-color:rgba(15,39,71,.10) !important;
}

.accordion-header,
.section-accordion__header,
.section-title{
  background:#ffffff !important;
  color:#0f2747 !important;
}

table,
.planner-table{
  background:#ffffff !important;
  color:#17233a !important;
}

th,
.planner-table thead th{
  background:#f6f8fc !important;
  color:#0f2747 !important;
  border-bottom:1px solid rgba(15,39,71,.10) !important;
}

td{
  border-color:rgba(15,39,71,.08) !important;
}

#breadcrumbs-placeholder{
  background:#f8fbff !important;
  border-bottom:1px solid rgba(15,39,71,.08) !important;
}

.mytasks-brand-strip{
  display:none !important;
}

.app{
  margin-top:26px !important;
}

@media (max-width:768px){
  .mytodo-page-hero,
  .page-hero,
  .hero{
    margin:16px 12px 18px !important;
    padding:24px 18px !important;
    border-radius:20px !important;
  }

  .app{
    margin-top:18px !important;
  }
}

/* =========================================================
   MYTODO VISUAL POLISH — تحسين نهائي لمنظّم مهامي
   - إزالة تكرار العنوان
   - تحسين لوحة التطبيق الداخلية
   - توحيد أزرار الأدوات السفلية
   ========================================================= */

/* لوحة التطبيق الداخلية */
.app{
  max-width: 1120px !important;
  margin: 30px auto 46px !important;
  padding: 0 18px !important;
}

.app-header,
.mini-home{
  border-radius: 28px !important;
  padding: 28px 24px !important;
  margin-bottom: 22px !important;
  background:
    radial-gradient(circle at 88% 18%, rgba(198,167,74,.11), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  border: 1px solid rgba(15,39,71,.09) !important;
  box-shadow: 0 14px 34px rgba(15,39,71,.07) !important;
}

/* الشعار الداخلي الصغير */
.app-header .mini-logo,
.mini-home .mini-logo{
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(198,167,74,.18) !important;
}

/* عنوان اللوحة الداخلية */
.main-title{
  font-size: clamp(1.7rem, 3vw, 2.3rem) !important;
  margin: 0 0 14px !important;
  color: #0f2747 !important;
  line-height: 1.35 !important;
}

/* حالة الاتصال */
.connection-bar{
  width: max-content;
  margin: 0 auto 18px !important;
  min-height: 36px;
  padding: 7px 14px !important;
  border-radius: 999px !important;
}

/* الإحصائيات */
.stats{
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.pill{
  min-height: 40px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  background: #ffffff !important;
}

/* أقسام الأكورديون */
.section-accordion{
  border-radius: 18px !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.section-accordion summary,
.accordion-header,
.section-title{
  min-height: 54px !important;
  padding: 14px 18px !important;
  border-radius: 18px !important;
}

/* الحقول والبطاقات داخل الأكورديون */
.card{
  border-radius: 20px !important;
  padding: 22px !important;
}

/* أزرار الأدوات السفلية */
.quick-links-row,
.tools-links-row,
.extra-tools-row{
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px !important;
  margin-top: 18px !important;
}

.quick-links-row a,
.tools-links-row a,
.extra-tools-row a,
.quick-links-row .btn,
.tools-links-row .btn,
.extra-tools-row .btn{
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-weight: 900 !important;
  text-align: center !important;
  box-shadow: 0 8px 20px rgba(198,167,74,.14) !important;
}

/* روابط الأزرار العامة داخل MyTodo */
a.btn,
.quick-links-row a,
.tools-links-row a,
.extra-tools-row a{
  text-decoration: none !important;
}

/* تحسين العرض على الجوال */
@media (max-width: 900px){
  .quick-links-row,
  .tools-links-row,
  .extra-tools-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .app{
    margin: 20px auto 34px !important;
    padding: 0 12px !important;
  }

  .app-header,
  .mini-home{
    border-radius: 20px !important;
    padding: 22px 16px !important;
  }

  .main-title{
    font-size: 1.65rem !important;
  }

  .stats{
    gap: 8px !important;
  }

  .pill{
    min-height: 38px !important;
    padding: 7px 12px !important;
    font-size: .88rem !important;
  }

  .quick-links-row,
  .tools-links-row,
  .extra-tools-row{
    grid-template-columns: 1fr;
  }

  .quick-links-row a,
  .tools-links-row a,
  .extra-tools-row a,
  .quick-links-row .btn,
  .tools-links-row .btn,
  .extra-tools-row .btn{
    width: 100% !important;
  }
}