/* styles.css
   Classic professional admin style:
   - neutral colors
   - readable typography
   - boxed cards, subtle shadows
   - consistent spacing and responsive table
*/

/* Base / reset-like rules */
:root{
    --bg: #f6f7f9;
    --card: #ffffff;
    --muted: #6b7280;
    --accent: #1f6feb;
    --accent-2: #0b8a5f;
    --danger: #c34141;
    --border: #e6e9ee;
    --shadow: 0 6px 18px rgba(19,24,34,0.06);
    --radius: 8px;
    --pad: 18px;
    --max-width: 1000px;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }
  
  * { box-sizing: border-box; }
  html,body { 
      height: 100%; 
      margin: 0; 
      background: var(--bg); 
      color: #111827; 
      -webkit-font-smoothing:antialiased; 
  }
  
  /* Page container */
  .container {
    max-width: var(--max-width);
    margin: 28px auto;
    padding: 20px;
  }
  
  /* Header */
  .header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom: 18px;
  }
  .brand {
    display:flex;
    gap:12px;
    align-items:center;
  }
  .logo {
    width:44px; height:44px; border-radius:8px;
    background: linear-gradient(135deg, #2b6ef6, #0077cc);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size:16px;
    box-shadow: 0 4px 10px rgba(15,36,92,0.08);
  }
  .title {
    font-size:20px; 
    font-weight:600;
  }
  
  .subtitle { 
      color:var(--muted); 
      font-size:13px; }
  
  /* Grid layout for cards */
  .grid {
    display:grid;
    grid-template-columns: 1fr;
    gap:18px;
  }
  @media(min-width:980px){
    .grid-cols-2 { 
      grid-template-columns: 1fr 1fr; 
     }
  }
  
  /* Card */
  .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--pad);
    box-shadow: var(--shadow);
  }
  
  /* Form */
  .form-row {
    display:flex; 
    gap:12px; 
    margin-bottom:10px;
  }
  
  .field { 
      flex:1; 
      display:flex; 
      flex-direction:column; 
      gap:8px; 
  }
  
  label { 
      font-size:13px; 
      color:#111827; 
      font-weight:600;
  }
  
  input[type="text"], input[type="number"], input[type="datetime-local"], select, textarea {
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:6px;
    font-size:14px;
    background: #fff;
  }
  
  textarea { 
      min-height:110px; 
      resize:vertical; 
      font-family:inherit; 
  }
  
  /* Buttons */
  .btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:8px;
    border:none;
    cursor:pointer;
    font-weight:600;
    font-size:14px;
  }
  
  .btn-primary { 
      background:var(--accent); 
      color:#fff; 
      box-shadow: 0 6px 18px rgba(31,111,235,0.12); 
  }
  
  .btn-ghost { 
      background:transparent; 
      color:var(--accent); 
      border:1px solid rgba(31,111,235,0.12); 
  }
  
  .btn-danger { 
      background:var(--danger); 
      color:#fff; 
  }
  
  .small { 
      padding:6px 10px; 
      font-size:13px; 
      border-radius:6px; 
  }
  
  /* Messages */
  .message { 
      padding:10px 12px; 
      border-radius:6px; 
      font-size:14px; 
  }
  
  .message.success { 
      background: #ecfdf5; 
      color: #065f46; 
      border:1px solid #bbf7d0; 
  }
  
  .message.error { 
      background: #fff1f2; 
      color: #86181d; 
      border:1px solid #fecaca; 
  }
  
  /* Table */
  .table { 
      width:100%; 
      border-collapse:collapse; 
      font-size:14px; 
  }
  
  .table th, .table td { 
      padding:12px 10px; 
      border-bottom:1px solid #f1f2f4; 
      text-align:left; 
      vertical-align:middle; 
  }
  
  .table th { 
      font-size:13px; 
      color:var(--muted); 
      font-weight:600; 
      background:transparent; 
  }
  
  .table tbody tr:hover { 
      background:#fbfbfc; 
  }
  
  /* Code box */
  .pre {
    font-family: var(--mono);
    font-size:13px;
    background:#fafafa;
    padding:10px;
    border-radius:6px;
    border:1px solid #f0f0f0;
    overflow:auto;
  }
  
  /* Footer small note */
  .note { 
      color:var(--muted); 
      font-size:13px; 
      margin-top:8px; 
  }
  
  /* Helpers */
  .row { 
      display:flex; 
      gap:12px; 
      align-items:center; 
  }
  
  .col { 
      display:flex; 
      flex-direction:column; 
      gap:12px; 
  }
  
  .hint { 
      color:var(--muted); 
      font-size:13px; 
  }
  
  .right { 
      margin-left:auto; 
      display:flex; 
      gap:8px; 
      align-items:center; 
  }

  .user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid rgba(17,24,39,0.08);
    border-radius: 999px;
    background: #fff;
  }

  .avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2b6ef6, #0b8a5f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
  }

  /* Auth pages */
  .auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(125deg, #eff3ff, #fef4f2);
    padding: 24px;
  }

  .auth-container {
    width: min(430px, 100%);
  }

  .auth-card {
    background: var(--card);
    border-radius: 14px;
    padding: 32px;
    box-shadow: 0 24px 60px rgba(15, 40, 75, 0.12);
    border: 1px solid rgba(31,111,235,0.08);
  }

  .auth-header {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 24px;
  }

  .auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .full-width {
    width: 100%;
    justify-content: center;
  }

  .demo-card {
    margin-top: 18px;
    padding: 14px;
    border-radius: 10px;
    background: #f8fbff;
    border: 1px dashed rgba(31,111,235,0.3);
    font-size: 13px;
    color: #0f172a;
    line-height: 1.5;
  }