/* TIZI - Light Tech Theme */
:root {
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --accent: #06b6d4;
    --bg: #f8fafc;
    --card: #ffffff;
    --text: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;
}

* { box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

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

.page-skeleton { display: none; }
body.loading .page-skeleton { display: block; }
body.loading .page-content { visibility: hidden; height: 0; overflow: hidden; }

/* Fullscreen Loader */
#fullscreen-loader {
    position: fixed; inset: 0; z-index: 99999;
    background: linear-gradient(135deg, rgba(248,250,252,0.97) 0%, rgba(239,246,255,0.97) 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
#fullscreen-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-ring {
    width: 64px; height: 64px; position: relative;
}
.loader-ring::before, .loader-ring::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 3px solid transparent;
}
.loader-ring::before { border-top-color: var(--primary); border-right-color: var(--accent); animation: spin 1s linear infinite; }
.loader-ring::after { inset: 8px; border-bottom-color: var(--primary); border-left-color: var(--accent); animation: spin 0.8s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text { margin-top: 20px; color: var(--text-muted); font-size: 14px; letter-spacing: 2px; }
.loader-dots::after { content: ''; animation: dots 1.5s steps(4,end) infinite; }
@keyframes dots { 0%,20% { content: ''; } 40% { content: '.'; } 60% { content: '..'; } 80%,100% { content: '...'; } }

/* Toast Notifications */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 99998; display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.toast {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
    border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    animation: toast-in 0.35s cubic-bezier(0.21, 1.02, 0.73, 1);
    backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.8);
    transform-origin: top right;
}
@keyframes toast-in { from { opacity: 0; transform: translateX(100%) scale(0.8); } to { opacity: 1; transform: translateX(0) scale(1); } }
.toast.hiding { animation: toast-out 0.3s ease forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateX(100%) scale(0.8); } }
.toast-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.toast-message { font-size: 13px; opacity: 0.85; line-height: 1.4; }
.toast-close { flex-shrink: 0; cursor: pointer; opacity: 0.5; padding: 2px; border: none; background: none; }
.toast-close:hover { opacity: 1; }

.toast-style-minimal { background: rgba(255,255,255,0.95); color: var(--text); }
.toast-style-minimal .toast-icon { background: #f1f5f9; color: var(--text); }

.toast-style-card { background: #fff; color: var(--text); border-left: 4px solid; }
.toast-style-card.toast-success { border-left-color: var(--success); }
.toast-style-card.toast-error { border-left-color: var(--error); }
.toast-style-card.toast-warning { border-left-color: var(--warning); }
.toast-style-card.toast-info { border-left-color: var(--info); }

.toast-style-gradient { color: #fff; border: none; }
.toast-style-gradient.toast-success { background: linear-gradient(135deg, #10b981, #059669); }
.toast-style-gradient.toast-error { background: linear-gradient(135deg, #ef4444, #dc2626); }
.toast-style-gradient.toast-warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
.toast-style-gradient.toast-info { background: linear-gradient(135deg, #3b82f6, #06b6d4); }
.toast-style-gradient .toast-icon { background: rgba(255,255,255,0.2); color: #fff; }
.toast-style-gradient .toast-close { color: #fff; }

.toast-style-glass { background: rgba(255,255,255,0.7); backdrop-filter: blur(12px); color: var(--text); border: 1px solid rgba(255,255,255,0.5); }
.toast-style-glass .toast-icon { backdrop-filter: blur(4px); }

.toast-success .toast-icon { background: #d1fae5; color: #059669; }
.toast-error .toast-icon { background: #fee2e2; color: #dc2626; }
.toast-warning .toast-icon { background: #fef3c7; color: #d97706; }
.toast-info .toast-icon { background: #dbeafe; color: #2563eb; }

/* Admin Layout */
.admin-sidebar { width: 260px; background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); transition: width 0.3s; }
.admin-sidebar.collapsed { width: 72px; }
.admin-sidebar .menu-text { transition: opacity 0.2s; }
.admin-sidebar.collapsed .menu-text, .admin-sidebar.collapsed .menu-arrow { opacity: 0; width: 0; overflow: hidden; }
.menu-item { transition: all 0.2s; }
.menu-item.active { background: rgba(59,130,246,0.15); border-left: 3px solid #3b82f6; }
.submenu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.submenu.open { max-height: 500px; }
.submenu-item { padding-left: 48px; font-size: 13px; }

/* Form & Table */
.form-input { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; outline: none; transition: all 0.2s; background: #fff; }
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; }
.btn-primary:hover { box-shadow: 0 4px 15px rgba(59,130,246,0.4); transform: translateY(-1px); }
.btn-secondary { background: #f1f5f9; color: var(--text); }
.btn-danger { background: #fee2e2; color: #dc2626; }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }

.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table th { background: #f8fafc; padding: 12px 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
.data-table td { padding: 14px 16px; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.data-table tr:hover td { background: #f8fafc; }

.badge { display: inline-flex; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.badge-success { background: #d1fae5; color: #059669; }
.badge-danger { background: #fee2e2; color: #dc2626; }
.badge-warning { background: #fef3c7; color: #d97706; }

.card { background: var(--card); border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.04); width: 100%; max-width: 100%; }
.card-header { padding: 20px 24px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; }
.card-body { padding: 24px; }

.stat-card { padding: 24px; border-radius: 16px; background: #fff; border: 1px solid var(--border); position: relative; overflow: hidden; }
.stat-card::before { content: ''; position: absolute; top: 0; right: 0; width: 100px; height: 100px; background: linear-gradient(135deg, rgba(59,130,246,0.1), transparent); border-radius: 0 0 0 100%; }

/* Hide template markers until loaded */
[v-cloak], .x-cloak { display: none !important; }

/* Upload Widget */
.upload-widget { width: 100%; }
.upload-dropzone {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 14px;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 1.25rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    overflow: hidden;
}
.upload-dropzone::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(59,130,246,0.08), transparent 60%);
    pointer-events: none;
}
.upload-dropzone:hover,
.upload-dropzone:focus-visible {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.08);
    outline: none;
}
.upload-dropzone.is-dragover {
    border-color: #3b82f6;
    background: linear-gradient(145deg, #eff6ff 0%, #ecfeff 100%);
    box-shadow: 0 0 0 4px rgba(59,130,246,0.12);
}
.upload-dropzone.is-uploading { pointer-events: none; opacity: 0.85; }
.upload-dropzone.has-file { border-style: solid; border-color: #e2e8f0; background: #fff; }

.upload-empty { text-align: center; padding: 1rem 0.5rem; position: relative; z-index: 1; }
.upload-icon-wrap {
    width: 52px; height: 52px; margin: 0 auto 0.75rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #dbeafe, #cffafe);
    display: flex; align-items: center; justify-content: center;
    color: #2563eb;
}
.upload-icon { width: 26px; height: 26px; }
.upload-title { font-size: 0.95rem; font-weight: 600; color: #0f172a; margin-bottom: 0.25rem; }
.upload-subtitle { font-size: 0.875rem; color: #64748b; }
.upload-link { color: #2563eb; font-weight: 500; }
.upload-hint { font-size: 0.75rem; color: #94a3b8; margin-top: 0.5rem; }

.upload-preview { position: relative; z-index: 1; }
.upload-preview-img {
    display: block; max-width: 100%; max-height: 160px;
    margin: 0 auto; border-radius: 10px;
    object-fit: contain; background: #f8fafc;
}
.upload-file-card {
    display: flex; align-items: center; gap: 0.875rem;
    position: relative; z-index: 1;
}
.upload-file-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #cffafe);
    color: #2563eb;
    display: flex; align-items: center; justify-content: center;
}
.upload-file-icon svg { width: 22px; height: 22px; }
.upload-file-meta { flex: 1; min-width: 0; }
.upload-file-name { font-size: 0.9rem; font-weight: 600; color: #0f172a; word-break: break-all; }
.upload-file-path { font-size: 0.75rem; color: #94a3b8; margin-top: 0.15rem; word-break: break-all; }

.upload-preview-actions {
    display: flex; gap: 0.5rem; flex-shrink: 0;
    margin-top: 0.75rem; justify-content: flex-end;
}
.upload-file-card .upload-preview-actions { margin-top: 0; flex-direction: column; }
.upload-action-btn {
    padding: 0.35rem 0.75rem; font-size: 0.75rem; font-weight: 500;
    border-radius: 8px; border: 1px solid #e2e8f0; background: #fff;
    color: #475569; cursor: pointer; transition: all 0.15s;
}
.upload-action-btn:hover { border-color: #93c5fd; color: #2563eb; background: #f8fafc; }
.upload-action-danger:hover { border-color: #fecaca; color: #dc2626; background: #fef2f2; }

.upload-progress {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 4px; background: #e2e8f0; z-index: 2;
}
.upload-progress-bar {
    height: 100%; width: 0;
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
    transition: width 0.2s ease;
}
.upload-progress-text {
    position: absolute; right: 12px; bottom: 10px;
    font-size: 0.7rem; color: #64748b; z-index: 2;
}