@import url('./base.css');
@import url('./layout.css');
@import url('./components.css');
@import url('./ui.css');
@import url('./login.css');

/* =========================
THEME VARIABLES
========================= */

body.light{
--bg:#ffffff;
--bg-soft:#f3f5f7;
--card:#ffffff;

--text:#111827;
--text-soft:#6b7280;

--border:#e5e7eb;

--input-bg:#ffffff;
--input-text:#111827;
}

body.dark{
--bg:#020617;
--bg-soft:#0f172a;
--card:#0b1220;

--text:#ffffff;
--text-soft:#9ca3af;

--border:#1f2937;

--input-bg:#0f172a;
--input-text:#ffffff;
}


/* =========================
BASE
========================= */

body{
background:var(--bg);
color:var(--text);
}


/* =========================
LAYOUT
========================= */

.sidebar{
background:var(--card);
border-right:1px solid var(--border);
}

.topbar{
background:var(--card);
border-bottom:1px solid var(--border);
}


/* =========================
FORMS
========================= */

input,
select,
textarea{
background:var(--input-bg);
color:var(--input-text);
border:1px solid var(--border);
border-radius:8px;
outline:none;
}

input::placeholder,
textarea::placeholder{
color:var(--text-soft);
}


/* =========================
SELECT FIX
========================= */

select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
}

body.dark select option{
background:#1f2937;
color:#ffffff;
}


/* =========================
MODAL SYSTEM (CORRECT)
========================= */

/* overlay */

.modal{
background:rgba(0,0,0,0.5);
backdrop-filter:blur(3px);
}

/* box */

.modal-content{
background:var(--card);
color:var(--text);
border:1px solid var(--border);
border-radius:12px;
padding:24px;
}


/* labels */

.modal label{
color:var(--text);
}


/* =========================
TABLE
========================= */

table{
color:var(--text);
}

th,td{
border-color:var(--border);
}


/* =========================
TRANSITION
========================= */

body,
input,
select,
textarea,
.sidebar,
.topbar{
transition:all 0.2s ease;
}


.skeleton{
height:14px;
background:linear-gradient(90deg,#eee,#ddd,#eee);
background-size:200% 100%;
animation:skeleton 1.2s infinite;
border-radius:6px;
margin:8px 0;
}

@keyframes skeleton{
0%{background-position:200% 0;}
100%{background-position:-200% 0;}
}

body.dark .skeleton{
background:linear-gradient(90deg,#1f2937,#374151,#1f2937);
}