/* ==========================================================================
   USERS APP — Unified Responsive Styles
   Scope: users/list, users/add-edit, users/view, users/login, users/change_password
   Design: Soft Glass + Indigo Accent, 3→2→1 card grid, zero horizontal scroll, no CLS
   ========================================================================== */

/* --------------------
   0) THEME TOKENS
   -------------------- */
:root{
  /* Brand */
  --pri: #6366F1;            /* indigo */
  --pri-2: #7C3AED;          /* violet */
  --ring: rgba(99,102,241,.35);

  /* Surfaces */
  --bg: #F6F8FB;
  --card: #FFFFFF;
  --card-grad-top: #FFFFFF;
  --card-grad-bot: #F9FAFB;
  --card-border: rgba(0,0,0,.08);

  /* Text */
  --txt: #1A1A1A;
  --txt-2: #6B7280;

  /* States */
  --ok:#22C55E; --warn:#FACC15; --danger:#DC2626;

  /* Radii & Shadow */
  --r-lg: 16px;
  --r-md: 12px;
  --shadow-1: 0 4px 12px rgba(0,0,0,.08);
  --shadow-2: 0 8px 20px rgba(0,0,0,.12);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0B1220;
    --card: rgba(255,255,255,.06);
    --card-grad-top: rgba(255,255,255,.06);
    --card-grad-bot: rgba(255,255,255,.04);
    --card-border: rgba(255,255,255,.12);
    --txt:#EAEAF2;
    --txt-2:#9CA3AF;
    --shadow-1: 0 6px 18px rgba(0,0,0,.35);
    --shadow-2: 0 10px 28px rgba(0,0,0,.5);
  }
}

/* Page shells spacing (all users pages) */
.page-users_list,
.page-users_add,
.page-users_view,
.page-users_login,
.page-users_change_password{
  background: var(--bg);
  padding: clamp(8px, 1.8vw, 16px);
  color: var(--txt);
}

/* Typography */
.page-users_list h3, .page-users_add h3, .page-users_view h3 { font-weight:700; letter-spacing:.2px; }
small, .small { color: var(--txt-2); }

/* Focus rings (inputs/buttons) */
.page-users_list :is(input,select,textarea,.btn):focus,
.page-users_add :is(input,select,textarea,.btn):focus,
.page-users_login :is(input,select,textarea,.btn):focus,
.page-users_change_password :is(input,select,textarea,.btn):focus{
  box-shadow: 0 0 0 3px var(--ring) !important;
  outline: none !important;
}

/* ==========================================================================
   1) USERS LIST — Cards grid 3→2→1, smart card design, stable heights
   ========================================================================== */

/* grid spacing */
.page-users_list .row.g-3{ row-gap: clamp(12px,2vw,18px); }

/* ensure consistent columns (Bootstrap col-md-4 already in template) */
@media (max-width: 991.98px){
  .page-users_list .col-md-4{ flex:0 0 50%; max-width:50%; }
}
@media (max-width: 767.98px){
  .page-users_list .col-md-4{ flex:0 0 100%; max-width:100%; }
}

/* Card base */
.page-users_list .user-card{
  border:1px solid var(--card-border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--card-grad-top), var(--card-grad-bot));
  box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease;
  min-height: 360px; /* prevents jump/CLS */
  display:flex; flex-direction:column;
}
.page-users_list .user-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

/* Remove corner close (if any legacy) */
.page-users_list .user-card [title="Delete user"].position-absolute{ display:none !important; }

/* Avatar placeholder */
.page-users_list .avatar{
  width:64px; height:64px; border-radius:50%;
  background: linear-gradient(135deg, #dee2e6, #ced4da);
}

/* Info blocks */
.page-users_list .user-card .card-body{ padding-bottom: .75rem; }
.page-users_list .user-card .fw-semibold{ font-size: 1.08rem; }

/* Meta rows */
.page-users_list .user-card .small div + div{ margin-top: 2px; }

/* Buttons row: one-line, no wrap */
.page-users_list .user-card .card-footer{
  margin-top:auto;
  display:flex; gap:8px; flex-wrap:nowrap;
  background: transparent; border-top:1px solid var(--card-border);
  padding-top:.6rem;
}
.page-users_list .user-card .card-footer .btn{
  flex:1 1 0; min-width:0; /* allows equal flex + truncate if narrow */
  border-radius:10px; font-size:.83rem; padding:.38rem .5rem;
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
/* Button themes */
.page-users_list .btn-outline-primary{ border-color:var(--pri); color:var(--pri); }
.page-users_list .btn-outline-primary:hover{ background:var(--pri); color:#fff; }
.page-users_list .btn-outline-secondary:hover{ background:rgba(0,0,0,.05); }
@media (prefers-color-scheme: dark){
  .page-users_list .btn-outline-secondary:hover{ background:rgba(255,255,255,.08); }
}
.page-users_list .btn-outline-warning{ color:#b8860b; border-color:#b8860b; }
.page-users_list .btn-outline-warning:hover{ background:#b8860b; color:#fff; }
.page-users_list .btn-outline-danger{ color:var(--danger); border-color:var(--danger); }
.page-users_list .btn-outline-danger:hover{ background:var(--danger); color:#fff; }

/* Card media (user photo) CLS-safe */
.page-users_list img[width][height]{ max-width:100%; height:auto; display:block; }

/* Card spacing tune on small */
@media (max-width: 575.98px){
  .page-users_list .user-card{ min-height: 340px; }
  .page-users_list .user-card .card-footer{ gap:6px; }
}

/* ==========================================================================
   2) USERS ADD / EDIT — Section cards, role logic friendly, sticky actionbar
   ========================================================================== */

.page-users_add .ux-card{
  background: linear-gradient(180deg, var(--card-grad-top), var(--card-grad-bot));
  border:1px solid var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow:hidden;
}
.page-users_add .ux-card__header{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--card-border);
}
.page-users_add .ux-card__body{ padding:16px; }

/* Inputs */
.page-users_add .form-control, 
.page-users_add .form-select{
  border-radius: var(--r-md); padding:10px 12px;
  border-color: var(--card-border);
  background-clip: padding-box;
}
.page-users_add .input-group-text{ border-radius:var(--r-md); }

/* Hints / errors */
.page-users_add .form-hint{ font-size:12px; color:var(--txt-2); margin-top:6px; }
.page-users_add .invalid-msg{ color:var(--danger); font-size:12px; margin-top:6px; }

/* File preview chips */
.page-users_add .preview{
  margin-top:8px; border:1px dashed var(--card-border);
  border-radius:12px; padding:8px; min-height:46px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.page-users_add .preview .pv-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background: rgba(99,102,241,.10); color: var(--pri);
  border:1px solid rgba(99,102,241,.25); font-size:12px;
}

/* Sticky action bar */
.page-users_add .ux-actionbar{
  position: sticky; bottom:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--bg) 45%);
  border-top:1px solid var(--card-border);
  backdrop-filter: blur(6px);
}
.page-users_add .ux-actionbar .btn{ border-radius:12px; }
.page-users_add .ux-actionbar .btn-primary{
  background: linear-gradient(135deg, var(--pri), var(--pri-2)); border:none;
}
@media (max-width: 575.98px){
  .page-users_add .ux-actionbar{ flex-direction:column; align-items:stretch; }
  .page-users_add .ux-actionbar .btn{ width:100%; }
}

/* Responsive form columns */
.page-users_add .row.g-3 > [class*="col-"]{ flex:1 1 100%; max-width:100%; }
@media (min-width: 768px){
  .page-users_add .row.g-3 > .col-md-4{ flex:0 0 50%; max-width:50%; }
}
@media (min-width: 992px){
  .page-users_add .row.g-3 > .col-md-4{ flex:0 0 33.333%; max-width:33.333%; }
}

/* ==========================================================================
   3) USERS VIEW — Docs carousel (photo/PAN/Aadhaar/cheque only)
   ========================================================================== */

.page-users_view .list-group{ border-radius: var(--r-lg); overflow:hidden; }

/* Carousel container */
.page-users_view #carouselDocs{
  border-radius: var(--r-lg);
  background: var(--card);
  border:1px solid var(--card-border);
  box-shadow: var(--shadow-1);
}
.page-users_view .carousel-inner{ border-radius: var(--r-lg); }

.page-users_view img, 
.page-users_view iframe{
  width:100%;
  max-height: 65vh;         /* good default height */
  object-fit: contain;
  background:#fff;
  border-radius:10px;
}

/* Controls emphasis */
.page-users_view .carousel-control-prev-icon,
.page-users_view .carousel-control-next-icon{
  filter: drop-shadow(0 0 6px rgba(0,0,0,.55));
}
.page-users_view .carousel-control-prev:hover,
.page-users_view .carousel-control-next:hover{
  filter: brightness(1.15);
}

/* ==========================================================================
   4) USERS LOGIN / CHANGE PASSWORD — compact, centered, mobile-first
   ========================================================================== */

/* Auth-specific layout: hide app chrome and add hero look */
body.layout-auth{
  background:
    radial-gradient(circle at 18% 22%, rgba(99,102,241,.12), transparent 32%),
    radial-gradient(circle at 82% 10%, rgba(16,185,129,.12), transparent 30%),
    linear-gradient(135deg, #f8fafc 0%, #eef2ff 55%, #f8fafc 100%);
}
body.layout-auth #sidebarNav,
body.layout-auth #navBackdrop,
body.layout-auth .topbar{ display:none !important; }
body.layout-auth .d-flex.flex-column.flex-md-row.min-vh-100{ min-height:100vh; }
body.layout-auth .main-wrap{ padding:0; }

.auth-shell{ max-width: 1100px; }
.auth-title{ font-weight: 700; color: #0f172a; letter-spacing: -0.4px; }
.auth-lead{ font-size: 1.05rem; color: #334155; }
.auth-badge{
  background: rgba(99,102,241,.14);
  border:1px solid rgba(99,102,241,.25);
  color:#312e81;
  box-shadow: 0 6px 18px rgba(99,102,241,.15);
}
.auth-badge .badge-dot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  display:inline-block;
}
.auth-card{
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f6fb 100%);
  box-shadow: 0 14px 40px rgba(15,23,42,.12);
}
.auth-card .form-label{ color:#0f172a; font-weight:600; }

.page-users_login .card,
.page-users_change_password .card{
  border-radius: 16px; border:1px solid var(--card-border);
  box-shadow: var(--shadow-1);
  background: linear-gradient(180deg, var(--card-grad-top), var(--card-grad-bot));
}
.page-users_login .btn,
.page-users_change_password .btn{
  border-radius: 10px;
}

/* Form controls size for touch */
.page-users_login .form-control, 
.page-users_change_password .form-control{
  min-height:44px; border-radius:12px;
}

/* ==========================================================================
   5) UTILITIES & FIXES
   ========================================================================== */

/* Prevent horizontal scroll anywhere */
.page-users_list, .page-users_add, .page-users_view, .page-users_login, .page-users_change_password{
  overflow-x: hidden;
}

/* Images: avoid CLS by keeping intrinsic ratio if width/height attrs exist */
img[width][height]{ height:auto; }

/* Small helper: subdued hr */
hr.hr-light{ border:0; height:1px; background:var(--card-border); }

/* Bell badge size fix if used inside list topbar */
#bellBtn .badge{ font-size:.65rem; min-width:1.05rem; }

/* Mild hover for any generic .btn-primary (just in case) */
.btn-primary:hover{ filter: brightness(1.05); }

/* Dark mode subtle borders inside cards */
@media (prefers-color-scheme: dark){
  .list-group-item{ background: transparent; color:var(--txt); border-color:var(--card-border); }
}
/* users_list.css or users.css */
.bell-btn {
  border-radius: 10px;
}
.btn-success.btn-sm i {
  font-size: 1rem;
}