/* ==========================================================================
   SHARED COMPONENT LAYER — SMKku Design System v1.0
   Buttons · Forms · Badges · Alerts · Cards · Page banner · Breadcrumb
   Depends on tokens.css. Loaded by public pages AND admin panel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--c-neutral-800);
    background: var(--c-neutral-0);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, video, iframe { max-width: 100%; }

h1, h2, h3, h4 { color: var(--c-neutral-900); line-height: var(--leading-tight); margin: 0 0 var(--space-4); }
p  { margin: 0 0 var(--space-4); }
a  { color: var(--c-primary-600); }

/* Visible, consistent keyboard focus everywhere */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

.container {
    width: min(1180px, 100% - 2 * var(--space-5));
    margin-inline: auto;
}

/* Screen-reader-only helper */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link — first focusable element on every page */
.skip-link {
    position: absolute; left: var(--space-4); top: -48px;
    z-index: 2000;
    padding: var(--space-2) var(--space-4);
    background: var(--c-primary-700); color: #fff;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   1. BUTTONS — variant × size matrix
   Usage:  class="btn btn-primary" | "btn btn-outline" | "btn btn-ghost"
           | "btn btn-danger"  + size: "btn-sm" / default / "btn-lg"
   -------------------------------------------------------------------------- */
.btn,
.btn-admin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 42px;
    padding: var(--space-2) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color     var(--duration-fast) var(--ease-out),
        color            var(--duration-fast) var(--ease-out),
        box-shadow       var(--duration-fast) var(--ease-out),
        transform        var(--duration-fast) var(--ease-out);
}
.btn svg, .btn-admin svg, .btn i, .btn-admin i {
    width: 1em; height: 1em; flex-shrink: 0;
}

/* Primary — main actions (one per view region) */
.btn-primary {
    background: var(--c-primary-700);
    border-color: var(--c-primary-700);
    color: #fff;
}
.btn-primary:hover { background: var(--c-primary-800); border-color: var(--c-primary-800); }
.btn-primary:active { background: var(--c-primary-900); }

/* Accent — SPMB / highlight CTA */
.btn-accent {
    background: var(--c-accent-600);
    border-color: var(--c-accent-600);
    color: #fff;
}
.btn-accent:hover { background: var(--c-accent-700); border-color: var(--c-accent-700); }

/* Secondary / outline */
.btn-outline,
.btn-secondary {
    background: var(--c-neutral-0);
    border-color: var(--c-neutral-300);
    color: var(--c-neutral-700);
}
.btn-outline:hover,
.btn-secondary:hover {
    border-color: var(--c-primary-600);
    color: var(--c-primary-600);
    background: var(--c-primary-50);
}

/* Ghost / tertiary */
.btn-ghost { background: transparent; color: var(--c-primary-600); }
.btn-ghost:hover { background: var(--c-primary-50); }

/* Danger */
.btn-danger {
    background: var(--c-danger-600);
    border-color: var(--c-danger-600);
    color: #fff;
}
.btn-danger:hover { background: var(--c-danger-700); border-color: var(--c-danger-700); }

/* Success / Warning (admin flows) */
.btn-success { background: var(--c-success-600); border-color: var(--c-success-600); color: #fff; }
.btn-success:hover { background: var(--c-success-700); border-color: var(--c-success-700); }
.btn-warning { background: var(--c-warning-600); border-color: var(--c-warning-600); color: #fff; }
.btn-warning:hover { background: var(--c-warning-700); border-color: var(--c-warning-700); }

/* Sizes */
.btn-sm, .btn-admin.btn-sm { min-height: 32px; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn-lg { min-height: 48px; padding: var(--space-3) var(--space-6); font-size: var(--text-base); }
.btn-block { width: 100%; }

.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: .55; cursor: not-allowed; transform: none;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   2. FORM CONTROLS
   -------------------------------------------------------------------------- */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }

.form-group label,
.spmb-field label,
.admin-field label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--c-neutral-700);
    letter-spacing: var(--tracking-wide);
}

.form-control,
.spmb-field input,
.spmb-field select,
.spmb-field textarea,
.admin-field input,
.admin-field select,
.admin-field textarea,
.msg-search-input {
    width: 100%;
    min-height: 42px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--c-neutral-300);
    border-radius: var(--radius-sm);
    background: var(--c-neutral-0);
    color: var(--c-neutral-900);
    font: inherit;
    font-size: var(--text-base);
    transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow   var(--duration-fast) var(--ease-out);
}
textarea { min-height: 110px; resize: vertical; }

.form-control:hover,
.spmb-field input:hover, .spmb-field select:hover, .spmb-field textarea:hover,
.admin-field input:hover, .admin-field select:hover, .admin-field textarea:hover {
    border-color: var(--c-neutral-400);
}

.form-control:focus,
.spmb-field input:focus, .spmb-field select:focus, .spmb-field textarea:focus,
.admin-field input:focus, .admin-field select:focus, .admin-field textarea:focus {
    outline: none;
    border-color: var(--c-primary-600);
    box-shadow: var(--focus-ring);
}

/* Error / invalid state — pair with .form-error text below the field */
.form-control[aria-invalid="true"],
.form-control.is-invalid,
.spmb-field input.is-invalid,
.admin-field input.is-invalid {
    border-color: var(--c-danger-600);
}
.form-control[aria-invalid="true"]:focus,
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(185, 28, 28, .25);
}

.form-error {
    display: flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--c-danger-600);
}
.form-hint { font-size: var(--text-xs); color: var(--c-neutral-500); }

/* Checkboxes & radios — accent-colored, consistent hit area */
input[type="checkbox"], input[type="radio"] {
    width: 1.05em; height: 1.05em;
    accent-color: var(--c-primary-600);
    cursor: pointer;
}

/* File inputs */
input[type="file"] { padding: var(--space-2); cursor: pointer; }
input[type="file"]::file-selector-button {
    margin-right: var(--space-3);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--c-neutral-300);
    border-radius: var(--radius-xs);
    background: var(--c-neutral-100);
    color: var(--c-neutral-700);
    font: inherit; font-size: var(--text-xs); font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}
input[type="file"]::file-selector-button:hover { background: var(--c-neutral-200); }

/* Select arrow consistency */
select.form-control, .spmb-field select, .admin-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
}

/* --------------------------------------------------------------------------
   3. BADGES / STATUS PILLS
   Usage: <span class="badge badge-success">Diterima</span>
   -------------------------------------------------------------------------- */
.badge,
.status-badge,
.status-Diterima, .status-Ditolak, .status-Pending {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.6;
    white-space: nowrap;
}
.badge-success, .status-Diterima { background: var(--c-success-100); color: var(--c-success-700); }
.badge-warning, .status-Pending  { background: var(--c-warning-100); color: var(--c-warning-700); }
.badge-danger,  .status-Ditolak  { background: var(--c-danger-100);  color: var(--c-danger-700); }
.badge-info                      { background: var(--c-info-100);    color: var(--c-info-700); }
.badge-neutral                   { background: var(--c-neutral-100); color: var(--c-neutral-700); }
.badge-accent                    { background: var(--c-accent-100);  color: var(--c-accent-700); }

/* Section eyebrow badge (page headers) */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--c-accent-700);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}
.section-badge svg, .section-badge i { width: 1.1em; height: 1.1em; }

/* --------------------------------------------------------------------------
   4. ALERTS
   -------------------------------------------------------------------------- */
.alert,
.contact-alert,
.spmb-alert,
.login-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    line-height: 1.6;
}
.alert svg, .alert i { width: 1.15em; height: 1.15em; flex-shrink: 0; margin-top: 2px; }

.alert-success, .contact-alert-success, .spmb-alert.success {
    background: var(--c-success-50);
    border-color: var(--c-success-100);
    border-left-color: var(--c-success-600);
    color: var(--c-success-700);
}
.alert-error, .contact-alert-error, .spmb-alert.error,
.login-alert {
    background: var(--c-danger-50);
    border-color: var(--c-danger-100);
    border-left-color: var(--c-danger-600);
    color: var(--c-danger-700);
}
.alert-warning {
    background: var(--c-warning-50);
    border-color: var(--c-warning-100);
    border-left-color: var(--c-warning-600);
    color: var(--c-warning-700);
}
.alert-info {
    background: var(--c-info-50);
    border-color: var(--c-info-100);
    border-left-color: var(--c-info-600);
    color: var(--c-info-700);
}
/* Admin alert compat (admin.css uses .alert.warning etc.) */
.alert.success { background: var(--c-success-50); border-color: var(--c-success-100); border-left-color: var(--c-success-600); color: var(--c-success-700); }
.alert.danger  { background: var(--c-danger-50);  border-color: var(--c-danger-100);  border-left-color: var(--c-danger-600);  color: var(--c-danger-700); }

/* --------------------------------------------------------------------------
   5. PAGE BANNER + BREADCRUMB (shared by all inner pages)
   -------------------------------------------------------------------------- */
.page-banner {
    position: relative;
    padding: var(--space-16) var(--space-5);
    text-align: center;
    color: #fff;
    background:
        linear-gradient(rgba(13, 36, 64, .82), rgba(13, 36, 64, .82)),
        url('../images/hero-bg.jpg') center / cover no-repeat;
}
.page-banner h1 {
    margin: 0 0 var(--space-2);
    color: #fff;
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
}
.page-banner p { margin: 0; color: var(--c-primary-100); font-size: var(--text-sm); }

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-3) auto 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-xs);
    color: var(--c-primary-100);
}
.breadcrumb a { color: #fff; text-decoration: none; opacity: .85; }
.breadcrumb a:hover { opacity: 1; text-decoration: underline; }
.breadcrumb svg { width: .9em; height: .9em; opacity: .7; }
.breadcrumb [aria-current="page"] { color: var(--c-accent-300); font-weight: var(--weight-semibold); }

/* --------------------------------------------------------------------------
   6. CARDS & GRIDS
   -------------------------------------------------------------------------- */
.card,
.major-card, .activity-card, .agenda-card, .card-item, .achievement-card {
    background: var(--c-neutral-0);
    border: 1px solid var(--c-neutral-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition:
        transform   var(--duration-base) var(--ease-out),
        box-shadow  var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out);
}
.card:hover,
.major-card:hover, .activity-card:hover, .agenda-card:hover, .card-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--c-neutral-300);
}
.card-body { padding: var(--space-5); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}
@media (max-width: 992px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .card-grid { grid-template-columns: 1fr; } }

.section { padding: var(--space-16) 0; }
.section-light { background: var(--c-neutral-50); }
.section-white { background: var(--c-neutral-0); }

.section-title, .section-title-center {
    margin: var(--space-2) 0 var(--space-6);
    color: var(--c-primary-900);
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
}
.section-title-center { text-align: center; }
.section-head-center { text-align: center; margin-bottom: var(--space-8); }
.section-head-center p { max-width: 620px; margin: var(--space-2) auto 0; color: var(--c-neutral-600); font-size: var(--text-sm); }

.card-title { color: var(--c-primary-900); font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); }
.card-text  { color: var(--c-neutral-600); font-size: var(--text-sm); line-height: var(--leading-normal); margin: 0 0 var(--space-4); }
.card-date  {
    font-size: var(--text-xs);
    color: var(--c-accent-700);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* Empty state */
.empty-data, .admin-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-12) var(--space-5);
    text-align: center;
    color: var(--c-neutral-500);
    font-size: var(--text-sm);
}
.empty-data svg, .empty-data i, .admin-empty svg {
    width: 40px; height: 40px;
    color: var(--c-neutral-300);
}
.empty-data strong { color: var(--c-neutral-700); font-size: var(--text-base); }

/* --------------------------------------------------------------------------
   7. MEDIA FRAMES (aspect-ratio locked)
   -------------------------------------------------------------------------- */
.media-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--c-neutral-100);
}
.media-frame img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}
.media-frame-wide { aspect-ratio: 16 / 9; }

/* --------------------------------------------------------------------------
   8. TYPOGRAPHY UTILITIES
   -------------------------------------------------------------------------- */
.text-muted { color: var(--c-neutral-600); }
.text-center { text-align: center; }
.mt-4 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }

/* Legacy compat: views previously styled with utility-ish classes */
.major-detail-link { color: var(--c-accent-700); font-weight: var(--weight-semibold); text-decoration: none; }
.major-detail-link:hover { text-decoration: underline; }