/*
Shared component styles — CodeBridge LMS.

These are the reusable primitives identified in /context/DESIGN_ASSETS.md
("shared elements across screens"): card, stat tile, status pill, table,
button, input, empty state. admin_portal / student_portal / homepage should
reuse these classes rather than redefining their own button/card/table
styles per app.
*/

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}

h1, h2, h3, h4 { font-family: var(--font-heading); margin: 0; color: var(--color-text); }
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 15px; font-weight: 600; }
p { margin: 0; color: var(--color-text-muted); }
a { color: var(--color-primary); text-decoration: none; }

/* Layout */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Card */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.card-elevated {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Stat tile */
.stat-tile { padding: 14px; }
.stat-tile .stat-label { font-size: 13px; color: var(--color-text-muted); }
.stat-tile .stat-value { font-family: var(--font-heading); font-size: 24px; font-weight: 700; color: var(--color-primary); margin-top: 4px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); cursor: pointer;
}
.btn:hover { background: var(--color-surface-sunken); }
.btn-primary { background: var(--color-primary); color: var(--color-primary-contrast); border: none; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-block { width: 100%; justify-content: center; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; color: var(--color-text-muted); }
.field input, .field select, .field textarea {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 14px; font-family: var(--font-body);
  color: var(--color-text); background: var(--color-surface);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--color-primary); outline-offset: -1px;
}
.field.has-error input { border-color: var(--color-danger-text); background: var(--color-danger-bg); }
.field-error { color: var(--color-danger-text); font-size: 12px; }

/* Status pill (tag) */
.tag { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; display: inline-block; }
.tag-ok { background: var(--color-success-bg); color: var(--color-success-text); }
.tag-warn { background: var(--color-warning-bg); color: var(--color-warning-text); }
.tag-info { background: var(--color-info-bg); color: var(--color-info-text); }
.tag-off { background: var(--color-off-bg); color: var(--color-off-text); }
.tag-danger { background: var(--color-danger-bg); color: var(--color-danger-text); }

/* Table */
table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data-table th { text-align: left; font-family: var(--font-heading); font-size: 11.5px; color: var(--color-text-muted); padding: 10px 12px; border-bottom: 1px solid var(--color-border); }
table.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-surface-sunken); }

/* Alerts / Django messages */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 13.5px; }
.alert-success { background: var(--color-success-bg); color: var(--color-success-text); }
.alert-error { background: var(--color-danger-bg); color: var(--color-danger-text); }
.alert-info, .alert-warning { background: var(--color-info-bg); color: var(--color-info-text); }

/* Course thumbnail placeholder — see wireframe "course thumb" stripe (DESIGN_ASSETS.md) */
.thumb-stripe {
  height: 56px;
  background: repeating-linear-gradient(45deg, var(--color-surface-sunken), var(--color-surface-sunken) 6px, var(--color-surface) 6px, var(--color-surface) 12px);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--color-text-muted);
}
.thumb-img { width: 100%; height: 56px; object-fit: cover; display: block; }

/* Empty state */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--color-text-muted); text-align: center; padding: 40px 20px; }

/* Public/auth page shell */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: 100%; max-width: 420px; padding: 32px; }
.auth-card .brand { font-family: var(--font-heading); font-weight: 700; font-size: 18px; margin-bottom: 20px; text-align: center; }
.auth-card h1 { font-size: 20px; margin-bottom: 20px; text-align: center; }
.auth-footer { margin-top: 16px; text-align: center; font-size: 13px; color: var(--color-text-muted); }