/* ==========================================
   1. Root Variables & Reset Defaults
   ========================================== */
:root {
  --bg-body: #ffffff;
  --bg-modal: #ffffff;
  --bg-separator: #f0f2f5;
  --text-main: #000000;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #fef08a;
  --radius: 5px;
  --transition: all 0.2s ease;
}

.table-wrapper {
  width: 100%;
  background: var(--bg-base);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-glass);
  display: flex;
  flex-direction: column;
  min-height: 60vh;
  overflow-y: scroll;
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border-glass);
  background: var(--bg-surface);
}
.toolbar .group {
  display: flex;
  gap: 8px;
  height: max-content;
  align-items: center;
}
.toolbar .group.search {
  flex: 1 1 280px;
}
.toolbar input,
.toolbar select {
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.9rem;
  background: var(--bg-base);
  outline: none;
  transition: border var(--transition);
  color: var(--muted);
}
.toolbar input:focus,
.toolbar select:focus {
  border-color: var(--accent);
}
.toolbar .meta {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 600;
}
.loader-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  animation: pulse 1s infinite;
  visibility: hidden;
}
.loader-dot.active {
  visibility: visible;
}
.toolbar input[type="search"] {
  width: 50%;
}
/* ==========================================
   2. User & License Cards Layout
   ========================================== */
.user-item {
  border-bottom: 8px solid var(--border-glass);
  padding: 1.2rem 1rem;
  background-color: var(--bg-base);
}

.user-item:last-child {
  border-bottom: none;
}

.row-1 {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text-main);
}

.separator {
  color: var(--text-muted);
  font-weight: 400;
  margin: 0 2px;
}

.highlight {
  background-color: var(--warning);
  color: #000;
  border-radius: 3px;
  padding: 0 2px;
}

.license-item {
  margin-top: 1rem;
}

.license-item:not(:last-child) {
  margin-bottom: 1.5rem;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 1.5rem;
}

.row-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.license-key {
  font-family: monospace;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 1px;
}

.row-2-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.row-3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  gap: 1rem;
}

.license-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.stat-label {
  color: var(--text-muted);
}

/* ==========================================
   3. Action Buttons & Animations
   ========================================== */
.license-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-btn {
  position: relative;
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-main);
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.icon-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(37, 99, 235, 0.05);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Tooltip Feedback Animation */
.icon-btn::after {
  content: attr(data-msg);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #111827;
  color: #ffffff;
  padding: 4px 8px;
  font-size: 0.75rem;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

.icon-btn.anim-active::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-5px);
}

/* ==========================================
   4. Toggle Switch Component
   ========================================== */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1d5db;
  transition: 0.3s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--success);
}

input:checked + .slider:before {
  transform: translateX(20px);
}

/* ==========================================
   5. Subpage / Full Page Drawer Components
   ========================================== */
.full-page {
  /* position: fixed;
  inset: 0; */
  width: 100%;
  height: 100%;
  background: var(--bg-body);
  z-index: 900;
  display: none;
  flex-direction: column;
  padding: 5px;
}

.full-page.active {
  display: flex;
}

.page-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-modal);
}

.back-btn {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-btn svg {
  transform: rotate(180deg);
}

.page-header h2 {
  margin: 0;
  font-size: 1.1rem;
  flex: 1;
}

.page-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background: var(--bg-body);
}

.page-footer {
  padding: 1.5rem 1rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg-modal);
}

/* Form Elements inside Subpage */
.form-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 1rem 0;
}


.form-actions {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.form-btn {
  flex: 1;
  padding: 0.85rem;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  font-size: 1rem;
}

.btn-cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-main);
}

.btn-submit {
  background: var(--primary);
  color: white;
}

/* ==========================================
   6. Live Info Monitoring Elements
   ========================================== */
.timer-badge {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-family: monospace;
  background: var(--bg-separator);
  padding: 4px 10px;
  border-radius: 12px;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--border);
}

.list-item:last-child {
  border-bottom: none;
}

.list-title {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.list-value {
  font-weight: 600;
  font-size: 0.95rem;
  direction: ltr;
}

.info-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: bold;
}

.status-on {
  background: #dcfce7;
  color: #166534;
}

.status-off {
  background: #fee2e2;
  color: #991b1b;
}

.footer-stats-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--border);
}

/* Footer Action Nav inside Subpage */
.footer-nav-license {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.footer-nav-license-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  transition: var(--transition);
  position: relative;
}

.footer-nav-license-btn:hover {
  color: var(--primary);
}

.footer-nav-license-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.footer-nav-license-btn span {
  font-size: 0.75rem;
  font-weight: 500;
}

.footer-nav-license-btn::after {
  content: attr(data-msg);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #111827;
  color: #ffffff;
  padding: 4px 8px;
  font-size: 0.75rem;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

.footer-nav-license-btn.anim-active::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-5px);
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .license-stats {
    font-size: 0.8rem;
    flex-wrap: wrap;
  }
  .footer-stats-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  .user-item {
    width: 100%;
    border-radius: 0;
  }
  .list-title,
  .list-value {
    font-size: 0.85rem;
  }
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.5);opacity:1}}
.reset-icon{
  width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem; font-weight:700; color:#475569; border:1px solid var(--border-color); background:var(--bg-surface); cursor:pointer
}
.reset-icon:hover{background:#f1f5f9; border-color:#cbd5e1}

.table-wrapper table{width:100%; border-collapse:collapse; white-space:nowrap}
.table-wrapper thead{background:var(--bg-surface); border-bottom:2px solid var(--border-color)}
.table-wrapper th,td{padding:12px; text-align:right; border-bottom:1px solid var(--border-color)}
.table-wrapper th{font-weight:600; color:var(--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.05em}
.table-wrapper tbody tr {border-bottom:1px solid var(--border-color);background: var(--bg-base);}
.table-wrapper tbody tr:last-child td{border-bottom:none}
.table-wrapper tbody tr:hover{background:var(--bg-surface)}
.user-cell{display:flex; align-items:center; gap:12px}
.level-indicator{
  width:40px;height:40px;border-radius:50%; display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1rem;color:var(--muted)
}
.level-indicator[data-level="0"]{background:#94a3b8}
.level-indicator[data-level="1"]{background:#f59e0b}
.level-indicator[data-level="2"]{background:#10b981}
.user-info{display:flex; flex-direction:column}
.user-subtext{font-size:.8rem; color:var(--muted); font-family:monospace; margin-top:2px}
.badge{
  padding:4px 12px;border-radius:9999px;font-size:.75rem;font-weight:600;display:inline-flex;
}
.badge.active,.badge.approved{background:#dcfce7;color:#166534}
.badge.disabled,.badge.rejected{background:#fee2e2;color:#991b1b}
.badge.online{background:#dbeafe;color:#1e40af}

.actions{display:flex; gap:8px; justify-content:flex-end}
.table-wrapper button{
  border:1px solid var(--border-color); background: var(--bg-surface); padding:6px 12px; border-radius:6px;
  cursor:pointer; font-size:.8rem; font-weight:500; color: var(--muted); transition:all var(--transition)
}
.table-wrapper  button:hover:not(:disabled){background:#f1f5f9;color: #000; border-color:var(--border-color)}
.table-wrapper  button:disabled{opacity:.5; cursor:not-allowed}

.pagination{
  display:flex; justify-content:space-between; align-items:center; padding:16px;
  background:var(--bg-surface); border-top:1px solid var(--border-color); margin-top:auto;
}
.page-info-text{font-size:.9rem; font-weight:500; color:var(--muted)}
.page-controls{display:flex; gap:6px; align-items:center}
.page-btn,.nav-btn{
  width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;
  border-radius:6px; flex-shrink:0; font-weight:600; color:var(--text)
}
.page-ellipsis{width:24px; text-align:center; color:var(--muted); font-weight:bold}
.page-btn.active{background:var(--accent); color:var(--text-main); border-color:var(--border-color)}
.page-btn.active:hover{background:var(--accent-hover)}

.empty-state{padding:48px 16px; text-align:center; color:var(--muted)}

.info-card.full-width{grid-column:1 / -1}
.card-title{
  font-size:.95rem; font-weight:700; color:var(--muted); margin-bottom:16px;
  padding-bottom:8px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; gap:8px
}
.detail-list{display:flex; flex-direction:column; gap:12px}
.detail-item{display:flex; justify-content:space-between; align-items:center; font-size:.9rem}
.detail-item dt{color:var(--muted)}
.detail-item dd{font-weight:600; color:var(--text); text-align:left}
.status-select{
  padding:6px 12px; border-radius:6px; border:1px solid var(--border-color);
  background:var(--bg-surface); color: var(--text-main); font-size:.85rem; font-weight:600; min-width:140px
}

/* Inquiry list */
.inquiries-list{
  background: var(--bg-surface);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px;
}
.inquiry-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-surface);
}
.inquiry-item .code-text{
  font-family:monospace; font-size:.9rem; color:var(--text)
}

/* Documents */
.docs-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;
}
.doc-card{
  border:1px solid var(--border-color); border-radius:10px; padding:12px; background:#f8fafc;
  display:flex; flex-direction:column; gap:8px;
}
.doc-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.doc-meta{display:flex; flex-direction:column; gap:2px}
.doc-name{font-weight:600; color:var(--text); font-size:.9rem}
.doc-type{font-size:.8rem; color:var(--muted)}
.doc-actions{display:flex; gap:6px}
.doc-btn{
  padding:6px 8px; font-size:.75rem; border-radius:6px; border:1px solid var(--border-color); background:#fff; cursor:pointer;
}
.doc-btn:hover{background:#eef2ff; border-color:#c7d2fe}

@media (max-width:768px){
  main{padding:12px; padding-bottom:80px}
  .table-wrapper{border:none; box-shadow:none; background:transparent; min-height:auto;}
  .toolbar{flex-direction:column;margin-bottom: 2px;}
  .toolbar .group.search{flex: 1;}
  .toolbar .group.search input{width:100%; height: max-content; margin-bottom:4px}
  .toolbar .group.filters{width:100%; display:flex; gap:8px}
  .toolbar .group.filters select{flex:1}
  .toolbar .meta{margin-inline-start:0; align-self:flex-start}
  table thead{display:none}
  table,tbody,tr,td{display:block; width:100%}
  tr{
    border-radius: 0;
    padding:16px; 
    border-radius:var(--radius-lg); 
    /* margin-bottom:16px;  */
    background:var(--panel);
    /* border:1px solid var(--border-color);  */
    border-bottom:5px solid var(--border-color); 
    /* box-shadow:var(--shadow-sm); */
  }
  td{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border:none; white-space:normal}
  td:not(:last-child){border-bottom:1px dashed var(--border-color)}
  td::before{content:attr(data-label); color:var(--muted); font-size:.85rem; font-weight:500}
  td[data-label="کاربر"]::before{display:none}
  td[data-label="کاربر"]{justify-content:flex-start}
  .actions{width:100%; justify-content:stretch; gap:8px}
  .actions button{flex:1; padding:8px}
  .pagination{
    /* position:fixed; bottom:0; left:0; right:0;  */
    border-top:1px solid var(--border-color);
    border-radius:0; box-shadow:0 -4px 15px rgba(0,0,0,.05); z-index:50; padding:12px 16px;
  }
  .page-controls{gap:4px}
  .page-btn,.nav-btn{width:32px;height:32px;font-size:.85rem}
  .page-info-text{font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
/* //-user create-------------------------------------- */
.user-create-container {
  font-family: sans-serif;
  background: #f5f5f5;
}
.drawer {
  width: 100%;
  max-width: 520px;
  margin: 24px auto;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.drawer-header h2 {
  margin: 0;
  font-size: 18px;
  color: #222;
}
.close-btn {
  background: transparent;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 14px;
}
.error {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
}
.submit-btn {
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}
.submit-btn.disabled {
  background: #E9E9E9;
  color: #676767;
  cursor: not-allowed;
}
.submit-btn.enabled {
  background: #2f80ed;
  color: #fff;
}
.global-error {
  background: #fee2e2;
  color: #991b1b;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  margin-top: 6px;
}