/* ═══════════════════════════════════════════════════
   AKREMP – Akreditasi Management System Styles
   ═══════════════════════════════════════════════════ */

:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --accent: #8b5cf6;
    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;
}

* { box-sizing: border-box; scroll-behavior: smooth; }

/* ─── Glass Card ──────────────────────────────────── */
.glass-card {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
}

.glass-card-light {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.3);
}

/* ─── Login Background Shapes ─────────────────────── */
.login-bg-shapes { position:fixed;inset:0;overflow:hidden;z-index:0; }
.shape {
    position:absolute;border-radius:50%;
    background:linear-gradient(135deg,rgba(99,102,241,0.3),rgba(139,92,246,0.2));
    filter:blur(80px);animation:float 20s infinite ease-in-out;
}
.shape-1 { width:500px;height:500px;top:-10%;left:-10%;animation-delay:0s; }
.shape-2 { width:400px;height:400px;bottom:-5%;right:-5%;animation-delay:-5s; }
.shape-3 { width:300px;height:300px;top:50%;left:50%;animation-delay:-10s; }
.shape-4 { width:200px;height:200px;top:20%;right:20%;animation-delay:-15s;background:linear-gradient(135deg,rgba(236,72,153,0.2),rgba(99,102,241,0.2)); }

@keyframes float {
    0%,100% { transform:translate(0,0) scale(1); }
    25% { transform:translate(30px,-40px) scale(1.1); }
    50% { transform:translate(-20px,30px) scale(0.95); }
    75% { transform:translate(40px,20px) scale(1.05); }
}

/* ─── 3D Logo ─────────────────────────────────────── */
.logo-3d {
    transform-style:preserve-3d;perspective:500px;
    box-shadow:0 20px 60px -15px rgba(99,102,241,0.4),
               0 0 0 1px rgba(99,102,241,0.1),
               inset 0 1px 0 rgba(255,255,255,0.1);
}
.logo-3d:hover { transform:rotateY(10deg) rotateX(-5deg) scale(1.05); }

/* ─── Animations ──────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity:0;transform:translateY(30px); }
    to { opacity:1;transform:translateY(0); }
}
@keyframes fadeInDown {
    from { opacity:0;transform:translateY(-20px); }
    to { opacity:1;transform:translateY(0); }
}
@keyframes fadeIn {
    from { opacity:0; }
    to { opacity:1; }
}
@keyframes fadeOut {
    from { opacity:1;transform:scale(1); }
    to { opacity:0;transform:scale(0.95); }
}
@keyframes slideInRight {
    from { opacity:0;transform:translateX(30px); }
    to { opacity:1;transform:translateX(0); }
}
@keyframes slideOutRight {
    from { opacity:1;transform:translateX(0); }
    to { opacity:0;transform:translateX(100px); }
}
@keyframes shake {
    0%,100% { transform:translateX(0); }
    20%,60% { transform:translateX(-6px); }
    40%,80% { transform:translateX(6px); }
}
@keyframes rowHighlight {
    0% { background:rgba(99,102,241,0.15);transform:scale(1.01); }
    100% { background:transparent;transform:scale(1); }
}
@keyframes deleteSlide {
    0% { opacity:1;transform:translateX(0) scaleY(1);max-height:200px; }
    50% { opacity:0.3;transform:translateX(60px) scaleY(0.8); }
    100% { opacity:0;transform:translateX(120px) scaleY(0);max-height:0;padding:0;margin:0;border:none; }
}
@keyframes pulse-ring {
    0% { transform:scale(0.8);opacity:0.5; }
    50% { transform:scale(1.2);opacity:0; }
    100% { transform:scale(0.8);opacity:0; }
}
@keyframes spin3d {
    from { transform:rotateY(0deg); }
    to { transform:rotateY(360deg); }
}
@keyframes marquee {
    0% { transform:translateX(0); }
    100% { transform:translateX(-50%); }
}

.animate-fadeInUp { animation:fadeInUp 0.6s ease-out both; }
.animate-fadeInDown { animation:fadeInDown 0.5s ease-out both; }
.animate-fadeIn { animation:fadeIn 0.4s ease-out both; }
.animate-slideInRight { animation:slideInRight 0.5s ease-out both; }
.animate-shake { animation:shake 0.5s ease-out; }
.animate-rowHighlight { animation:rowHighlight 2s ease-out both; }
.animate-deleteSlide { animation:deleteSlide 0.6s ease-out forwards; }
.animate-marquee { animation:marquee 30s linear infinite; }

.delay-100 { animation-delay:0.1s; }
.delay-200 { animation-delay:0.2s; }
.delay-300 { animation-delay:0.3s; }
.delay-400 { animation-delay:0.4s; }

/* ─── Toast ───────────────────────────────────────── */
#toast-container {
    position:fixed;top:24px;right:24px;z-index:99999;
    display:flex;flex-direction:column;gap:12px;pointer-events:none;
}
.toast {
    pointer-events:auto;min-width:320px;max-width:420px;
    padding:16px 20px;border-radius:16px;
    color:#fff;font-size:14px;font-weight:500;
    display:flex;align-items:center;gap:12px;
    box-shadow:0 20px 40px rgba(0,0,0,0.15);
    animation:slideInRight 0.4s ease-out both;
    backdrop-filter:blur(10px);
}
.toast.success { background:linear-gradient(135deg,#22c55e,#16a34a); }
.toast.error { background:linear-gradient(135deg,#ef4444,#dc2626); }
.toast.warning { background:linear-gradient(135deg,#f59e0b,#d97706); }
.toast.hiding { animation:slideOutRight 0.4s ease-in forwards; }

/* ─── Modal ───────────────────────────────────────── */
.modal-overlay {
    position:fixed;inset:0;z-index:99990;
    background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    animation:fadeIn 0.25s ease-out;
    padding:20px;
}
.modal-overlay.hiding { animation:fadeOut 0.25s ease-in forwards; }
.modal-content {
    background:white;border-radius:20px;
    box-shadow:0 25px 80px rgba(0,0,0,0.15);
    max-width:700px;width:100%;max-height:90vh;
    overflow-y:auto;animation:fadeInUp 0.35s ease-out;
    overscroll-behavior:contain;
}
.modal-content.hiding { animation:fadeOut 0.25s ease-in forwards; }

/* ─── Row Hover Elevation ─────────────────────────── */
.table-row-hover {
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.table-row-hover:hover {
    background:rgba(99,102,241,0.04) !important;
    box-shadow:0 4px 20px rgba(99,102,241,0.08);
    transform:translateY(-1px);
}

/* ─── Sidebar ─────────────────────────────────────── */
.sidebar {
    transition:transform 0.4s cubic-bezier(0.4,0,0.2,1),
               width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.sidebar.collapsed { transform:translateX(-100%); }
@media (max-width:1024px) {
    .sidebar { position:fixed;z-index:9999;transform:translateX(-100%); }
    .sidebar.mobile-open { transform:translateX(0); }
}

/* ─── Stat Cards 3D ───────────────────────────────── */
.stat-card {
    transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
    transform-style:preserve-3d;perspective:800px;
}
.stat-card:hover {
    transform:translateY(-6px) rotateX(2deg);
    box-shadow:0 20px 40px rgba(0,0,0,0.08);
}
.stat-card .stat-icon {
    transition:transform 0.5s ease;
}
.stat-card:hover .stat-icon {
    transform:rotateY(180deg);
}

/* ─── Parallax ────────────────────────────────────── */
.parallax-bg {
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
}

/* ─── Infinite Scroll Ticker ──────────────────────── */
.ticker-wrap {
    overflow:hidden;white-space:nowrap;
}
.ticker {
    display:inline-flex;gap:40px;
    animation:marquee 30s linear infinite;
}
.ticker:hover { animation-play-state:paused; }

/* ─── 3D Element Styles ──────────────────────────── */
.element-3d {
    transform-style:preserve-3d;perspective:600px;
    transition:transform 0.5s ease;
}
.element-3d:hover { transform:rotateY(5deg) rotateX(-3deg); }

.avatar-3d {
    width:48px;height:48px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:18px;color:white;
    transform-style:preserve-3d;
    transition:transform 0.4s ease;
    box-shadow:0 8px 24px rgba(0,0,0,0.12);
}
.avatar-3d:hover { transform:rotateY(15deg) scale(1.05); }

/* ─── Smart Filter Chips ──────────────────────────── */
.filter-chip {
    padding:8px 18px;border-radius:100px;font-size:13px;font-weight:500;
    border:1.5px solid #e2e8f0;color:#64748b;
    transition:all 0.3s ease;cursor:pointer;
    user-select:none;
}
.filter-chip:hover { border-color:#6366f1;color:#6366f1;transform:translateY(-1px); }
.filter-chip.active {
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    color:white;border-color:transparent;
    box-shadow:0 4px 12px rgba(99,102,241,0.3);
}

/* ─── Calendar Matrix ─────────────────────────────── */
.calendar-cell {
    width:14px;height:14px;border-radius:3px;
    transition:all 0.2s ease;
}
.calendar-cell:hover { transform:scale(1.8);z-index:10; }
.cal-0 { background:#f1f5f9; }
.cal-1 { background:#c7d2fe; }
.cal-2 { background:#818cf8; }
.cal-3 { background:#6366f1; }
.cal-4 { background:#4338ca; }

/* ─── Progress Bar ────────────────────────────────── */
.progress-bar {
    height:8px;border-radius:100px;overflow:hidden;
    background:#e2e8f0;
}
.progress-fill {
    height:100%;border-radius:100px;
    background:linear-gradient(90deg,#6366f1,#8b5cf6);
    transition:width 1s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Button Active States ────────────────────────── */
.btn-primary {
    background:linear-gradient(135deg,#6366f1,#7c3aed);color:white;
    border-radius:12px;padding:10px 20px;font-weight:600;font-size:14px;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow:0 4px 14px rgba(99,102,241,0.25);
}
.btn-primary:hover {
    box-shadow:0 8px 25px rgba(99,102,241,0.4);
    transform:translateY(-2px);
}
.btn-primary:active { transform:translateY(0) scale(0.97); }

.btn-danger {
    background:linear-gradient(135deg,#ef4444,#dc2626);color:white;
    border-radius:12px;padding:10px 20px;font-weight:600;font-size:14px;
    transition:all 0.3s ease;
    box-shadow:0 4px 14px rgba(239,68,68,0.25);
}
.btn-danger:hover { box-shadow:0 8px 25px rgba(239,68,68,0.4);transform:translateY(-2px); }
.btn-danger:active { transform:translateY(0) scale(0.97); }

.btn-ghost {
    background:transparent;color:#64748b;border:1.5px solid #e2e8f0;
    border-radius:12px;padding:10px 20px;font-weight:500;font-size:14px;
    transition:all 0.3s ease;
}
.btn-ghost:hover { border-color:#6366f1;color:#6366f1;background:rgba(99,102,241,0.04); }

/* ─── Toggle Switch ───────────────────────────────── */
.toggle-switch {
    width:48px;height:26px;border-radius:100px;
    background:#cbd5e1;position:relative;cursor:pointer;
    transition:background 0.3s ease;
}
.toggle-switch.active { background:#6366f1; }
.toggle-switch::after {
    content:'';position:absolute;top:3px;left:3px;
    width:20px;height:20px;border-radius:50%;
    background:white;transition:transform 0.3s ease;
    box-shadow:0 2px 6px rgba(0,0,0,0.15);
}
.toggle-switch.active::after { transform:translateX(22px); }

/* ─── Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar { width:6px;height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#c7d2fe;border-radius:100px; }
::-webkit-scrollbar-thumb:hover { background:#818cf8; }

/* ─── Loading Skeleton ────────────────────────────── */
@keyframes shimmer {
    0% { background-position:-200% 0; }
    100% { background-position:200% 0; }
}
.skeleton {
    background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);
    background-size:200% 100%;
    animation:shimmer 1.5s infinite;
    border-radius:8px;
}

/* ─── Masonry Grid ────────────────────────────────── */
.masonry-grid {
    display:grid;gap:20px;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    grid-auto-rows:auto;
}

/* ─── Public Page ─────────────────────────────────── */
.hero-gradient {
    background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#312e81 100%);
}

.public-table th {
    background:linear-gradient(135deg,#f8fafc,#f1f5f9);
    font-weight:600;font-size:12px;text-transform:uppercase;
    letter-spacing:0.05em;color:#475569;
    padding:14px 16px;position:sticky;top:0;z-index:10;
}
.public-table td {
    padding:14px 16px;font-size:13px;color:#334155;
    border-bottom:1px solid #f1f5f9;
    transition:all 0.2s ease;
}
.public-table tbody tr { transition:all 0.3s ease; }
.public-table tbody tr:hover {
    background:linear-gradient(90deg,rgba(99,102,241,0.03),rgba(139,92,246,0.03));
}

/* ─── Checkbox Animation ──────────────────────────── */
.check-btn {
    width:36px;height:36px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all 0.3s ease;
    border:2px solid #e2e8f0;
}
.check-btn:hover { transform:scale(1.1); }
.check-btn.checked {
    background:linear-gradient(135deg,#22c55e,#16a34a);
    border-color:transparent;color:white;
    box-shadow:0 4px 12px rgba(34,197,94,0.3);
}
.check-btn.unchecked {
    background:white;color:#cbd5e1;
}
.check-btn.unchecked:hover {
    border-color:#22c55e;color:#22c55e;
}

/* ─── Responsive ──────────────────────────────────── */
@media (max-width:768px) {
    .modal-content { margin:10px;max-height:95vh; }
    .masonry-grid { grid-template-columns:1fr; }
    #toast-container { left:12px;right:12px;top:12px; }
    .toast { min-width:auto;width:100%; }
}