/* Professional responsive styles for Pehchan Dhantewada frontend */
  :root{
    --bg:#f4f7fb;
    --surface:#ffffff;
    --muted:#6b7280;
    --accent:#2B63FF;
    --accent-600:#1b4ce0;
    --success:#0f7a3a;
    --danger:#b91c1c;
    --radius:12px;
    --glass: rgba(43,99,255,0.06);
    --max-width:1100px;
  }

  *
  {
    box-sizing:border-box;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial
  }

  html,body
  {height:100%;
    margin:0;
    background:var(--bg);
    color:#0f172a
  }

  /* AUTH (login) page */
  .auth-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:32px;
    padding:28px;
  }

  .auth-card{
    width:420px;
    background:var(--surface);
    border-radius:16px;
    padding:22px;
    box-shadow:0 10px 30px rgba(16,24,40,0.08);
  }

  .auth-head {
  display: flex;
  flex-direction: column;    /* stack items vertically */
  justify-content: center;
  align-items: center;        /* center everything */
  text-align: center;
  gap: 6px;
  margin-bottom: 14px;
  }

.auth-head h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--accent);
  margin: 0;
}

.auth-head .muted {
  font-size: 14px;
  color: var(--muted);
}

  .small
  {
    font-size:13px;
    color:var(--muted)
  }

  .auth-side
  {
    max-width:420px;
    padding:22px;
    background:linear-gradient(180deg,rgba(43,99,255,0.06),transparent);
    border-radius:12px;
  }

  .features
  {
    margin-top:12px;
    list-style:none;
    padding-left:0;
  }

  .features li
  {
    padding:8px 0;
    color:var(--muted)
    }

  /* Inputs */
  .form 
  {
    margin-top:12px
  }

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

  .form-row .col
  {
    flex:1;
    min-width:160px
  }

  label
  {
    display:block;
    font-weight:600;
    font-size:13px;
    margin-bottom:6px
  }

  input[type="text"], input[type="password"], input[type="date"], select, textarea
  {
    width:100%;
	padding:10px;
	border-radius:10px;
	border:1px solid #e6eef8;
	background:#fff;outline:none;
	font-size:14px
  }

  textarea
  {
    resize:vertical
  }

  /* Buttons */
  button
  {
    border:0;
    padding:10px 14px;
    border-radius:10px;
    font-weight:600;
    cursor:pointer
  }
  .btn-primary{
    background:var(--accent);
    color:#fff
  }

  .btn-primary:hover
  {
    background:var(--accent-600)
  }

  .btn-ghost
  {
    background:transparent;
    border:1px solid rgba(15,23,42,0.06)
  }

  /* Layout */
  .layout
  {
    display:flex;
    min-height:100vh;
    align-items:stretch
  }

  .sidebar
  {
    width:260px;
    background:var(--surface);
    padding:20px;
    border-right:1px solid #eef2f6;
    display:flex;
    flex-direction:column;
    gap:10px
  }

  .brand
  {
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    color:var(--accent)
  }

  .nav-link
  {
    display:block;
    padding:10px;
    border-radius:8px;
    color:var(--accent);
    text-decoration:none;
    margin-top:8px;
    background:var(--glass)
  }

  .nav-link.active
  {
    background:linear-gradient(90deg,rgba(43,99,255,0.08),transparent);
    font-weight:700
  }
  .nav-logout
  {
	margin-top:auto;
    padding:10px;
    border-radius:8px;
    background:transparent;
    color:var(--danger);
    border:1px solid rgba(185,28,28,0.08);
    cursor:pointer
  }

  /* Content */
  .content
  {
	  flex:1;
	  padding:22px;
	  max-width:var(--max-width);
	  margin:0 auto
	  }
  .topbar
	{
	  display:flex;
	  justify-content:space-between;
	  align-items:center;
	  margin-bottom:18px
	  }
	  
  .grid
  {
	  display:grid;
	  grid-template-columns:repeat(3,1fr);
	  gap:16px
	  }
	  
  .stat-card
  {background:var(--surface);
  padding:18px;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(16,24,40,0.04)
  }
  
  .stat-card h3
  {margin:0;
  font-size:20px;
  color:#0b1220
  }
  
  .card
  {background:var(--surface);
  padding:16px;
  border-radius:12px;
  box-shadow:0 8px 26px rgba(16,24,40,0.04)
  }

  /* Form card */
  .form-card{
	  max-width:800px
	  }
	  
  .form-actions{
	  display:flex;
	  gap:10px;
	  align-items:center
	  }

  /* table placeholder */
  .table-placeholder
  {padding:16px;
	border-radius:10px;
	border:1px dashed #e6eef8;
	width: 100%;
    overflow-x: auto;      /* Enables horizontal scrollbar */
    overflow-y: hidden;
    padding-bottom: 10px;
	}
	
 .table-placeholder table {
    width: max-content;    /* Ensures table expands horizontally */
    border-collapse: collapse;
}
.table-placeholder th,
.table-placeholder td {
    white-space: nowrap;   /* Prevent text from wrapping */
    padding: 8px 12px;
}
  /* user badge */
  .user-badge
  {background:var(--glass);
  padding:6px 10px;
  border-radius:999px;
  color:var(--accent);
  font-weight:600}
  
  
  /*login page */ 
  .search-bar-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.btn-primary {
  padding: 10px 18px;
  background: #2B63FF;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.pagination {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: center;
}

.pagination button {
  padding: 8px 14px;
  border-radius: 6px;
  background: #eee;
  border: none;
  cursor: pointer;
}

.sidebar-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  margin-right: 8px;
}

/* --- Sidebar Footer User Icon (NEW) --- */
.nav-logout {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  background: transparent;
  color: var(--danger);
  border: 1px solid rgba(185,28,28,0.08);
  cursor: pointer;
  margin-top: 20px;    /* replaced auto with clean spacing */
}
.sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #eef2f6;
}

.user-footer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.user-footer-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--glass);
  padding: 4px;
}
  


/* Mobile behavior */
@media (max-width:700px) {

  .menu-toggle {
    display: block;
  }

  .topbar {
    justify-content: space-between;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    height: 100vh;
    width: 260px;
    background: var(--surface);
    z-index: 1000;
    transition: left 0.3s ease;
    flex-direction: column;
    padding: 20px;
  }

  .sidebar.open {
    left: 0;
  }

  .content {
    padding-top: 20px;
  }

  /* Hide brand only on mobile */
  .sidebar .brand {
    display: flex;
  }
}

  

  /* responsive */
  @media (max-width:1000px){
    .grid{grid-template-columns:repeat(2,1fr)}
    .auth-card{width:360px}
	 .sidebar{
		width:100%;
		flex-direction:row;
		align-items:center;
		overflow:auto;
		padding:12px}
  }
  @media (max-width:700px){
    .layout{
		flex-direction:column
		}
		
    .sidebar{
		width:100%;
		flex-direction:row;
		align-items:center;
		overflow:auto;
		padding:12px}
		
    .sidebar .brand{
		display:none
		}
    .grid{
		grid-template-columns:1fr
		}
    .auth-page{
		padding:16px;
		flex-direction:column-reverse
		}
  }