/* ============================================================
   THALCORYS — Feuille de styles principale
   ============================================================ */

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

/* ------------------------------------------------------------
   Variables globales
   ------------------------------------------------------------ */

:root {
    --bg           : #0f1117;
    --surface      : #181c27;
    --surface2     : #1e2333;
    --border       : #252a3d;
    --border2      : #2e3450;
    --accent       : #6366f1;
    --accent-soft  : rgba(99, 102, 241, 0.15);
    --accent2      : #22d3ee;
    --text         : #e2e8f0;
    --muted        : #64748b;
    --muted2       : #8892a4;
    --green        : #10b981;
    --orange       : #f59e0b;
    --red          : #ef4444;
    --purple       : #a78bfa;
    --sidebar-w    : 250px;
    --radius       : 10px;
    --radius-sm    : 6px;
    --radius-lg    : 14px;
    --transition   : 0.15s ease;
}

/* ------------------------------------------------------------
   Reset de base
   ------------------------------------------------------------ */

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

body {
    font-family : 'Inter', sans-serif;
    background  : var(--bg);
    color       : var(--text);
    min-height  : 100vh;
    display     : flex;
    font-size   : 14px;
    line-height : 1.5;
}

/* ------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------ */

.sidebar {
    width      : var(--sidebar-w);
    background : var(--surface);
    border-right : 1px solid var(--border);
    display    : flex;
    flex-direction : column;
    position   : fixed;
    top        : 0;
    left       : 0;
    bottom     : 0;
    z-index    : 100;
    overflow-y : auto;
}

.sidebar__logo {
    padding        : 20px;
    display        : flex;
    align-items    : center;
    gap            : 12px;
    border-bottom  : 1px solid var(--border);
    flex-shrink    : 0;
}

.sidebar__logo-icon {
    width           : 34px;
    height          : 34px;
    background      : linear-gradient(135deg, var(--accent), var(--accent2));
    border-radius   : var(--radius-sm);
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 18px;
    flex-shrink     : 0;
}

.sidebar__logo-text {
    font-size   : 17px;
    font-weight : 700;
    letter-spacing : -0.4px;
    background  : linear-gradient(135deg, #e2e8f0, #94a3b8);
    -webkit-background-clip : text;
    -webkit-text-fill-color : transparent;
}

.sidebar__section {
    padding : 14px 10px 6px;
}

.sidebar__label {
    font-size      : 10px;
    font-weight    : 600;
    letter-spacing : 0.08em;
    text-transform : uppercase;
    color          : var(--muted);
    padding        : 0 10px 8px;
    display        : block;
}

.sidebar__item {
    display     : flex;
    align-items : center;
    gap         : 9px;
    padding     : 8px 10px;
    border-radius : var(--radius-sm);
    cursor      : pointer;
    color       : var(--muted2);
    font-size   : 13.5px;
    font-weight : 450;
    transition  : all var(--transition);
    user-select : none;
    border      : none;
    background  : none;
    width       : 100%;
    text-align  : left;
    font-family : 'Inter', sans-serif;
}

.sidebar__item:hover {
    background : var(--surface2);
    color      : var(--text);
}

.sidebar__item--active {
    background : var(--accent-soft);
    color      : var(--accent);
    font-weight : 500;
}

.sidebar__item-icon {
    font-size  : 15px;
    width      : 18px;
    text-align : center;
    flex-shrink : 0;
}

.sidebar__badge {
    margin-left   : auto;
    background    : var(--accent);
    color         : white;
    font-size     : 10px;
    font-weight   : 600;
    padding       : 1px 7px;
    border-radius : 20px;
}

.sidebar__project-dot {
    width         : 8px;
    height        : 8px;
    border-radius : 50%;
    flex-shrink   : 0;
}

.sidebar__footer {
    margin-top   : auto;
    padding      : 12px;
    border-top   : 1px solid var(--border);
    flex-shrink  : 0;
}

.sidebar__user {
    display     : flex;
    align-items : center;
    gap         : 10px;
    padding     : 8px;
    border-radius : var(--radius-sm);
    cursor      : pointer;
}

.sidebar__user:hover {
    background : var(--surface2);
}

.sidebar__avatar {
    width           : 32px;
    height          : 32px;
    border-radius   : 50%;
    background      : linear-gradient(135deg, var(--accent), var(--purple));
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 13px;
    font-weight     : 600;
    color           : white;
    flex-shrink     : 0;
}

.sidebar__user-name {
    font-size   : 13px;
    font-weight : 500;
}

.sidebar__user-role {
    font-size : 11px;
    color     : var(--muted);
}

/* ------------------------------------------------------------
   Main layout
   ------------------------------------------------------------ */

.main {
    margin-left    : var(--sidebar-w);
    flex           : 1;
    display        : flex;
    flex-direction : column;
    min-height     : 100vh;
}

/* ------------------------------------------------------------
   Topbar
   ------------------------------------------------------------ */

.topbar {
    height         : 58px;
    border-bottom  : 1px solid var(--border);
    display        : flex;
    align-items    : center;
    padding        : 0 24px;
    gap            : 12px;
    background     : var(--bg);
    position       : sticky;
    top            : 0;
    z-index        : 50;
    flex-shrink    : 0;
}

.topbar__title {
    font-size   : 16px;
    font-weight : 600;
    flex        : 1;
}

.topbar__search {
    display     : flex;
    align-items : center;
    gap         : 8px;
    background  : var(--surface);
    border      : 1px solid var(--border);
    border-radius : var(--radius-sm);
    padding     : 6px 12px;
    width       : 220px;
}

.topbar__search input {
    background  : none;
    border      : none;
    outline     : none;
    color       : var(--text);
    font-size   : 13px;
    width       : 100%;
    font-family : 'Inter', sans-serif;
}

.topbar__search input::placeholder {
    color : var(--muted);
}

/* ------------------------------------------------------------
   Contenu principal
   ------------------------------------------------------------ */

.content {
    padding : 24px;
    flex    : 1;
}

/* ------------------------------------------------------------
   Vues
   ------------------------------------------------------------ */

.view {
    display : none;
}

.view--active {
    display : block;
}

/* ------------------------------------------------------------
   Boutons
   ------------------------------------------------------------ */

.btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 6px;
    padding         : 7px 15px;
    border-radius   : var(--radius-sm);
    font-size       : 13px;
    font-weight     : 500;
    cursor          : pointer;
    border          : none;
    transition      : all var(--transition);
    font-family     : 'Inter', sans-serif;
    text-decoration : none;
    white-space     : nowrap;
}

.btn--primary {
    background : var(--accent);
    color      : white;
}

.btn--primary:hover {
    background : #5254d4;
}

.btn--ghost {
    background : transparent;
    color      : var(--muted2);
    border     : 1px solid var(--border2);
}

.btn--ghost:hover {
    background : var(--surface2);
    color      : var(--text);
}

.btn--danger {
    background : rgba(239, 68, 68, 0.12);
    color      : var(--red);
    border     : 1px solid rgba(239, 68, 68, 0.3);
}

.btn--danger:hover {
    background : rgba(239, 68, 68, 0.22);
}

.btn--warning {
    background : rgba(245, 158, 11, 0.12);
    color      : var(--orange);
    border     : 1px solid rgba(245, 158, 11, 0.3);
}

.btn--warning:hover {
    background : rgba(245, 158, 11, 0.22);
}

.btn--success {
    background : rgba(16, 185, 129, 0.12);
    color      : var(--green);
    border     : 1px solid rgba(16, 185, 129, 0.3);
}

.btn--success:hover {
    background : rgba(16, 185, 129, 0.22);
}

.btn--sm {
    padding   : 5px 10px;
    font-size : 12px;
}

.btn--icon {
    padding : 6px;
    width   : 30px;
    height  : 30px;
}

/* ------------------------------------------------------------
   Grille dashboard
   ------------------------------------------------------------ */

.stats-grid {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    gap                   : 16px;
    margin-bottom         : 24px;
}

.stat-card {
    background    : var(--surface);
    border        : 1px solid var(--border);
    border-radius : var(--radius);
    padding       : 18px 20px;
}

.stat-card__label {
    font-size     : 12px;
    color         : var(--muted);
    font-weight   : 500;
    margin-bottom : 8px;
}

.stat-card__value {
    font-size      : 30px;
    font-weight    : 700;
    letter-spacing : -1px;
    margin-bottom  : 4px;
}

.stat-card__sub {
    font-size : 12px;
    color     : var(--muted);
}

.dashboard-grid {
    display               : grid;
    grid-template-columns : 1fr 320px;
    gap                   : 16px;
}

/* ------------------------------------------------------------
   Cards génériques
   ------------------------------------------------------------ */

.card {
    background    : var(--surface);
    border        : 1px solid var(--border);
    border-radius : var(--radius);
    overflow      : hidden;
    margin-bottom : 16px;
}

.card__header {
    padding        : 16px 20px;
    border-bottom  : 1px solid var(--border);
    display        : flex;
    align-items    : center;
    justify-content : space-between;
}

.card__title {
    font-size   : 14px;
    font-weight : 600;
}

.card__body {
    padding : 16px;
}

/* ------------------------------------------------------------
   Tâches
   ------------------------------------------------------------ */

.task-item {
    display     : flex;
    align-items : flex-start;
    gap         : 10px;
    padding     : 10px 12px;
    border-radius : var(--radius-sm);
    transition  : background var(--transition);
    margin-bottom : 2px;
}

.task-item:hover {
    background : var(--surface2);
}

.task-item__check {
    width           : 18px;
    height          : 18px;
    border          : 2px solid var(--border2);
    border-radius   : 5px;
    flex-shrink     : 0;
    margin-top      : 2px;
    cursor          : pointer;
    display         : flex;
    align-items     : center;
    justify-content : center;
    transition      : all var(--transition);
    background      : none;
}

.task-item__check--done {
    background   : var(--accent);
    border-color : var(--accent);
}

.task-item__check--done::after {
    content     : '✓';
    color       : white;
    font-size   : 11px;
    font-weight : 700;
}

.task-item__body {
    flex       : 1;
    min-width  : 0;
    cursor     : pointer;
}

.task-item__title {
    font-size   : 13.5px;
    line-height : 1.5;
}

.task-item__title--done {
    text-decoration : line-through;
    color           : var(--muted);
}

.task-item__meta {
    display     : flex;
    gap         : 6px;
    align-items : center;
    margin-top  : 4px;
    flex-wrap   : wrap;
}

.task-item__actions {
    display    : flex;
    gap        : 4px;
    opacity    : 0;
    transition : opacity var(--transition);
    flex-shrink : 0;
}

.task-item:hover .task-item__actions {
    opacity : 1;
}

/* ------------------------------------------------------------
   Tags priorité
   ------------------------------------------------------------ */

.tag {
    font-size      : 10px;
    font-weight    : 600;
    padding        : 2px 7px;
    border-radius  : 4px;
    letter-spacing : 0.02em;
    white-space    : nowrap;
}

.tag--high {
    background : rgba(239, 68, 68, 0.15);
    color      : var(--red);
}

.tag--mid {
    background : rgba(245, 158, 11, 0.15);
    color      : var(--orange);
}

.tag--low {
    background : rgba(16, 185, 129, 0.15);
    color      : var(--green);
}

.chip {
    display     : inline-flex;
    align-items : center;
    gap         : 4px;
    font-size   : 11px;
    font-weight : 500;
    padding     : 2px 8px;
    border-radius : 20px;
    white-space : nowrap;
}

.due-date {
    font-size : 11px;
    color     : var(--muted);
}

.due-date--overdue {
    color : var(--red);
}

/* ------------------------------------------------------------
   Filtres
   ------------------------------------------------------------ */

.filters {
    display     : flex;
    gap         : 8px;
    margin-bottom : 16px;
    flex-wrap   : wrap;
    align-items : center;
}

.filter-btn {
    padding       : 6px 14px;
    border-radius : var(--radius-sm);
    border        : 1px solid var(--border2);
    background    : transparent;
    color         : var(--muted2);
    font-size     : 12px;
    font-weight   : 500;
    cursor        : pointer;
    transition    : all var(--transition);
    font-family   : 'Inter', sans-serif;
}

.filter-btn:hover {
    background : var(--surface2);
    color      : var(--text);
}

.filter-btn--active {
    border-color : var(--accent);
    color        : var(--accent);
    background   : var(--accent-soft);
}

/* ------------------------------------------------------------
   Kanban
   ------------------------------------------------------------ */

.board {
    display        : flex;
    gap            : 16px;
    overflow-x     : auto;
    padding-bottom : 8px;
}

.board__col {
    flex-shrink : 0;
    width       : 280px;
}

.board__col-header {
    display         : flex;
    align-items     : center;
    gap             : 8px;
    padding         : 10px 14px;
    background      : var(--surface);
    border          : 1px solid var(--border);
    border-radius   : var(--radius) var(--radius) 0 0;
    font-weight     : 600;
    font-size       : 13px;
}

.board__col-count {
    margin-left   : auto;
    background    : var(--surface2);
    color         : var(--muted2);
    font-size     : 11px;
    font-weight   : 600;
    padding       : 2px 7px;
    border-radius : 10px;
}

.board__col-body {
    background    : rgba(24, 28, 39, 0.5);
    border        : 1px solid var(--border);
    border-top    : none;
    border-radius : 0 0 var(--radius) var(--radius);
    padding       : 8px;
    min-height    : 200px;
}

.kanban-card {
    background    : var(--surface);
    border        : 1px solid var(--border);
    border-radius : var(--radius-sm);
    padding       : 12px;
    margin-bottom : 8px;
    cursor        : pointer;
    transition    : all var(--transition);
}

.kanban-card:hover {
    border-color : var(--accent);
    transform    : translateY(-1px);
}

.kanban-card__title {
    font-size     : 13px;
    font-weight   : 500;
    margin-bottom : 8px;
    line-height   : 1.4;
}

.kanban-card__footer {
    display     : flex;
    align-items : center;
    gap         : 6px;
    flex-wrap   : wrap;
}

/* ------------------------------------------------------------
   Projets
   ------------------------------------------------------------ */

.project-list {
    display        : flex;
    flex-direction : column;
    gap            : 12px;
}

.project-card {
    background    : var(--surface);
    border        : 1px solid var(--border);
    border-radius : var(--radius);
    padding       : 18px 20px;
    transition    : all var(--transition);
    display       : flex;
    align-items   : center;
    gap           : 16px;
}

.project-card:hover {
    border-color : var(--border2);
}

.project-card__icon {
    width           : 46px;
    height          : 46px;
    border-radius   : var(--radius-sm);
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 22px;
    flex-shrink     : 0;
}

.project-card__info {
    flex      : 1;
    min-width : 0;
}

.project-card__name {
    font-size     : 15px;
    font-weight   : 600;
    margin-bottom : 3px;
}

.project-card__desc {
    font-size     : 12px;
    color         : var(--muted);
    margin-bottom : 8px;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

.progress-bar {
    height        : 4px;
    background    : var(--border);
    border-radius : 2px;
    overflow      : hidden;
    max-width     : 300px;
}

.progress-bar__fill {
    height        : 100%;
    border-radius : 2px;
    transition    : width 0.4s ease;
}

.project-card__stats {
    display     : flex;
    gap         : 20px;
    align-items : center;
    flex-shrink : 0;
}

.project-card__actions {
    display     : flex;
    gap         : 6px;
    flex-shrink : 0;
}

.pstat {
    text-align : center;
}

.pstat__value {
    font-size   : 18px;
    font-weight : 700;
}

.pstat__label {
    font-size   : 10px;
    color       : var(--muted);
    font-weight : 500;
}

/* ------------------------------------------------------------
   Activité
   ------------------------------------------------------------ */

.activity-item {
    display       : flex;
    gap           : 10px;
    padding       : 10px 0;
    border-bottom : 1px solid var(--border);
    font-size     : 13px;
}

.activity-item:last-child {
    border-bottom : none;
}

.activity-item__dot {
    width         : 8px;
    height        : 8px;
    border-radius : 50%;
    margin-top    : 5px;
    flex-shrink   : 0;
}

.activity-item__time {
    font-size  : 11px;
    color      : var(--muted);
    margin-top : 2px;
}

.scrollable {
    overflow-y : auto;
    max-height : 320px;
}

/* ------------------------------------------------------------
   Modal
   ------------------------------------------------------------ */

.modal-overlay {
    position        : fixed;
    inset           : 0;
    background      : rgba(0, 0, 0, 0.7);
    backdrop-filter : blur(4px);
    z-index         : 1000;
    display         : none;
    align-items     : center;
    justify-content : center;
}

.modal-overlay--open {
    display : flex;
}

.modal {
    background    : var(--surface);
    border        : 1px solid var(--border2);
    border-radius : var(--radius-lg);
    width         : 500px;
    max-width     : 95vw;
    max-height    : 90vh;
    overflow-y    : auto;
    padding       : 26px;
    animation     : modalIn 0.2s ease;
}

@keyframes modalIn {
    from {
        opacity   : 0;
        transform : scale(0.97) translateY(-8px);
    }
    to {
        opacity   : 1;
        transform : scale(1) translateY(0);
    }
}

.modal__title {
    font-size     : 17px;
    font-weight   : 700;
    margin-bottom : 22px;
}

.modal__actions {
    display         : flex;
    gap             : 10px;
    justify-content : flex-end;
    margin-top      : 22px;
}

/* ------------------------------------------------------------
   Formulaires
   ------------------------------------------------------------ */

.form-group {
    margin-bottom : 16px;
}

.form-label {
    font-size      : 11px;
    font-weight    : 600;
    color          : var(--muted);
    margin-bottom  : 6px;
    display        : block;
    text-transform : uppercase;
    letter-spacing : 0.05em;
}

.form-input,
.form-select,
.form-textarea {
    width       : 100%;
    background  : var(--bg);
    border      : 1px solid var(--border2);
    border-radius : var(--radius-sm);
    padding     : 9px 12px;
    color       : var(--text);
    font-size   : 14px;
    font-family : 'Inter', sans-serif;
    outline     : none;
    transition  : border-color var(--transition);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color : var(--accent);
}

.form-textarea {
    resize     : vertical;
    min-height : 80px;
}

.form-select option {
    background : var(--surface2);
}

.form-row {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 12px;
}

/* ------------------------------------------------------------
   Toast
   ------------------------------------------------------------ */

.toast-container {
    position       : fixed;
    bottom         : 24px;
    right          : 24px;
    z-index        : 9999;
    display        : flex;
    flex-direction : column;
    gap            : 8px;
}

.toast {
    background    : var(--surface);
    border        : 1px solid var(--border2);
    border-radius : var(--radius);
    padding       : 12px 16px;
    font-size     : 13px;
    display       : flex;
    align-items   : center;
    gap           : 10px;
    animation     : toastIn 0.2s ease;
    box-shadow    : 0 8px 24px rgba(0, 0, 0, 0.4);
    min-width     : 240px;
}

.toast--success {
    border-color : rgba(16, 185, 129, 0.4);
}

.toast--error {
    border-color : rgba(239, 68, 68, 0.4);
}

@keyframes toastIn {
    from {
        opacity   : 0;
        transform : translateY(8px);
    }
    to {
        opacity   : 1;
        transform : translateY(0);
    }
}

/* ------------------------------------------------------------
   Loader
   ------------------------------------------------------------ */

.loader {
    display       : inline-block;
    width         : 16px;
    height        : 16px;
    border        : 2px solid var(--border2);
    border-top-color : var(--accent);
    border-radius : 50%;
    animation     : spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform : rotate(360deg); }
}

/* ------------------------------------------------------------
   État vide
   ------------------------------------------------------------ */

.empty-state {
    text-align : center;
    padding    : 52px 24px;
    color      : var(--muted);
}

.empty-state__icon {
    font-size     : 42px;
    margin-bottom : 14px;
}

.empty-state__title {
    font-size     : 15px;
    font-weight   : 600;
    color         : var(--muted2);
    margin-bottom : 4px;
}

.empty-state__sub {
    font-size : 13px;
}

/* ------------------------------------------------------------
   Barre de sauvegarde
   ------------------------------------------------------------ */

.backup-bar {
    display       : flex;
    align-items   : center;
    gap           : 12px;
    background    : var(--surface);
    border        : 1px solid var(--border);
    border-radius : var(--radius);
    padding       : 10px 16px;
    margin-bottom : 20px;
    font-size     : 13px;
    flex-wrap     : wrap;
}

.backup-bar__status {
    display     : flex;
    align-items : center;
    gap         : 7px;
    color       : var(--muted2);
    flex        : 1;
}

.backup-bar__dot {
    width         : 8px;
    height        : 8px;
    border-radius : 50%;
    background    : var(--green);
    flex-shrink   : 0;
}

.backup-bar__dot--warning {
    background : var(--orange);
}

/* ------------------------------------------------------------
   Séparateur titre de section
   ------------------------------------------------------------ */

.section-title {
    font-size      : 12px;
    font-weight    : 600;
    color          : var(--muted);
    text-transform : uppercase;
    letter-spacing : 0.06em;
    margin-bottom  : 12px;
    margin-top     : 22px;
}

.section-title:first-child {
    margin-top : 0;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .stats-grid {
        grid-template-columns : repeat(2, 1fr);
    }

    .dashboard-grid {
        grid-template-columns : 1fr;
    }

    .project-card__stats {
        display : none;
    }
}

@media (max-width: 640px) {

    .sidebar {
        transform  : translateX(-100%);
        transition : transform 0.25s ease;
    }

    .sidebar--open {
        transform : translateX(0);
    }

    .main {
        margin-left : 0;
    }
}