/* =============================================================================
   app.css — HookupCebu Global Styles
   Military green / black aesthetic throughout
   Mobile-first — breakpoints expand upward
   ============================================================================= */

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:   16px;
  scroll-behavior: smooth;
}

body {
  background:  var(--c-bg);
  color:       rgb(var(--c-text-rgb));
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  min-height:  100vh;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display:   block;
}

a {
  color:           rgb(var(--c-text-rgb));
  text-decoration: none;
  transition:      color 0.2s;
}
a:hover { color: var(--c-head); }

button {
  font-family: inherit;
  cursor:      pointer;
}

input, textarea, select {
  font-family: inherit;
  font-size:   1rem;
}

/* ── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  line-height: 1.3;
  color:       rgb(var(--c-text-rgb));
}

/* Great Vibes used for branding / decorative headings only */
.font-brand {
  font-family: 'Great Vibes', cursive;
}

/* ── Colour palette variables ────────────────────────────────────────────── */
:root {
  --green:        rgb(var(--c-text-rgb));
  --green-bright: rgb(var(--c-accent-rgb));
  --green-dim:    rgba(var(--c-text-rgb),0.68);
  --green-faint:  rgba(var(--c-text-rgb),0.1);
  --black:        #000;
  --black-soft:   #080808;
  --black-card:   var(--c-card);
  --border:       rgba(var(--c-text-rgb),0.15);
  --border-hover: rgba(var(--c-text-rgb),0.35);

  /* Match colours */
  --match-green: rgb(var(--c-accent-rgb));
  --match-amber: rgb(var(--c-warn-rgb));
  --match-red:   rgb(var(--c-danger-rgb));
}

/* ── Layout helpers ──────────────────────────────────────────────────────── */
.container {
  width:      100%;
  max-width:  960px;
  margin:     0 auto;
  padding:    0 16px;
}

.container-sm {
  width:      100%;
  max-width:  560px;
  margin:     0 auto;
  padding:    0 16px;
}

/* ── Page wrapper (for authenticated pages with sidebar) ─────────────────── */
.page-wrap {
  display:   flex;
  min-height: 100vh;
}

.page-main {
  flex:       1;
  padding:    24px 16px;
  min-width:  0;   /* prevent flex overflow */
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background:    var(--black-card);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       20px;
}

.card:hover {
  border-color: var(--border-hover);
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-group {
  margin-bottom: 18px;
}

.form-label {
  display:       block;
  font-size:     0.82rem;
  color:         var(--green-dim);
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}

.form-control {
  width:         100%;
  background:    var(--c-input);
  border:        1px solid var(--border);
  border-radius: 5px;
  color:         var(--green);
  padding:       10px 14px;
  font-size:     0.95rem;
  transition:    border-color 0.2s;
  outline:       none;
}

.form-control:focus {
  border-color: rgba(var(--c-text-rgb),0.5);
  box-shadow:   0 0 0 2px rgba(var(--c-text-rgb),0.06);
}

.form-control::placeholder {
  color: rgba(var(--c-text-rgb),0.68);
}

.form-error {
  font-size:  0.75rem;
  color:      var(--match-red);
  margin-top: 4px;
}

.form-hint {
  font-size:  0.75rem;
  color:      var(--green-dim);
  margin-top: 4px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display:       inline-block;
  padding:       10px 24px;
  border-radius: 6px;
  font-size:     0.92rem;
  font-weight:   400;
  letter-spacing: 0.03em;
  border:        1.5px solid transparent;
  transition:    all 0.2s;
  text-align:    center;
  cursor:        pointer;
  text-decoration: none;
}

.btn-primary {
  background:  rgba(var(--c-accent-rgb),0.15);
  border-color: rgb(var(--c-accent-rgb));
  color:        var(--green);
}
.btn-primary:hover {
  background:  rgba(var(--c-accent-rgb),0.28);
  color:       var(--c-head);
}

.btn-secondary {
  background:  transparent;
  border-color: var(--border);
  color:        var(--green-dim);
}
.btn-secondary:hover {
  border-color: var(--green);
  color:        var(--green);
}

.btn-danger {
  background:  rgba(var(--c-danger-rgb),0.15);
  border-color: rgb(var(--c-danger-rgb));
  color:        rgb(var(--c-danger-rgb));
}
.btn-danger:hover {
  background: rgba(var(--c-danger-rgb),0.28);
}

.btn-sm {
  padding:   6px 16px;
  font-size: 0.8rem;
}

.btn-block {
  display: block;
  width:   100%;
}

/* ── Alerts / notices ────────────────────────────────────────────────────── */
.alert {
  padding:       12px 16px;
  border-radius: 6px;
  font-size:     0.88rem;
  margin-bottom: 16px;
  border:        1px solid transparent;
}

.alert-success {
  background:   rgba(var(--c-accent-rgb),0.1);
  border-color: rgba(var(--c-accent-rgb),0.3);
  color:        var(--match-green);
}

.alert-error {
  background:   rgba(var(--c-danger-rgb),0.1);
  border-color: rgba(var(--c-danger-rgb),0.3);
  color:        rgb(var(--c-danger-rgb));
}

.alert-info {
  background:   rgba(var(--c-text-rgb),0.06);
  border-color: var(--border);
  color:        var(--green-dim);
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  display:       inline-block;
  padding:       2px 10px;
  border-radius: 10px;
  font-size:     0.7rem;
  font-weight:   400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge-green { background: rgba(var(--c-accent-rgb),0.15);  color: var(--match-green); border: 1px solid rgba(var(--c-accent-rgb),0.3); }
.badge-amber { background: rgba(var(--c-warn-rgb),0.15); color: var(--match-amber); border: 1px solid rgba(var(--c-warn-rgb),0.3); }
.badge-red   { background: rgba(var(--c-danger-rgb),0.15);   color: var(--match-red);   border: 1px solid rgba(var(--c-danger-rgb),0.3); }
.badge-gray  { background: rgba(var(--c-text-rgb),0.06); color: var(--green-dim); border: 1px solid var(--border); }

/* ── Utility ─────────────────────────────────────────────────────────────── */
.hidden    { display: none !important; }
.text-dim  { color: var(--green-dim); }
.text-faint{ color: rgba(var(--c-text-rgb),0.68); }
.text-sm   { font-size: 0.82rem; }
.text-xs   { font-size: 0.72rem; }
.text-center { text-align: center; }
.mt-1  { margin-top:  8px;  }
.mt-2  { margin-top:  16px; }
.mt-3  { margin-top:  24px; }
.mb-1  { margin-bottom:  8px;  }
.mb-2  { margin-bottom:  16px; }
.mb-3  { margin-bottom:  24px; }

/* ── Divider ─────────────────────────────────────────────────────────────── */
.divider {
  border:     none;
  border-top: 1px solid var(--border);
  margin:     20px 0;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: rgba(var(--c-text-rgb),0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--c-text-rgb),0.4); }

/* ── Desktop breakpoint ──────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .page-main { padding: 32px 24px; }
}