/* ======================================================
   FPlayT Tools · Creat de Vortex
   Core Style
====================================================== */

:root{

    --font-ui:"Segoe UI Variable","Segoe UI",Arial,sans-serif;

    --bg:#0b1015;
    --bg2:#111821;

    --sidebar:#131b25;

    --card:#18222d;

    --border:rgba(255,255,255,.06);

    --text:#ffffff;
    --text2:#9fb0c3;

    --green:#8BC34A;
    --accent-rgb:139,195,74;
    --blue:#2196F3;
    --red:#F44336;
    --orange:#FF9800;
    --purple:#9C27B0;
    --scroll-track:#111821;
    --scroll-thumb:#334658;
    --scroll-hover:var(--green);

    --radius:14px;

    --transition:.25s;

    --shadow:
        0 10px 35px rgba(0,0,0,.35);

    --sidebar-width:280px;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    background:linear-gradient(
        135deg,
        var(--bg),
        var(--bg2)
    );

    color:var(--text);

    font-family:var(--font-ui);

    overflow:hidden;

}

button,
input,
select,
textarea{

    font-family:var(--font-ui);

}

button{

    cursor:pointer;

}

img{

    max-width:100%;

}

a{

    color:inherit;
    text-decoration:none;

}

/* ====================== */

.app-shell{

    display:flex;

    height:100vh;

    width:100%;

}

/* ====================== */

.main-content{

    flex:1;

    display:flex;

    flex-direction:column;

    overflow:hidden;

}

/* ====================== */

.topbar{

    position:relative;

    z-index:1000;

    isolation:isolate;

    overflow:visible;

    height:82px;

    padding:18px 25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:1px solid var(--border);

    background:rgba(255,255,255,.02);

    backdrop-filter:blur(10px);

}

/* ====================== */

.page-eyebrow{

    color:var(--green);

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.page-title{

    margin-top:5px;

    font-size:28px;

    font-weight:800;

}

/* ====================== */

.primary-button{

    border:none;

    background:var(--green);

    color:#111;

    font-weight:700;

    border-radius:10px;

    padding:13px 22px;

    transition:.2s;

}

.primary-button:hover{

    transform:translateY(-2px);

}

.secondary-button{

    border:1px solid var(--border);

    background:#1b2733;

    color:white;

    padding:13px 18px;

    border-radius:10px;

    transition:.2s;

}

.secondary-button:hover{

    background:#223242;

}

.danger-button{

    border:none;

    background:var(--red);

    color:white;

    padding:13px 20px;

    border-radius:10px;

}

/* ====================== */

.dynamic-workspace{

    position:relative;

    z-index:1;

    flex:1;

    overflow:auto;

    padding:30px;

}

/* ====================== */

.initial-loader{

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    gap:25px;

}

.loader-ring{

    width:65px;

    height:65px;

    border-radius:50%;

    border:6px solid rgba(255,255,255,.1);

    border-top:6px solid var(--green);

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* ====================== */

.toast-container{

    position:fixed;

    top:20px;

    right:20px;

    z-index:999999;

}

/* ====================== */

.sidebar-backdrop{

    display:none;

}

/* ====================== */

@media(max-width:900px){

    .topbar{

        flex-wrap:wrap;

        height:auto;

        gap:15px;

    }

}

/* Sistem tipografic unic pentru toate modulele. */
h1,h2,h3,h4,h5,h6,strong,b,small,span,p,label,th,td{font-family:var(--font-ui)}
.page-title,.brand-title,.dashboard-hero-copy h3,.garage-header-copy h3,.garage-landing-hero h3,.taxes-hero h3,.warehouse-hero h3,.homes-hero h3,.tools-hero h3,.modal-header h3,.inventory-header h3{text-transform:uppercase;letter-spacing:.025em;font-weight:850}
.sidebar-button-label,.primary-button,.secondary-button,.danger-button,.vehicle-name,.garage-class-card strong,.dashboard-panel-header h3{text-transform:uppercase;letter-spacing:.035em;font-weight:800}
.dashboard-hero-copy p,.garage-header-copy p,.warehouse-hero p,.homes-hero p,.tools-hero p,.vehicle-content,.details-notes p{font-weight:400;text-transform:none;letter-spacing:normal}

[hidden]{display:none!important}

:root[data-theme="midnight"]{--bg:#07111f;--bg2:#0c1b2e;--sidebar:#0b1726;--card:#10243a;--border:rgba(85,166,255,.15);--green:#42a5f5;--accent-rgb:66,165,245;--blue:#00bcd4;--orange:#ffb74d;--purple:#7e57c2;--scroll-track:#07111f;--scroll-thumb:#1d4e72;--scroll-hover:#42a5f5}
:root[data-theme="carbon"]{--bg:#0c0c0e;--bg2:#171719;--sidebar:#111113;--card:#1c1c20;--border:rgba(255,70,70,.13);--green:#ef5350;--accent-rgb:239,83,80;--blue:#ff7043;--orange:#ffab40;--purple:#ab47bc;--scroll-track:#0c0c0e;--scroll-thumb:#5a2929;--scroll-hover:#ef5350}
:root[data-theme="violet"]{--bg:#0d0815;--bg2:#191027;--sidebar:#130d20;--card:#21172f;--border:rgba(190,110,255,.15);--green:#b968ff;--accent-rgb:185,104,255;--blue:#6c8cff;--orange:#ff9f43;--purple:#e056fd;--scroll-track:#0d0815;--scroll-thumb:#4b2b68;--scroll-hover:#b968ff}
:root[data-theme="orange"]{--bg:#130d08;--bg2:#21160d;--sidebar:#191109;--card:#281b10;--border:rgba(255,145,48,.16);--green:#ff922e;--accent-rgb:255,146,46;--blue:#ffb44a;--orange:#ff6d00;--purple:#d05bff;--scroll-track:#130d08;--scroll-thumb:#70401d;--scroll-hover:#ff922e}
@property --rgb-r{syntax:"<number>";inherits:true;initial-value:255}
@property --rgb-g{syntax:"<number>";inherits:true;initial-value:59}
@property --rgb-b{syntax:"<number>";inherits:true;initial-value:120}
:root[data-theme="rgb"]{--rgb-r:255;--rgb-g:59;--rgb-b:120;--bg:#080b12;--bg2:#101725;--sidebar:#0c121e;--card:#151d2b;--accent-rgb:var(--rgb-r),var(--rgb-g),var(--rgb-b);--border:rgba(var(--accent-rgb),.2);--green:rgb(var(--accent-rgb));--blue:#33d7ff;--orange:#ffb629;--purple:#ae62ff;--scroll-track:#080b12;--scroll-thumb:rgb(var(--accent-rgb));--scroll-hover:var(--green);animation:rgb-palette 28s ease-in-out infinite}
:root[data-theme="fplayt"]{--bg:#0b1015;--bg2:#111821;--sidebar:#131b25;--card:#18222d;--green:#8BC34A;--accent-rgb:139,195,74;--blue:#2196F3;--red:#F44336;--orange:#FF9800;--purple:#9C27B0;--scroll-track:#111821;--scroll-thumb:#334658;--scroll-hover:#8BC34A}
:root[data-theme="daylight"]{--bg:#eef2f5;--bg2:#e4eaf0;--sidebar:#f8fafb;--card:#ffffff;--text:#111820;--text2:#526170;--muted:#718191;--border:rgba(20,35,48,.13);--green:#5e9f27;--accent-rgb:94,159,39;--blue:#1877bd;--red:#d93636;--orange:#dc7900;--purple:#7d3ca4;--scroll-track:#e4eaf0;--scroll-thumb:#9fb0bf;--scroll-hover:#5e9f27;color-scheme:light}
:root[data-color-mode="light"]{--bg:#eef2f5;--bg2:#e4eaf0;--sidebar:#f8fafb;--card:#ffffff;--text:#111820;--text2:#526170;--muted:#718191;--border:rgba(20,35,48,.13);--scroll-track:#e4eaf0;--scroll-thumb:#9fb0bf;--scroll-hover:var(--green);color-scheme:light}
:root[data-color-mode="light"][data-theme="midnight"]{--bg:#edf4fb;--bg2:#e1edf8;--sidebar:#f7fbff;--card:#ffffff;--border:rgba(31,93,145,.16)}
:root[data-color-mode="light"][data-theme="carbon"]{--bg:#f5eeee;--bg2:#eadfdf;--sidebar:#fff9f9;--card:#ffffff;--border:rgba(139,45,45,.16)}
:root[data-color-mode="light"][data-theme="violet"]{--bg:#f4eff9;--bg2:#e9e0f2;--sidebar:#fcf9ff;--card:#ffffff;--border:rgba(111,58,145,.16)}
:root[data-color-mode="light"][data-theme="orange"]{--bg:#fff4e8;--bg2:#f7e6d2;--sidebar:#fffaf5;--card:#ffffff;--border:rgba(174,88,18,.18)}
:root[data-color-mode="light"][data-theme="rgb"]{--bg:#f2f4fa;--bg2:#e5eaf4;--sidebar:#fafbff;--card:#ffffff;--border:rgba(var(--accent-rgb),.22)}
@keyframes rgb-palette{
    0%,100%{--rgb-r:255;--rgb-g:62;--rgb-b:118}
    14%{--rgb-r:255;--rgb-g:116;--rgb-b:48}
    28%{--rgb-r:239;--rgb-g:218;--rgb-b:57}
    42%{--rgb-r:52;--rgb-g:225;--rgb-b:132}
    57%{--rgb-r:38;--rgb-g:203;--rgb-b:255}
    71%{--rgb-r:91;--rgb-g:112;--rgb-b:255}
    85%{--rgb-r:190;--rgb-g:82;--rgb-b:255}
}
:root[data-theme="rgb"] body{
    background:
        radial-gradient(circle at 12% 18%,rgba(var(--accent-rgb),.10),transparent 32rem),
        radial-gradient(circle at 88% 82%,rgba(var(--accent-rgb),.065),transparent 38rem),
        var(--bg);
    transition:background-color 1.2s ease;
}
:root[data-theme="rgb"] .sidebar{
    background:
        linear-gradient(155deg,rgba(var(--accent-rgb),.075),transparent 34%),
        var(--sidebar);
    box-shadow:inset -1px 0 rgba(var(--accent-rgb),.14),12px 0 45px rgba(var(--accent-rgb),.035);
}
:root[data-theme="rgb"] .topbar{
    background:
        linear-gradient(90deg,rgba(var(--accent-rgb),.045),transparent 32%,rgba(var(--accent-rgb),.035)),
        rgba(8,11,18,.88);
}
:root[data-theme="rgb"] .dashboard-panel,
:root[data-theme="rgb"] .vehicle-card,
:root[data-theme="rgb"] .profile-panel{
    box-shadow:0 12px 35px rgba(0,0,0,.28),0 0 24px rgba(var(--accent-rgb),.025);
    transition:border-color .8s ease,box-shadow .8s ease,transform var(--transition);
}
@media(prefers-reduced-motion:reduce){:root[data-theme="rgb"]{animation:none}}