/* portal/assets/css/theme.css */
:root{
  /* سبز زنده‌تر (Emerald/Teal) */
  --brand: hsl(159, 85%, 36%);      /* اصلی */
  --brand-2: #0b7d5c;    /* تیره‌تر برای گرادینت */
  --brand-3: #18c48a;    /* روشن‌تر برای هایلایت */

  --bg: #f3f7f5;
  --text: #0f172a;
  --muted: #64748b;
}

html, body { height: 100%; }

body{
  font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #ffffff, var(--bg));
  color: var(--text);
  position: relative;
  overflow-x: hidden;
}

/* پترن متحرک خیلی لطیف */




.brand-badge{
  width: 48px; height: 48px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  box-shadow: 0 12px 30px rgba(14,168,113,.18);
}

.login-card{
  border: 0;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(2,44,30,.10);
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.login-side{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  padding: 40px;
  position: relative;
}

.login-side::after{
  content:"";
  position:absolute;
  inset:-60px -60px auto auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
}

.login-title{
  font-weight: 700;
  letter-spacing: -0.2px;
}

.small-muted{ color: var(--muted); }

.form-control, .form-select{
  border-radius: 12px;
  padding: 12px 14px;
  border-color: #e5e7eb;
  background: rgba(255,255,255,.92);
}

.form-control:focus{
  border-color: rgba(14,168,113,.55);
  box-shadow: 0 0 0 .25rem rgba(14,168,113,.18);
}

.input-icon{
  position: relative;
}

.input-icon .bi{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 1.1rem;
}

[dir="rtl"] .input-icon .bi{
  right: 12px;
  left: auto;
}

[dir="rtl"] .input-icon input{
  padding-right: 44px;
  padding-left: 14px;
}

/* دکمه برند با متن سفید (مشکل دیده نشدن متن حل شد) */
.btn-brand{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: none;
  color: #fff !important;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 700;
}

.btn-brand:hover{
  filter: brightness(.96);
}

.link-brand{
  color: var(--brand-2);
  text-decoration: none;
}
.link-brand:hover{ text-decoration: underline; }

.footer-note{
  font-size: .85rem;
  color: rgba(255,255,255,.9);
}

/* آیکن قفل */
.input-icon .bi {
  position: absolute;
  right: 12px; /* چون RTL هستیم */
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 1.1rem;
}

/* فیلدهایی که آیکن دارند */
.input-icon input {
  padding-right: 44px;
}

/* دکمه چشم بره سمت چپ */
.pass-toggle{
  position: absolute;
  left: 25px;   /* انتهای فیلد در RTL */
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 6px 8px;
  color: #94a3b8;
  cursor: pointer;
}

/* وقتی دکمه چشم داریم، دو طرف padding داشته باشیم */
.has-toggle input{
  padding-left: 44px;
  padding-right: 44px;
}



/* ===== PRO ADMIN LAYOUT (Stable) ===== */

.admin-wrapper{
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar{
  width: 280px;
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  border-radius: 0 22px 22px 0;
  box-shadow: 0 18px 50px rgba(2,44,30,.18);
}

/* Profile */
.sidebar-profile{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.16);
  margin-bottom: 12px;
}
.sidebar-profile .avatar{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.16);
}
.sidebar-profile .name{
  font-weight: 800;
  line-height: 1.2;
}
.sidebar-profile .role{
  font-size: .85rem;
  opacity: .85;
}

/* Links */
.sidebar a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
}

.sb-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 6px;
}
.sb-link:hover{
  background: rgba(255,255,255,.12);
  color:#fff;
}
.sb-link.active{
  background: rgba(255,255,255,.18);
  color:#fff;
}
.sb-link .bi{
  font-size: 1.1rem;
  opacity:.95;
}

/* Collapsible button */
.sb-group-btn{
  width: 100%;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.92);
  text-align: right;
  padding: 10px 12px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor: pointer;
  margin-bottom: 6px;
}
.sb-group-btn:hover{
  background: rgba(255,255,255,.12);
  color:#fff;
}
.sb-chevron{
  margin-right: auto; /* RTL */
  opacity: .9;
  transition: transform .2s ease;
}
.sb-group-btn[aria-expanded="true"] .sb-chevron{
  transform: rotate(180deg);
}

/* Submenu */
.sb-sub{
  margin: 6px 0 10px;
  padding-right: 12px;
  border-right: 2px solid rgba(255,255,255,.18);
}
.sb-sub .sb-link{
  opacity: .95;
  margin-bottom: 5px;
}

/* Footer pinned bottom */
.sidebar-footer{
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.16);
}

/* Main content */
.main-content{
  flex: 1;
  padding: 25px;
  background: #f8fafc;
}



/* ===== Sidebar Pro Polish (Add-on) ===== */

/* گرادینت زنده‌تر + عمق */
.sidebar{
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(700px 450px at 80% 15%, rgba(0,0,0,.12), transparent 55%),
    linear-gradient(180deg, var(--brand-2), var(--brand));
}

/* کمی روشن‌تر و خواناتر */
.sidebar-profile .name{
  font-weight: 900;
  letter-spacing: -0.2px;
}
.sidebar-profile .role{
  opacity: .9;
}

/* لینک‌ها خواناتر و پررنگ‌تر */
.sb-link, .sb-group-btn{
  font-weight: 700;
  color: rgba(255,255,255,.95);
}

/* hover بهتر */
.sb-link:hover, .sb-group-btn:hover{
  background: rgba(255,255,255,.16);
}

/* Active حرفه‌ای: خط سمت راست + سایه نرم */
.sb-link.active{
  position: relative;
  background: rgba(255,255,255,.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}


/* آیکن‌ها کمی برجسته‌تر */
.sb-link .bi, .sb-group-btn .bi{
  opacity: 1;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
}

/* زیرمنو کمی ظریف‌تر */
.sb-sub{
  border-right: 2px solid rgba(255,255,255,.22);
}
.sb-sub .sb-link{
  font-weight: 650;
  background: rgba(255,255,255,.06);
}
.sb-sub .sb-link:hover{
  background: rgba(255,255,255,.14);
}

/* دکمه خروج مثل آیتم‌ها یکدست */
.sidebar-footer{
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.16);
  text-align: center;   /* اضافه کن */
}
.sidebar-footer .sb-link{
  justify-content: center;   /* وسط‌چین افقی داخل فلکس */
}

.actions-col{ min-width: 240px; }
.actions-col .btn{
  min-width: 70px;
  border-radius: 10px;
  font-weight: 650;
}

/* ===== Live Table Loader ===== */
.live-loader{
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 16px;
}
.live-loader.show{ display: flex; }

.live-loader .spinner-border{ width: 2.2rem; height: 2.2rem; }

.live-table-wrap{ position: relative; }
.s2-container{
position:relative;
width:100%;
font-family:tahoma;
}

.s2-display{
border:1px solid #ccc;
padding:8px;
background:#fff;
cursor:pointer;
border-radius:4px;
}

.s2-dropdown{
display:none;
position:absolute;
background:#fff;
border:1px solid #ccc;
width:100%;
z-index:9999;
border-radius:4px;
}

.s2-search{
width:100%;
padding:6px;
border:none;
border-bottom:1px solid #ddd;
outline:none;
}

.s2-results{
max-height:200px;
overflow:auto;
}

.s2-item{
padding:6px;
cursor:pointer;
}

.s2-item:hover{
background:#f1f1f1;
}