@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --apple-bg: #f5f5f7;
    --apple-dark: #161617;
    --davima-red: #da291c;
    --glass-border: rgba(0,0,0,0.05);
    --titanium-border: rgba(255,255,255,0.1);
    --radius-pro: 20px;
}

body {
    background-color: var(--apple-bg);
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--apple-dark);
    margin: 0;
    display: flex;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* SIDEBAR PRO */
.sidebar {
    width: 260px;
    background-color: var(--apple-dark);
    color: white;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 1000;
}

.sidebar-brand { padding: 30px 24px; font-weight: 800; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.sidebar-menu { padding: 20px 12px; flex: 1; }
.menu-label { font-size: 0.65rem; text-transform: uppercase; color: #86868b; margin: 20px 0 8px 15px; font-weight: 700; letter-spacing: 1px; }

.sidebar-link {
    display: flex; align-items: center; padding: 10px 15px; color: #86868b; text-decoration: none; border-radius: 12px; margin-bottom: 4px; font-weight: 500; transition: all 0.2s;
}
.sidebar-link:hover { background: rgba(255,255,255,0.05); color: white; }
.sidebar-link.active { background: rgba(255,255,255,0.1); color: white; backdrop-filter: blur(10px); border: 1px solid var(--titanium-border); }
.sidebar-link i { margin-right: 12px; font-size: 1.1rem; }

/* MAIN CONTENT ESTRUCTURA */
.main-content {
    flex: 1;
    margin-left: 260px;
    display: flex;
    flex-direction: column; /* Açò permet que el footer es quede baix */
    min-height: 100vh;
}

.top-bar {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    height: 70px;
    padding: 0 40px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--glass-border);
    position: sticky; top: 0; z-index: 900;
}

.workspace { padding: 40px; flex: 1; } /* flex: 1 fa que ocupe l'espai i espente el footer */

/* FOOTER INTEGRAT */
.footer-pro {
    padding: 25px 40px;
    background: transparent;
    border-top: 1px solid var(--glass-border);
    color: #86868b;
    font-size: 0.8rem;
}

/* TARGETES BENTO LUXURY */
.card {
    background: white;
    border-radius: var(--radius-pro);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 30px rgba(0,0,0,0.03);
    transition: transform 0.3s cubic-bezier(0,0,0.5,1);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 15px 45px rgba(0,0,0,0.06); }

/* EXTRA: PANNELL D'STATS SUPERIOR */
.stats-header {
    background: linear-gradient(135deg, #1d1d1f 0%, #434344 100%);
    color: white;
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-around;
}
.stat-item { text-align: center; }
.stat-val { font-size: 1.8rem; font-weight: 800; display: block; }
.stat-lab { font-size: 0.7rem; text-transform: uppercase; opacity: 0.6; font-weight: 700; letter-spacing: 1px; }

/* TAULES I INPUTS */
.table thead th { background: transparent; color: #86868b; font-size: 0.7rem; text-transform: uppercase; padding: 15px; border-bottom: 1px solid #eee; }
.table td { padding: 15px; border-bottom: 1px solid #f5f5f7; vertical-align: middle; }
.form-control, .form-select { border-radius: 12px; padding: 12px; border: 1px solid #d2d2d7; background: #f5f5f7; }
.btn-davima { background: var(--apple-dark); color: white; border-radius: 12px; font-weight: 600; padding: 10px 25px; border: none; transition: 0.2s; }
.btn-davima:hover { background: #000; transform: scale(0.98); }