/* /sidebar/sidebar.css */

/* ───────────── Sand Theme (Light) — Sidebar & Trigger ─────────────
   - Keeps old look
   - EN => left
   - AR => right
   - Fog overlay kept
   - No global page background override
   - Only pages with body.page-bg-sand get the sand background
*/

/* ====== Theme tokens ====== */
:root{
  --bg:#F3E1C9;
  --card:#FFF5E6;
  --text:#3E2A1F;
  --muted:#7D5B49;
  --brand:#4A3328;
  --brand-2:#D09F6B;
  --ring:rgba(208,159,107,.28);
  --shadow:0 10px 30px rgba(77,53,40,.16);
  --radius:14px;
}

/* ====== Optional page background (OPT-IN only) ======
   This will NOT affect pages unless body has class="page-bg-sand"
*/
body.page-bg-sand{
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(208,159,107,.12), transparent 50%),
    linear-gradient(135deg,#f3eee7,#e2d3c0);
  color: var(--text);
  background-attachment: fixed;
}

body.bg-light.page-bg-sand{
  background-color:transparent !important;
}

/* ====== Trigger button ====== */
#openSidebar{
  position:fixed;
  top:14px;
  z-index:1001;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Cairo', system-ui, -apple-system, Segoe UI, Tahoma, sans-serif;
  font-weight:800;
  font-size:14px;
  letter-spacing:.2px;
  color:var(--brand);
  border-radius:12px;
  padding:9px 13px;
  cursor:pointer;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, var(--brand-2), rgba(74,51,40,.25)) border-box;
  border:1px solid transparent;
  box-shadow:var(--shadow);
  transition:transform .06s ease, filter .18s ease, border-color .18s ease, background .18s ease;
}

#openSidebar:hover{ filter:saturate(1.05) brightness(1.02); }
#openSidebar:active{ transform:translateY(1px); }
#openSidebar:focus-visible{
  outline:none;
  box-shadow:0 0 0 6px var(--ring), var(--shadow);
}

/* AR */
#openSidebar.sidebar-rtl{
  right:16px;
  left:auto;
}

/* EN */
#openSidebar.sidebar-ltr{
  left:16px;
  right:auto;
}

/* Optional icon */
#openSidebar .icon{
  width:22px;
  height:22px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg, rgba(208,159,107,.22), rgba(74,51,40,.12));
  border:1px solid rgba(77,53,40,.12);
}

/* ====== Fog overlay ====== */
.sidebar-overlay{
  position:fixed;
  inset:0;
  z-index:999;
  background:rgba(243, 225, 201, .45);
  backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, visibility .18s ease;
}

body.sidebar-open .sidebar-overlay{
  opacity:1;
  visibility:visible;
}

/* ====== Sidebar panel ====== */
.sidebar{
  position:fixed;
  top:0;
  bottom:0;
  width:0;
  height:100vh;
  z-index:1000;
  overflow:hidden auto;
  background:linear-gradient(180deg, #fffdf9 0%, #FFF5E6 100%);
  transition:width .28s ease-in-out, box-shadow .28s ease-in-out, visibility .28s ease-in-out;
  padding-top:66px;
  visibility:hidden;
  font-family:'Cairo', system-ui, -apple-system, Segoe UI, Tahoma, sans-serif;
  color:var(--text);
}

/* AR = right */
.sidebar.sidebar-rtl{
  right:0;
  left:auto;
  border-left:1px solid rgba(77,53,40,.12);
  box-shadow:-8px 0 28px rgba(77,53,40,.10);
}

/* EN = left */
.sidebar.sidebar-ltr{
  left:0;
  right:auto;
  border-right:1px solid rgba(77,53,40,.12);
  box-shadow:8px 0 28px rgba(77,53,40,.10);
}

/* open state */
.sidebar.open{
  width:min(92vw, 360px);
  visibility:visible;
}

/* Decorative gold bar */
.sidebar::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg, rgba(208,159,107,.0), rgba(208,159,107,.55), rgba(208,159,107,.0));
  opacity:.9;
  pointer-events:none;
}

/* AR inner edge */
.sidebar.sidebar-rtl::before{
  left:0;
}

/* EN inner edge */
.sidebar.sidebar-ltr::before{
  right:0;
}

/* Pretty scrollbars */
.sidebar::-webkit-scrollbar{ width:10px; }
.sidebar::-webkit-scrollbar-track{ background:transparent; }
.sidebar::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(208,159,107,.55), rgba(74,51,40,.25));
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}

/* ====== Brand area if used ====== */
.sidebar .brand{
  position:absolute;
  top:8px;
  height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(77,53,40,.12);
  box-shadow:0 4px 14px rgba(77,53,40,.08);
  backdrop-filter:blur(6px);
  color:var(--brand);
  font-weight:800;
}

.sidebar.sidebar-rtl .brand{
  right:12px;
  left:56px;
}

.sidebar.sidebar-ltr .brand{
  left:12px;
  right:56px;
}

.sidebar .brand img.logo{
  width:34px;
  height:34px;
  border-radius:10px;
  object-fit:contain;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
}

/* ====== Close button ====== */
.sidebar .closebtn{
  position:absolute;
  top:12px;
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  color:var(--brand);
  background:#fff;
  border:1px solid rgba(77,53,40,.14);
  box-shadow:var(--shadow);
  transition:transform .06s ease, filter .18s ease, background .18s ease;
}

.sidebar.sidebar-rtl .closebtn{
  left:12px;
  right:auto;
}

.sidebar.sidebar-ltr .closebtn{
  right:12px;
  left:auto;
}

.sidebar .closebtn:hover{ filter:saturate(1.05); background:#fffaf2; }
.sidebar .closebtn:active{ transform:translateY(1px); }
.sidebar .closebtn:focus-visible{
  outline:none;
  box-shadow:0 0 0 6px var(--ring), var(--shadow);
}

/* ====== Links ====== */
.sidebar a{
  display:block;
  padding:12px 16px 12px 12px;
  text-decoration:none;
  color:var(--brand);
  font-weight:700;
  font-size:15px;
  border-bottom:1px solid rgba(77,53,40,.08);
  position:relative;
  transition:background .18s ease, color .18s ease, padding .18s ease;
}

/* Hover */
.sidebar a:hover{
  background:#fff3e3;
  color:#2f2017;
}

.sidebar.sidebar-rtl a:hover{
  padding-right:20px;
}

.sidebar.sidebar-ltr a:hover{
  padding-left:20px;
}

/* indicator */
.sidebar a::after{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:60%;
  background:linear-gradient(180deg, var(--brand-2), rgba(208,159,107,.45));
  transition:width .18s ease;
}

.sidebar.sidebar-rtl a::after{
  right:0;
  border-radius:0 8px 8px 0;
}

.sidebar.sidebar-ltr a::after{
  left:0;
  border-radius:8px 0 0 8px;
}

.sidebar a:hover::after{
  width:4px;
}

/* badge */
.sidebar a .badge{
  margin-right:8px;
  padding:2px 8px;
  font-size:11px;
  font-weight:800;
  color:var(--brand);
  background:#fff;
  border:1px solid rgba(77,53,40,.14);
  border-radius:999px;
}

/* ====== Collapsible sections ====== */
.sidebar-section{
  margin-top:8px;
  border-top:1px solid rgba(77,53,40,.10);
  border-bottom:1px solid rgba(77,53,40,.06);
  background:linear-gradient(180deg, #fff, #fffaf2);
  border-radius:12px;
  margin:10px 10px 0;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(77,53,40,.06);
}

.sidebar-section .section-header{
  padding:12px 16px;
  font-size:15px;
  font-weight:800;
  color:var(--brand);
  cursor:pointer;
  user-select:none;
  background:linear-gradient(180deg, #fffdf9, #fff7e9);
  border-bottom:1px solid rgba(77,53,40,.08);
}

/* Links container closed by default */
.sidebar-section .section-links{
  display:none;
  padding:6px 6px 8px;
}

.sidebar-section .section-links a{
  border-radius:10px;
  margin:4px 4px 0;
  border:1px solid rgba(77,53,40,.08);
  background:#fff;
}

.sidebar-section .section-links a:hover{
  background:#fff1da;
}

/* Open state */
.sidebar-section.open .section-links{
  display:block;
}

/* ====== Responsive ====== */
@media (max-width:768px){
  #openSidebar{
    top:12px;
    font-size:13px;
    padding:8px 10px;
  }

  #openSidebar.sidebar-rtl{
    right:12px;
  }

  #openSidebar.sidebar-ltr{
    left:12px;
  }

  .sidebar.open{
    width:min(94vw, 360px);
  }

  .sidebar a{
    font-size:14px;
    padding:10px 14px 10px 10px;
  }

  .sidebar .closebtn{
    width:34px;
    height:34px;
    font-size:18px;
    top:10px;
  }

  .sidebar.sidebar-rtl .closebtn{
    left:10px;
  }

  .sidebar.sidebar-ltr .closebtn{
    right:10px;
  }
}

/* ====== Focus states ====== */
.sidebar a:focus-visible,
.sidebar .section-header:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--brand-2), 0 0 0 6px var(--ring);
  border-radius:10px;
}