/* style.css — AkademiLeader unified theme (WHITE • GOLD)
   FIX:
   - Border default tidak lagi “putih” sebelum focus
   - Tambah coverage untuk input url/date/file/search dll
*/

/* ---------- Theme tokens ---------- */
:root{
  --bg: #f9fafb;
  --bg-soft: #ffffff;

  /* Border dibuat sedikit lebih gelap agar terlihat di background putih */
  --border-soft: #d1d5db;          /* sebelumnya #e5e7eb (terlalu pucat) */
  --border-strong: rgba(17,24,39,.18);

  --primary: #c9a227;
  --primary-soft: #f3e8c9;
  --primary-dark: #b0891e;

  --text-main: #111827;
  --text-muted: #6b7280;

  --radius-lg: 1rem;      /* 16px */
  --radius-md: 0.75rem;   /* 12px */
  --shadow-soft: 0 15px 35px rgba(15, 23, 42, 0.08);

  --focus-ring: rgba(201, 162, 39, .20);
  --danger: #ef4444;
  --success: #16a34a;
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height: 1.55;
  color: var(--text-main);
  background:
    radial-gradient(circle at 0 0, rgba(250, 204, 21, 0.15), transparent 55%),
    radial-gradient(circle at 100% 15%, rgba(201, 162, 39, 0.10), transparent 55%),
    var(--bg);
}

a{ color: inherit; text-decoration: none; }
a:hover{ opacity: .95; }

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

button, input, select, textarea{ font: inherit; }
button{ cursor:pointer; }

::selection{ background: rgba(250, 204, 21, .35); }

/* ---------- Layout helpers ---------- */
.al-container{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
}

.al-grid{ display:grid; gap:14px; }
.al-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

/* ---------- Card ---------- */
.al-card{
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

/* ---------- Typography ---------- */
h1, h2, h3{ letter-spacing: -0.02em; }
h1{ font-size: 34px; margin: 0 0 10px; }
h2{ font-size: 24px; margin: 0 0 10px; }
h3{ font-size: 18px; margin: 0 0 10px; }
p { margin: 0 0 10px; color: var(--text-muted); }

.al-muted{ color: var(--text-muted); }
.al-center{ text-align:center; }
.al-spacer{ height:10px; }

/* ---------- Form controls ---------- */
label{ display:block; margin:10px 0 6px; color: var(--text-muted); }

/* NOTE: ditambah url/date/search/file */
.al-input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="search"],
select,
textarea,

/* Extra selectors for common fields (nomor HP / username) */
input[name="phone"],
input[name="no_hp"],
input[name="hp"],
input[id="phone"],
input[id="no_hp"],
input[id="hp"],
input[name="username"],
input[id="username"]{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;

  /* Border default dibuat lebih terlihat */
  border: 1px solid var(--border-strong);
  background: #ffffff;
  color: var(--text-main);

  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease, background-color .15s ease;
}

/* Hover: biar tidak “menghilang” saat belum fokus */
.al-input:hover,
input:hover,
select:hover,
textarea:hover{
  border-color: rgba(17,24,39,.28);
}

textarea{ resize: vertical; }

.al-input:focus,
input:focus,
select:focus,
textarea:focus{
  border-color: rgba(201, 162, 39, .75);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

::placeholder{
  color: rgba(107, 114, 128, .75);
}

.al-help{
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* input type file (sebelumnya tidak distyle, jadi tampak “beda”) */
input[type="file"]{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: #ffffff;
  color: var(--text-main);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="file"]:hover{
  border-color: rgba(17,24,39,.28);
}
input[type="file"]:focus{
  border-color: rgba(201, 162, 39, .75);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

/* Checkbox biar rapi */
input[type="checkbox"]{
  width: auto;
  accent-color: var(--primary);
}

/* ---------- Buttons ---------- */
.al-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:12px 14px;
  border-radius:12px;
  border: 1px solid rgba(201, 162, 39, .55);
  background: linear-gradient(to right, var(--primary), #facc15);
  color: #1f2933;
  font-weight: 800;

  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 22px rgba(202, 138, 4, 0.22);
}

.al-btn:hover{ filter: brightness(0.985); }
.al-btn:active{ transform: translateY(1px); }

.al-btn-secondary{
  background: #ffffff;
  color: #92400e;
  border: 1px solid var(--border-soft);
  box-shadow: none;
}

.al-btn-secondary:hover{
  background: #fefce8;
  border-color: rgba(250, 204, 21, .55);
}

.al-btn-danger{
  background: linear-gradient(135deg, rgba(239, 68, 68, .92), rgba(239, 68, 68, .72));
  border: 1px solid rgba(239, 68, 68, .35);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(239, 68, 68, .14);
}

/* Disabled “button-like” spans */
.al-btn[aria-disabled="true"],
.al-btn.is-disabled{
  opacity: .6;
  pointer-events: none;
}

/* ---------- Alerts ---------- */
.al-alert{
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  background: #ffffff;
}

.al-alert-danger{
  background: rgba(239, 68, 68, .08);
  border-color: rgba(239, 68, 68, .22);
}

.al-alert-success{
  background: rgba(22, 163, 74, .08);
  border-color: rgba(22, 163, 74, .22);
}

/* ---------- Table (admin list) ---------- */
.al-table-wrap{
  overflow:auto;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: var(--bg-soft);
  box-shadow: var(--shadow-soft);
}

.al-table{
  width:100%;
  border-collapse:collapse;
  min-width: 820px;
  background: var(--bg-soft);
}

.al-table th, .al-table td{
  padding: 10px;
  border-bottom: 1px solid var(--border-soft);
  text-align:left;
  white-space: nowrap;
  color: var(--text-main);
}

.al-table th{
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6b7280;
  background: #f9fafb;
}

/* ---------- Small responsive ---------- */
@media (max-width: 720px){
  h1{ font-size: 28px; }
  .al-container{ width: calc(100% - 24px); }
}

/* Member dashboard: card kelas (thumbnail kiri + tombol kanan) */
.member-class-card{
  display:flex;
  align-items:stretch;
  overflow:hidden;
}

.member-thumb{
  flex:0 0 auto;
  width:40%;
  max-width:210px;
  aspect-ratio:4/5;
  overflow:hidden;
  border-right:1px solid var(--border-soft);
  background:#f9fafb;
}

.member-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.member-thumb .member-thumb-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  text-align:center;
  font-weight:700;
  color:#92400e;
  background: linear-gradient(135deg, #fef3c7, #facc15);
}

.member-class-body{
  flex:1;
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  min-width:0;
}

.member-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

@media (max-width: 900px){
  .member-thumb{ max-width:180px; }
}
@media (max-width: 640px){
  .member-thumb{ width:35%; max-width:160px; }
  .member-actions{ flex-direction:column; align-items:stretch; }
  .member-actions .al-btn{ width:100%; }
}