/*
 * style.css — Admin Portal (mirrors admissions dashboard style)
 * All layout/spacing/color driven by Tailwind utility classes in app.js.
 * This file only contains things Tailwind v4 CDN cannot express:
 *   - @keyframes animations
 *   - ::before / ::after pseudo-elements
 *   - ::-webkit-scrollbar rules
 *   - input/select pseudo-class overrides (:focus, ::placeholder)
 *   - table hover row rules
 */

/* ── ANIMATIONS ─────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.97) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes slideInRight {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.login-card     { animation: fadeUp 0.4s ease-out; }
.modal-box      { animation: modalIn 0.22s ease-out; }
.animate-toast  { animation: slideInRight 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* ── STATUS BADGE DOT (::before pseudo) ─────────── */
.status-badge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.status-badge.pending::before  { background: #f59e0b; }
.status-badge.admitted::before { background: #10b981; }
.status-badge.rejected::before { background: #ef4444; }

/* ── INTERACTIVE TOOLTIP (::after pseudo) ───────── */
.chart-tooltip { position: relative; cursor: pointer; }
.chart-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 105%;
    left: 50%;
    transform: translate(-50%, -8px) scale(0.95);
    background: rgba(15, 23, 42, 0.95);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2), 0 4px 6px -2px rgba(0,0,0,0.1);
    z-index: 999;
}
.chart-tooltip:hover::after {
    opacity: 1;
    transform: translate(-50%, -4px) scale(1);
}

/* ── LOGIN HERO PANEL ─────────────────────────────── */
.login-left {
    flex: 1;
    display: none;
    position: relative;
    background-image: url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&q=80&w=2000');
    background-size: cover;
    background-position: center;
}
.login-left::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(6,78,59,0.85), rgba(4,57,43,0.9));
}
@media (min-width: 768px) { .login-left { display: block; } }

/* ── FORM INPUTS (:focus, ::placeholder) ─────────── */
.form-input {
    width: 100%;
    background: #f8fbff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px 14px;
    color: #1a2533;
    font-size: 0.9rem;
    transition: all 0.18s ease;
    font-family: 'Inter', sans-serif;
}
.form-input:focus {
    outline: none;
    border-color: #064e3b;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(6, 78, 59, 0.1);
}
.form-input::placeholder { color: #94a3b8; }

/* ── SEARCH BAR INPUT ────────────────────────────── */
.search-bar-input {
    width: 100%;
    background: #edf2f7;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 7px 12px 7px 32px;
    color: #1a2533;
    font-size: 0.82rem;
    transition: all 0.18s ease;
}
.search-bar-input:focus { outline: none; border-color: #064e3b; background: #fff; }
.search-bar-input::placeholder { color: #94a3b8; }

/* ── FILTER SELECT ───────────────────────────────── */
.filter-select {
    background: #edf2f7;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.78rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.18s ease;
}
.filter-select:focus { outline: none; border-color: #064e3b; }

/* ── TABLE ROW HOVER ─────────────────────────────── */
.custom-table tbody tr:hover td { background: #f8fbff; }
.custom-table tr:last-child td  { border-bottom: none; }

/* ── DASH BODY SCROLLBAR ─────────────────────────── */
.dash-body::-webkit-scrollbar       { width: 5px; }
.dash-body::-webkit-scrollbar-track { background: transparent; }
.dash-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 99px; }

/* ── SIDEBAR SCROLLBAR ───────────────────────────── */
.sidebar-scroll::-webkit-scrollbar       { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 99px; }

/* ── PROGRESS BAR SEGMENTS ───────────────────────── */
.prog-bar-segment { height: 100%; transition: width 0.3s ease; }
.prog-bar-segment.admitted { background: #059669; }
.prog-bar-segment.pending  { background: #d97706; }
.prog-bar-segment.rejected { background: #dc2626; }

/* ── MODAL OVERLAY ───────────────────────────────── */
.modal-overlay { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }

/* ── ACT BTN HOVER VARIANTS ──────────────────────── */
.act-btn:hover          { border-color: #64748b; color: #1a2533; }
.act-btn.admit:hover    { background: #f0fdf4; border-color: #10b981; color: #065f46; }
.act-btn.reject:hover   { background: #fef2f2; border-color: #ef4444; color: #991b1b; }
.act-btn.notice:hover   { background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; }

/* ── TRADITIONAL ACADEMIC PROFILE ESTHETICS (SHARP EDGES, FLAT LIGHT LAYOUTS) ── */
* {
    border-radius: 4px !important;
    box-shadow: none !important;
}

/* Base styles override */
body {
    background-color: #f1f5f9 !important;
}

.bg-white {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}

/* Crisp form controls */
input, select, textarea, .form-input, .filter-select {
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

input:focus, select:focus, textarea:focus, .form-input:focus, .filter-select:focus {
    border-color: #64748b !important;
    outline: none !important;
}

/* Crisp button structures */
button, .bg-[#064e3b], .bg-[#059669], .bg-emerald-600, .bg-[#4f46e5] {
    border-radius: 4px !important;
    box-shadow: none !important;
}

/* Edge-docked Chat/Support knobs -- the sharp-edges reset above (`* {
   border-radius: 4px !important }`) flattened these to a uniform 4px on
   every corner regardless of their rounded-*-xl/none classes, since a
   universal `*` selector still wins ties with equal-!important rules by
   specificity unless something more specific overrides it. These knobs are
   meant to look flush against the screen edge (only the outer corner
   rounded), so they're deliberately exempted here. */
.rounded-tl-xl { border-top-left-radius: 0.75rem !important; }
.rounded-bl-xl { border-bottom-left-radius: 0.75rem !important; }
.rounded-tr-none { border-top-right-radius: 0 !important; }
.rounded-tl-none { border-top-left-radius: 0 !important; }
.rounded-bl-none { border-bottom-left-radius: 0 !important; }
.rounded-br-none { border-bottom-right-radius: 0 !important; }
.rounded-none { border-radius: 0 !important; }

/* Classic Structured Tables */
.custom-table {
    border: 1px solid #cbd5e1 !important;
    border-collapse: collapse !important;
}

.custom-table th {
    background-color: #f8fafc !important;
    color: #475569 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid #cbd5e1 !important;
    border-right: 1px solid #e2e8f0 !important;
}

.custom-table td {
    border-bottom: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
}

.custom-table tbody tr:hover td {
    background-color: #f8fafc !important;
}

/* Toast message customization */
.animate-toast {
    border-radius: 4px !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
}

/* Smooth Folder Tree Sub-directory Transitions */
.folder-subtree {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease-out;
}
.folder-subtree.expanded {
    max-height: 600px;
    opacity: 1;
}

/* Smooth Registry Navigation Tree Sidebar Transitions */
.registry-sidebar {
    width: 240px;
    opacity: 1;
    overflow-y: auto;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease-out;
}
.registry-sidebar.collapsed {
    width: 0 !important;
    opacity: 0 !important;
    border-right: 0px !important;
}