/*
Theme Name: FIM Dealer Portal
Description: Portale dealer FIM v2
Author: WN SA / Made Unreal
Version: 2.0
*/

:root {
    --bg: #f3efe9; --bg-card: #ffffff; --bg-sidebar: #faf8f5; --bg-nav: #1a1815;
    --border: rgba(196,180,158,0.15); --border-hover: rgba(184,155,94,0.3);
    --gold: #B89B5E; --gold-dark: #9a8248;
    --text-1: #1a1815; --text-2: #5c574e; --text-3: #8a8479;
    --danger: #c0392b; --success: #27ae60;
}

[data-theme="dark"], .fim-dark {
    --bg: #141210; --bg-card: #1e1c18; --bg-sidebar: #191714; --bg-nav: #0a0908;
    --border: rgba(196,180,158,0.08); --border-hover: rgba(184,155,94,0.2);
    --text-1: #f0ebe4; --text-2: #a8a29e; --text-3: #6b6560;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text-1); -webkit-font-smoothing:antialiased; min-height:100vh; }
a { color:var(--gold-dark); text-decoration:none; transition:color .3s; }
a:hover { color:var(--text-1); }

/* ═══ NAV ═══ */
.fim-nav { background:var(--bg-nav); height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 1.5rem; position:sticky; top:0; z-index:100; }
.fim-nav-left { display:flex; align-items:center; gap:1.5rem; }
.fim-nav-brand { font-size:.8rem; font-weight:600; color:#f0ebe4; letter-spacing:.02em; }
.fim-nav-brand span { font-weight:300; opacity:.5; }
.fim-nav-tabs { display:flex; gap:.2rem; }
.fim-nav-tab { font-size:.65rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:#8a8479; padding:8px 16px; border-radius:3px; cursor:pointer; transition:all .2s; }
.fim-nav-tab:hover { color:#f0ebe4; }
.fim-nav-tab.active { background:rgba(255,255,255,.08); color:#f0ebe4; }
.fim-nav-right { display:flex; align-items:center; gap:1rem; }
.fim-nav-user { display:flex; align-items:center; gap:.6rem; }
.fim-nav-avatar { width:32px; height:32px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; font-size:.55rem; font-weight:600; color:#fff; }
.fim-nav-name { font-size:.72rem; color:#c4b49e; }
.fim-nav-logout { font-size:.55rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:#6b6560; padding:5px 12px; border:1px solid rgba(196,180,158,.15); border-radius:2px; transition:all .3s; }
.fim-nav-logout:hover { color:#f0ebe4; border-color:var(--gold); }

/* ═══ LAYOUT ═══ */
.fim-layout { display:flex; min-height:calc(100vh - 56px); }
.fim-sidebar { width:240px; background:var(--bg-sidebar); border-right:1px solid var(--border); padding:1.5rem 0; flex-shrink:0; overflow-y:auto; }
.fim-main { flex:1; padding:2rem 2.5rem; overflow-y:auto; }

/* Sidebar */
.fim-sb-section { margin-bottom:1.5rem; padding:0 1.2rem; }
.fim-sb-title { font-size:.5rem; font-weight:600; letter-spacing:.25em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:.8rem; opacity:.6; }
.fim-sb-item { display:flex; align-items:center; gap:.5rem; padding:.5rem .7rem; font-size:.78rem; font-weight:400; color:var(--text-2); border-radius:3px; cursor:pointer; transition:all .2s; margin-bottom:1px; }
.fim-sb-item:hover { background:var(--bg); color:var(--text-1); }
.fim-sb-item.active { background:rgba(184,155,94,.06); color:var(--gold-dark); font-weight:500; }
.fim-sb-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.fim-sb-count { margin-left:auto; font-size:.6rem; font-weight:400; color:var(--text-3); background:var(--bg); padding:1px 8px; border-radius:10px; }

/* ═══ HEADER ═══ */
.fim-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:1rem; }
.fim-hdr-title { font-size:1.15rem; font-weight:500; }
.fim-hdr-sub { font-size:.72rem; font-weight:300; color:var(--text-3); margin-top:.2rem; }
.fim-hdr-actions { display:flex; align-items:center; gap:.6rem; }

/* Search */
.fim-search { position:relative; }
.fim-search input { width:240px; padding:8px 14px 8px 32px; font-family:'Inter',sans-serif; font-size:.75rem; font-weight:300; color:var(--text-1); background:var(--bg-card); border:1px solid var(--border); border-radius:3px; outline:none; }
.fim-search input:focus { border-color:var(--gold); }
.fim-search::before { content:'⌕'; position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:.85rem; color:var(--text-3); }

/* View toggle */
.fim-view-toggle { display:flex; border:1px solid var(--border); border-radius:3px; overflow:hidden; }
.fim-view-btn { padding:6px 10px; cursor:pointer; font-size:.75rem; color:var(--text-3); background:var(--bg-card); transition:all .2s; border:none; }
.fim-view-btn.active { background:var(--bg); color:var(--text-1); }

/* Dark mode toggle */
.fim-dark-toggle { padding:6px 10px; cursor:pointer; font-size:.75rem; background:var(--bg-card); border:1px solid var(--border); border-radius:3px; color:var(--text-3); }

/* ═══ FOLDERS ═══ */
.fim-folders { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.fim-folder { background:var(--bg-card); border:1px solid var(--border); border-radius:3px; padding:1rem 1.2rem; cursor:pointer; transition:all .3s; display:flex; align-items:center; gap:.8rem; }
.fim-folder:hover { border-color:var(--border-hover); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.04); }
.fim-folder.exclusive { border-left:3px solid var(--gold); background:rgba(184,155,94,.03); }
.fim-folder-icon { font-size:1.4rem; }
.fim-folder-name { font-size:.8rem; font-weight:500; color:var(--text-1); }
.fim-folder-count { font-size:.65rem; font-weight:300; color:var(--text-3); }

/* ═══ FILE LIST VIEW ═══ */
.fim-file-list { background:var(--bg-card); border:1px solid var(--border); border-radius:3px; overflow:hidden; }
.fim-file-row { display:flex; align-items:center; padding:.75rem 1rem; border-bottom:1px solid var(--border); transition:background .2s; gap:1rem; text-decoration:none; color:inherit; }
.fim-file-row:last-child { border-bottom:none; }
.fim-file-row:hover { background:rgba(184,155,94,.02); }
.fim-file-row-icon { width:36px; height:36px; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:.5rem; font-weight:700; color:#fff; flex-shrink:0; }
.fim-file-row-icon img { width:36px; height:36px; object-fit:cover; border-radius:3px; }
.fim-file-row-info { flex:1; min-width:0; }
.fim-file-row-name { font-size:.82rem; font-weight:500; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fim-file-row-meta { font-size:.65rem; font-weight:300; color:var(--text-3); }
.fim-file-row-badge { font-size:.5rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:2px; }
.fim-file-row-badge.new { color:#27ae60; background:rgba(39,174,96,.08); }
.fim-file-row-badge.exclusive { color:var(--gold-dark); background:rgba(184,155,94,.08); }
.fim-file-row-date { font-size:.7rem; color:var(--text-3); width:90px; text-align:right; flex-shrink:0; }
.fim-file-row-size { font-size:.7rem; color:var(--text-3); width:70px; text-align:right; flex-shrink:0; }
.fim-file-row-dl { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--bg); color:var(--text-3); font-size:.7rem; flex-shrink:0; transition:all .2s; }
.fim-file-row:hover .fim-file-row-dl { background:var(--gold); color:#fff; }

/* ═══ FILE GRID VIEW ═══ */
.fim-file-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; }
.fim-file-card { background:var(--bg-card); border:1px solid var(--border); border-radius:3px; overflow:hidden; transition:all .3s; text-decoration:none; color:inherit; display:block; }
.fim-file-card:hover { border-color:var(--border-hover); box-shadow:0 4px 16px rgba(0,0,0,.04); transform:translateY(-2px); }
.fim-file-card-preview { width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--bg); display:flex; align-items:center; justify-content:center; }
.fim-file-card-preview img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.fim-file-card:hover .fim-file-card-preview img { transform:scale(1.04); }
.fim-file-card-icon { font-size:.6rem; font-weight:700; color:#fff; width:48px; height:48px; border-radius:3px; display:flex; align-items:center; justify-content:center; }
.fim-file-card-body { padding:1rem; }
.fim-file-card-name { font-size:.8rem; font-weight:500; color:var(--text-1); margin-bottom:.3rem; line-height:1.3; }
.fim-file-card-meta { font-size:.6rem; font-weight:300; color:var(--text-3); margin-bottom:.4rem; }
.fim-file-card-badge { font-size:.45rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:2px 8px; border-radius:2px; display:inline-block; }
.fim-file-card-badge.shared { color:var(--gold-dark); background:rgba(184,155,94,.08); }
.fim-file-card-badge.exclusive { color:var(--text-2); background:rgba(196,180,158,.1); }

/* ═══ SECTION LABEL ═══ */
.fim-section-label { font-size:.5rem; font-weight:600; letter-spacing:.25em; text-transform:uppercase; color:var(--text-3); margin-bottom:.8rem; }

/* ═══ PROFILE ═══ */
.fim-profile { background:var(--bg-card); border:1px solid var(--border); border-radius:3px; padding:1.5rem; margin-bottom:1.5rem; }
.fim-profile-row { display:flex; gap:2rem; flex-wrap:wrap; }
.fim-profile-field { flex:1; min-width:140px; }
.fim-profile-label { font-size:.5rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--text-3); margin-bottom:.3rem; }
.fim-profile-value { font-size:.85rem; font-weight:400; color:var(--text-1); }

/* ═══ STATS ═══ */
.fim-stats { display:flex; gap:1rem; margin-bottom:1.5rem; }
.fim-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:3px; padding:1.2rem 1.5rem; flex:1; }
.fim-stat-label { font-size:.5rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--text-3); margin-bottom:.3rem; }
.fim-stat-num { font-size:1.8rem; font-weight:300; color:var(--text-1); }
.fim-stat-sub { font-size:.6rem; font-weight:300; color:var(--text-3); }

/* ═══ ADMIN TABLE ═══ */
.fim-table { width:100%; border-collapse:collapse; background:var(--bg-card); border:1px solid var(--border); border-radius:3px; overflow:hidden; }
.fim-table th { font-size:.55rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); padding:10px 14px; text-align:left; background:var(--bg-sidebar); border-bottom:1px solid var(--border); }
.fim-table td { font-size:.78rem; font-weight:300; color:var(--text-2); padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.fim-table tr:last-child td { border-bottom:none; }
.fim-table tr:hover td { background:rgba(184,155,94,.02); }

/* ═══ BUTTONS ═══ */
.btn { display:inline-flex; align-items:center; gap:.4rem; font-family:'Inter'; font-size:.6rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; padding:9px 18px; border-radius:2px; cursor:pointer; transition:all .3s; border:1px solid transparent; text-decoration:none; }
.btn.primary { color:#fff; background:var(--gold); border-color:var(--gold); }
.btn.primary:hover { background:var(--gold-dark); border-color:var(--gold-dark); color:#fff; }
.btn.ghost { color:var(--text-2); background:transparent; border-color:var(--border); }
.btn.ghost:hover { border-color:var(--gold); color:var(--gold-dark); }
.btn.dark { color:#fff; background:var(--bg-nav); border-color:var(--bg-nav); }
.btn.dark:hover { opacity:.8; color:#fff; }
.btn.sm { font-size:.5rem; padding:5px 12px; }
.btn.danger { color:var(--danger); border-color:rgba(192,57,43,.2); }
.btn.danger:hover { background:rgba(192,57,43,.05); }

/* ═══ BADGE ═══ */
.badge { font-size:.5rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:2px; display:inline-block; }
.badge.shared { color:var(--gold-dark); background:rgba(184,155,94,.08); }
.badge.exclusive { color:var(--text-2); background:rgba(196,180,158,.1); }
.badge.active { color:var(--success); background:rgba(39,174,96,.08); }
.badge.inactive { color:var(--danger); background:rgba(192,57,43,.08); }

/* ═══ FORM ═══ */
.fim-form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:1rem; }
.fim-form-field { }
.fim-form-field.full { grid-column:1/-1; }
.fim-form-field label { display:block; font-size:.5rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-bottom:.3rem; }
.fim-form-field input, .fim-form-field select, .fim-form-field textarea { width:100%; padding:10px 14px; font-family:'Inter'; font-size:.8rem; font-weight:300; color:var(--text-1); background:var(--bg-sidebar); border:1px solid var(--border); border-radius:2px; outline:none; }
.fim-form-field input:focus, .fim-form-field select:focus, .fim-form-field textarea:focus { border-color:var(--gold); }

/* ═══ PANEL ═══ */
.fim-panel { background:var(--bg-card); border:1px solid var(--border); border-radius:3px; padding:1.5rem; margin-bottom:1.5rem; }
.fim-panel h2 { font-size:.95rem; font-weight:500; margin-bottom:.3rem; }
.fim-panel-sub { font-size:.72rem; font-weight:300; color:var(--text-3); margin-bottom:1.2rem; }

/* ═══ DROPZONE ═══ */
.fim-dropzone { border:2px dashed var(--border); border-radius:3px; padding:3rem; text-align:center; background:var(--bg-sidebar); transition:all .3s; cursor:pointer; margin-bottom:1.5rem; }
.fim-dropzone.dragover { border-color:var(--gold); background:rgba(184,155,94,.03); }
.fim-dropzone-icon { font-size:2.5rem; margin-bottom:.8rem; opacity:.25; }
.fim-dropzone-text { font-size:.85rem; color:var(--text-2); margin-bottom:.3rem; }
.fim-dropzone-sub { font-size:.7rem; color:var(--text-3); margin-bottom:1rem; }
.fim-upload-item { display:flex; align-items:center; gap:.8rem; padding:.6rem .8rem; background:var(--bg-card); border:1px solid var(--border); border-radius:3px; margin-bottom:.4rem; font-size:.78rem; }
.fim-upload-item-icon { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:3px; font-size:.45rem; font-weight:700; color:#fff; flex-shrink:0; }
.fim-upload-item-name { flex:1; font-weight:400; }
.fim-upload-item-size { font-size:.65rem; color:var(--text-3); }
.fim-upload-item-status { font-size:.55rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase; }
.fim-upload-item-status.pending { color:var(--text-3); }
.fim-upload-item-status.uploading { color:var(--gold); }
.fim-upload-item-status.done { color:var(--success); }
.fim-upload-item-status.error { color:var(--danger); }
.fim-progress-bar { width:100%; height:3px; background:var(--border); border-radius:2px; overflow:hidden; margin-bottom:.4rem; }
.fim-progress-fill { height:100%; background:var(--gold); width:0%; transition:width .3s; }

/* ═══ LOGIN ═══ */
.fim-login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:2rem; }
.fim-login-box { width:100%; max-width:380px; background:var(--bg-card); padding:2.5rem 2rem; border-radius:3px; border:1px solid var(--border); text-align:center; }
.fim-login-box h1 { font-size:1.2rem; font-weight:500; margin-bottom:.3rem; }
.fim-login-box .subtitle { font-size:.75rem; font-weight:300; color:var(--text-3); margin-bottom:1.5rem; }
.fim-login-form label { display:block; text-align:left; font-size:.55rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-bottom:.3rem; }
.fim-login-form input { width:100%; padding:12px 14px; font-family:'Inter'; font-size:.82rem; font-weight:300; color:var(--text-1); background:var(--bg-sidebar); border:1px solid var(--border); border-radius:2px; outline:none; margin-bottom:1rem; }
.fim-login-form input:focus { border-color:var(--gold); }
.fim-login-form .btn-login { width:100%; padding:12px; font-family:'Inter'; font-size:.6rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:#fff; background:var(--gold); border:1px solid var(--gold); border-radius:2px; cursor:pointer; }
.fim-login-form .btn-login:hover { background:var(--gold-dark); }
.fim-login-error { background:rgba(192,57,43,.06); color:var(--danger); font-size:.72rem; padding:8px; border-radius:2px; margin-bottom:1rem; }

/* ═══ COLORS ═══ */
.fim-color-picker { display:flex; gap:.5rem; flex-wrap:wrap; }
.fim-color-dot { width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:all .2s; }
.fim-color-dot:hover, .fim-color-dot.active { border-color:var(--text-1); transform:scale(1.15); }

/* ═══ EMPTY ═══ */
.fim-empty { text-align:center; padding:3rem; color:var(--text-3); }

.avatar-sm { display:inline-flex; width:28px; height:28px; border-radius:50%; background:var(--gold); color:#fff; align-items:center; justify-content:center; font-size:.5rem; font-weight:600; vertical-align:middle; }
.fim-empty-icon { font-size:2.5rem; opacity:.15; margin-bottom:.8rem; }
.fim-empty-text { font-size:.82rem; font-weight:300; }

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px) {
    .fim-layout { flex-direction:column; }
    .fim-sidebar { width:100%; border-right:none; border-bottom:1px solid var(--border); padding:.8rem 0; }
    .fim-main { padding:1.2rem; }
    .fim-stats { flex-wrap:wrap; }
    .fim-stat { min-width:calc(50% - .5rem); }
    .fim-nav-tabs { display:none; }
    .fim-folders { grid-template-columns:repeat(2,1fr); }
    .fim-form-grid { grid-template-columns:1fr; }
}
@media(max-width:600px) {
    .fim-file-grid { grid-template-columns:1fr; }
    .fim-folders { grid-template-columns:1fr; }
    .fim-file-row-date, .fim-file-row-size { display:none; }
}

/* ═══ FILE MANAGER ═══ */
.fim-fm-folder { display:flex; align-items:center; gap:.5rem; padding:8px 10px; border-radius:3px; cursor:pointer; transition:all .2s; font-size:.78rem; color:var(--text-2); margin-bottom:2px; border:2px solid transparent; }
.fim-fm-folder:hover { background:var(--bg); color:var(--text-1); }
.fim-fm-folder.active { background:rgba(184,155,94,.06); color:var(--gold-dark); font-weight:500; }
.fim-fm-folder.drag-over { border-color:var(--gold); background:rgba(184,155,94,.08); }
.fim-fm-folder-icon { font-size:1rem; flex-shrink:0; }
.fim-fm-folder-name { flex:1; }
.fim-fm-folder-count { font-size:.6rem; color:var(--text-3); }
.fim-fm-child { padding-left:20px; }
.fim-fm-grandchild { padding-left:40px; }
.fim-fm-drop-folder.drag-over { border-color:var(--gold) !important; background:rgba(184,155,94,.08) !important; color:var(--gold-dark) !important; }
.fim-fm-file { display:flex; align-items:center; gap:.8rem; padding:8px 10px; border:1px solid var(--border); border-radius:3px; margin-bottom:4px; cursor:grab; transition:all .2s; background:var(--bg-card); }
.fim-fm-file:hover { border-color:var(--border-hover); }
.fim-fm-file.dragging { opacity:.4; }
.fim-fm-folder.dragging { opacity:.4; border-style:dashed; }
.fim-fm-file.selected { border-color:var(--gold); background:rgba(184,155,94,.03); }
.fim-fm-file-icon { width:32px; height:32px; border-radius:3px; overflow:hidden; flex-shrink:0; }
.fim-fm-file-icon img { width:100%; height:100%; object-fit:cover; }
.fim-fm-file-name { flex:1; font-size:.8rem; font-weight:400; }
.fim-fm-file-meta { font-size:.6rem; color:var(--text-3); }
.fim-fm-file-check { width:16px; height:16px; cursor:pointer; }

/* ═══ UPLOAD PROGRESS BAR PER-FILE ═══ */
.fim-upload-item-bar { flex-basis:100%; height:4px; background:var(--border); border-radius:2px; margin-top:6px; overflow:hidden; }
.fim-upload-item-bar-fill { height:100%; width:0; background:var(--gold); transition:width .3s ease; }
.fim-upload-item { flex-wrap:wrap; }