/* ============================================================
   Student ID Registration System — Mint Green theme
   ============================================================ */
:root {
    --mint-primary: #5EC8B6;
    --mint-secondary: #DDF7F2;
    --mint-accent: #3BA99C;
    --mint-bg: #F7FFFD;
    --mint-dark: #24413D;
    --mint-primary-soft: rgba(94, 200, 182, .14);
    --mint-shadow: 0 10px 30px rgba(36, 65, 61, .10);
    --mint-shadow-sm: 0 4px 14px rgba(36, 65, 61, .08);
    --radius: 16px;
    --radius-sm: 10px;
}

* { box-sizing: border-box; }

body {
    background: var(--mint-bg);
    color: var(--mint-dark);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    min-height: 100vh;
}

a { color: var(--mint-accent); }
a:hover { color: var(--mint-dark); }

.text-mint { color: var(--mint-primary) !important; }
.text-mint-dark { color: var(--mint-dark) !important; }
.bg-mint { background: var(--mint-primary) !important; }
.bg-mint-soft { background: var(--mint-secondary) !important; }

/* ---- Buttons ---- */
.btn-mint {
    background: var(--mint-primary);
    border-color: var(--mint-primary);
    color: #fff;
    font-weight: 600;
}
.btn-mint:hover, .btn-mint:focus {
    background: var(--mint-accent);
    border-color: var(--mint-accent);
    color: #fff;
}
.btn-outline-mint {
    border-color: var(--mint-primary);
    color: var(--mint-accent);
    font-weight: 600;
}
.btn-outline-mint:hover {
    background: var(--mint-primary);
    color: #fff;
}
.btn-check:checked + .btn-outline-mint { background: var(--mint-primary); color: #fff; }

/* ---- Cards ---- */
.card {
    border: 1px solid rgba(36, 65, 61, .06);
    border-radius: var(--radius);
    box-shadow: var(--mint-shadow-sm);
}
.card-soft { background: #fff; }
.card-header {
    background: #fff;
    border-bottom: 1px solid rgba(36, 65, 61, .06);
    font-weight: 700;
    border-radius: var(--radius) var(--radius) 0 0 !important;
}

.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: #d5e7e3;
    padding: .55rem .8rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--mint-primary);
    box-shadow: 0 0 0 .2rem var(--mint-primary-soft);
}
.form-label { font-weight: 600; font-size: .9rem; }
.input-group-text { background: var(--mint-secondary); border-color: #d5e7e3; }

.is-invalid, .form-control.is-invalid, .form-select.is-invalid { border-color: #dc3545 !important; }
.field-error { color: #dc3545; font-size: .82rem; margin-top: .2rem; display: block; }

/* ---- Badges ---- */
.badge-status {
    font-weight: 600;
    padding: .45em .8em;
    border-radius: 999px;
    font-size: .78rem;
}
.badge-pending  { background: #FFF3CD; color: #8a6d1d; }
.badge-approved { background: #D7F5EC; color: #1c7a63; }
.badge-rejected { background: #FBE0E0; color: #a02b2b; }
.badge-printed  { background: #E3E9FF; color: #3b46a9; }

/* ---- Stat tiles ---- */
.stat-tile {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--mint-shadow-sm);
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid rgba(36, 65, 61, .05);
    height: 100%;
}
.stat-tile .stat-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: grid; place-items: center;
    font-size: 1.5rem;
    background: var(--mint-secondary);
    color: var(--mint-accent);
    flex-shrink: 0;
}
.stat-tile .stat-value { font-size: 1.75rem; font-weight: 800; line-height: 1; }
.stat-tile .stat-label { font-size: .82rem; color: #6c8783; text-transform: uppercase; letter-spacing: .04em; }

/* ============================================================
   Public site
   ============================================================ */
.public-navbar {
    background: #fff;
    box-shadow: var(--mint-shadow-sm);
}
.public-navbar .brand-logo { height: 42px; width: auto; }
.public-hero {
    background: linear-gradient(135deg, var(--mint-primary), var(--mint-accent));
    color: #fff;
    border-radius: 0 0 32px 32px;
}
.public-shell { max-width: 960px; }

/* Wizard / progress */
.wizard-steps { display: flex; gap: .5rem; flex-wrap: wrap; }
.wizard-steps .step {
    flex: 1 1 0; min-width: 120px;
    text-align: center;
    padding: .6rem .4rem;
    border-radius: var(--radius-sm);
    background: #fff;
    border: 1px solid #e2efec;
    font-size: .82rem; font-weight: 600; color: #86a29d;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.wizard-steps .step:hover { border-color: var(--mint-primary); color: var(--mint-accent); }
.wizard-steps .step.active { background: var(--mint-primary); color: #fff; border-color: var(--mint-primary); }
.wizard-steps .step.done { background: var(--mint-secondary); color: var(--mint-accent); border-color: var(--mint-secondary); }
.wizard-progress { height: 8px; border-radius: 999px; background: #e2efec; overflow: hidden; }
.wizard-progress > span { display: block; height: 100%; background: var(--mint-primary); transition: width .3s ease; }

.fs-panel { display: none; }
.fs-panel.active { display: block; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Photo / signature editors */
.media-drop {
    border: 2px dashed #bfe2db;
    border-radius: var(--radius);
    background: #fff;
    padding: 1.2rem;
    text-align: center;
    transition: .2s;
}
.media-drop.dragover { border-color: var(--mint-primary); background: var(--mint-primary-soft); }
.media-preview {
    background:
        linear-gradient(45deg, #eef4f3 25%, transparent 25%),
        linear-gradient(-45deg, #eef4f3 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eef4f3 75%),
        linear-gradient(-45deg, transparent 75%, #eef4f3 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    border-radius: var(--radius-sm);
    min-height: 150px;
    display: grid; place-items: center;
}
.media-preview img { max-width: 100%; max-height: 260px; }

/* ============================================================
   Admin shell
   ============================================================ */
.admin-body { display: flex; min-height: 100vh; }
.admin-sidebar {
    width: 250px; flex-shrink: 0;
    background: var(--mint-dark);
    color: #cfe6e1;
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
}
.admin-sidebar .brand {
    padding: 1.15rem 1.25rem;
    font-weight: 800; color: #fff;
    display: flex; align-items: center; gap: .6rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.admin-sidebar .brand img { height: 30px; }
.admin-nav { padding: .75rem; overflow-y: auto; flex: 1; }
.admin-nav a {
    display: flex; align-items: center; gap: .7rem;
    padding: .65rem .8rem; margin-bottom: .15rem;
    border-radius: var(--radius-sm);
    color: #bcdcd6; text-decoration: none; font-weight: 600; font-size: .92rem;
}
.admin-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.admin-nav a.active { background: var(--mint-primary); color: #fff; }
.admin-nav .nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #7ba49d; padding: .8rem .8rem .3rem; }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar {
    background: #fff;
    box-shadow: var(--mint-shadow-sm);
    padding: .7rem 1.25rem;
    display: flex; align-items: center; gap: 1rem;
    position: sticky; top: 0; z-index: 20;
}
.admin-content { padding: 1.5rem; flex: 1; }
.breadcrumb { --bs-breadcrumb-divider: '›'; margin: 0; font-size: .85rem; }

.table-wrap { background: #fff; border-radius: var(--radius); box-shadow: var(--mint-shadow-sm); overflow: hidden; }
.table thead th { background: var(--mint-secondary); color: var(--mint-dark); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; border: 0; }
.table td { vertical-align: middle; }
.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link:hover { color: var(--mint-accent); }

.avatar-thumb {
    width: 40px; height: 40px; border-radius: 10px; object-fit: cover;
    background: var(--mint-secondary);
}

/* Sidebar toggle for mobile */
#sidebarToggle { display: none; }
@media (max-width: 992px) {
    .admin-sidebar {
        position: fixed; z-index: 1045; left: -260px; transition: left .25s ease;
    }
    .admin-sidebar.open { left: 0; }
    #sidebarToggle { display: inline-flex; }
    .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1044; display: none; }
    .sidebar-backdrop.show { display: block; }
}

/* Toast */
.toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 1080; display: flex; flex-direction: column; gap: .5rem; }
.app-toast {
    background: #fff; border-left: 5px solid var(--mint-primary);
    border-radius: var(--radius-sm); box-shadow: var(--mint-shadow);
    padding: .8rem 1rem; min-width: 260px; max-width: 360px;
    animation: fadeIn .2s ease;
}
.app-toast.success { border-left-color: #1c7a63; }
.app-toast.error { border-left-color: #dc3545; }
.app-toast.info { border-left-color: var(--mint-accent); }

/* Loading overlay */
.app-loading {
    position: fixed; inset: 0; background: rgba(247, 255, 253, .8);
    display: none; place-items: center; z-index: 1090;
}
.app-loading.show { display: grid; }
.app-spinner {
    width: 46px; height: 46px; border-radius: 50%;
    border: 5px solid var(--mint-secondary);
    border-top-color: var(--mint-primary);
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- ID / designer canvas ---- */
.designer-stage {
    position: relative;
    background: #fff repeating-conic-gradient(#eef4f3 0% 25%, #ffffff 0% 50%) 0 / 22px 22px;
    box-shadow: var(--mint-shadow);
    margin: 0 auto;
}
.designer-stage img.tpl-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; user-select: none; pointer-events: none; }
.dz-field {
    position: absolute;
    border: 1.5px dashed var(--mint-accent);
    background: rgba(94, 200, 182, .10);
    cursor: move;
    font-size: 12px;
    color: var(--mint-dark);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    user-select: none;
}
.dz-field.selected { border-style: solid; border-color: #dc3545; box-shadow: 0 0 0 2px rgba(220,53,69,.25); }
.dz-field .dz-handle {
    position: absolute; right: -6px; bottom: -6px;
    width: 14px; height: 14px; background: var(--mint-accent);
    border: 2px solid #fff; border-radius: 3px; cursor: se-resize;
}
.dz-field .dz-label { position: absolute; top: -18px; left: 0; font-size: 10px; background: var(--mint-accent); color: #fff; padding: 0 4px; border-radius: 3px; white-space: nowrap; }

/* Layers panel */
.layer-row { cursor: pointer; }
.layer-row:hover { background: var(--mint-bg); }
.layer-row.layer-selected { background: var(--mint-secondary); }
.layer-row .layer-btn { color: var(--mint-accent); line-height: 1; }
.layer-row .layer-btn:disabled { opacity: .3; }
.layer-row .badge { font-size: .65rem; min-width: 1.4em; }

.id-preview-card {
    border-radius: 12px;
    box-shadow: var(--mint-shadow);
    background: #fff;
}

@media print {
    .no-print { display: none !important; }
}