/* GLOBAL */
body {
    margin:0;
    font-family: 'Segoe UI', sans-serif;
    background:#f4f6f9;
}

/* LAYOUT FLEX */
.d-flex {
    display:flex;
}

/* SIDEBAR */
.sidebar {
    width:260px;
    height:100vh;
    background:linear-gradient(180deg,#0f172a,#0b1120);
    padding:20px 15px;
    position:fixed;
    left:0;
    top:0;
    color:white;
}

/* HEADER */
/* ================= SIDEBAR HEADER ================= */

.sidebar-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:40px;
}

/* logo */
.logo-circle{
    width:40px;
    height:40px;
    background:#10b981;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:18px;
}

/* texte */
.logo-text{
    flex:1;
    margin-left:12px;
    font-weight:600;
    font-size:18px;
    color:white;
}

/* bouton close */
.close-btn{
    width:30px;
    height:30px;
    background:#1e293b;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:16px;
    color:#cbd5e1;
    transition:0.2s;
}

.close-btn:hover{
    background:#334155;
    color:white;
}

/* MENU */
.sidebar ul {
    list-style:none;
    padding:0;
}

.sidebar ul li {
    margin-bottom:10px;
}

.sidebar ul li a {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 15px;
    border-radius:10px;
    color:#cbd5e1;
    text-decoration:none;
    transition:all 0.3s ease;
    font-size:15px;
}

/* HOVER */
.sidebar ul li a:hover {
    background:#1e293b;
    color:white;
}

/* ACTIVE */
.sidebar ul li a.active {
    background:#10b981;
    color:white;
}

/* CONTENT */
.content {
    margin-left:260px;
    padding:30px;
    width:100%;
    min-height:100vh;
}

/* ================= DASHBOARD ================= */

/* STAT CARDS */
.stat-card {
    background:white;
    padding:20px;
    border-radius:12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 4px 10px rgba(0,0,0,0.05);
    transition:0.3s;
}

.stat-card:hover {
    transform:translateY(-3px);
}

.stat-card p {
    margin:0;
    font-size:14px;
    color:#6b7280;
}

.stat-card h3 {
    margin-top:6px;
    font-weight:700;
}


/* MISSIONS */
.mission-item {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
    border-top:1px solid #f1f1f1;
}

.mission-item:hover {
    background:#f9fafb;
}

/* CARDS */
.card {
    border-radius:12px;
    border:none;
}
/* PAGE TITLE */
.page-title {
    font-weight:600;
}

.page-subtitle {
    color:#6b7280;
    margin-bottom:25px;
}

/* TOP BAR */
.user-topbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
    gap:20px;
}



/* ================= FILTER BUTTONS (MISSIONS + USERS) ================= */

/* COMMON BASE STYLE */
.mission-filter,
.user-filter {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: white;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s ease;
    white-space: nowrap;
}

/* HOVER EFFECT */
.mission-filter:hover,
.user-filter:hover {
    background: #f3f4f6;
}

/* ACTIVE STATE */
.mission-filter.active,
.user-filter.active {
    background: #10b981;
    color: white;
    border-color: #10b981;
}


/* ===== FIX ALIGNEMENT FILTRE USER ===== */

.users-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Search prend l’espace restant */
.users-topbar .search-box {
    flex: 1;
}

/* Conteneur des filtres */
.users-topbar .filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap; /* empêche retour ligne */
}
/* GRID */
.users-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(250px,1fr));
    gap:20px;
}

/* CARD */
.user-card {
    background:white;
    padding:20px;
    border-radius:14px;
    box-shadow:0 4px 10px rgba(0,0,0,0.05);
    transition:0.3s;
}

.user-card:hover {
    transform:translateY(-3px);
}

/* HEADER */
.user-header {
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:15px;
}

/* AVATAR */
.avatar {
    width:45px;
    height:45px;
    background:#10b981;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-weight:600;
}

/* INFO */
.user-info p {
    margin:5px 0;
    font-size:14px;
    color:#6b7280;
}

.user-info i {
    margin-right:8px;
}

/* BADGE */
.badge-service {
    display:inline-block;
    background:#f3f4f6;
    padding:6px 12px;
    border-radius:20px;
    font-size:13px;
    margin-top:10px;
}

/* projet */
/* HEADER */
.page-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.page-title {
    font-weight:600;
}

.page-subtitle {
    color:#6b7280;
    margin-top:5px;
}

/* ADD BUTTON */
.btn-add-project {
    background:#10b981;
    color:white;
    padding:10px 18px;
    border:none;
    border-radius:25px;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:8px;
    transition:0.3s;
}

.btn-add-project:hover {
    background:#0ea874;
}

/* GRID */
.projects-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:20px;
}

/* CARD */
.project-card {
    background:white;
    padding:20px;
    border-radius:14px;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
    display:flex;
    justify-content:space-between;
    align-items:center;
    transition:0.3s;
}

.project-card:hover {
    transform:translateY(-4px);
}

/* LEFT CONTENT */
.project-left {
    display:flex;
    gap:15px;
}

.project-icon {
    width:45px;
    height:45px;
    background:#e6f9f2;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#10b981;
    font-size:18px;
}

/* TEXT */
.project-card h6 {
    margin:0;
    font-weight:600;
}

.project-card small {
    color:#6b7280;
}

.project-card p {
    margin-top:8px;
    font-size:13px;
    color:#6b7280;
}

/* DELETE */
.project-delete {
    color:#ef4444;
    cursor:pointer;
    font-size:16px;
    transition:0.2s;
}

.project-delete:hover {
    color:#dc2626;
}

/* ajout modal projet */

/* ================= MODAL DESIGN ================= */

.custom-modal {
    border-radius:16px;
    border:none;
    padding:10px;
}

.custom-modal-header {
    border-bottom:none;
    padding:20px 25px 10px 25px;
}

.custom-modal-header h5 {
    font-weight:600;
}

.modal-body {
    padding:20px 25px;
}

.custom-modal-footer {
    border-top:none;
    padding:20px 0 0 0;
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

/* INPUT DESIGN */
.custom-input {
    border-radius:12px;
    padding:10px 14px;
    border:1px solid #e5e7eb;
}

.custom-input:focus {
    border-color:#10b981;
    box-shadow:0 0 0 3px rgba(16,185,129,0.15);
}

/* SAVE BUTTON */
.custom-save-btn {
    padding:8px 18px;
    border-radius:20px;
}

/* ordre de mission  */
/* TOP BAR */
.mission-topbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

/* SELECT ALL */
.select-all {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:15px;
    font-size:14px;
    color:#6b7280;
}

/* MISSION CARD */
.mission-card {
    background:white;
    border-radius:14px;
    padding:18px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
    transition:0.3s;
}

.mission-card:hover {
    transform:translateY(-3px);
}

.mission-left {
    display:flex;
    gap:15px;
    align-items:flex-start;
}

.mission-content h6 {
    margin:8px 0;
    font-weight:600;
}

.mission-meta {
    display:flex;
    gap:20px;
    font-size:13px;
    color:#6b7280;
}

.mission-meta i {
    margin-right:5px;
}

/* BADGES */
.badge-status {
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
    margin-left:8px;
}

.status-success {
    background:#dcfce7;
    color:#16a34a;
}

.status-warning {
    background:#fef3c7;
    color:#d97706;
}

.status-gray {
    background:#e5e7eb;
    color:#6b7280;
}

.badge-societe {
    background:#f3f4f6;
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
    margin-left:8px;
}

/* ACTIONS */
.mission-actions {
    display:flex;
    gap:15px;
    font-size:16px;
    cursor:pointer;
}

.mission-actions i:hover {
    opacity:0.7;
}

/* modal ajout mission */
/* ================= MISSION MODAL ================= */

.custom-modal {
    border-radius:16px;
    border:none;
    padding:10px;
}

.custom-modal-header {
    border-bottom:none;
    padding:20px 25px 10px 25px;
}

.custom-modal-header h5 {
    font-weight:600;
}

.modal-body {
    padding:20px 25px;
}

/* INPUT */
.custom-input {
    border-radius:12px;
    padding:10px 14px;
    border:1px solid #e5e7eb;
}

.custom-input:focus {
    border-color:#10b981;
    box-shadow:0 0 0 3px rgba(16,185,129,0.15);
}

/* EMPLOYE BOX */
.employees-box {
    background:#f9fafb;
    padding:15px;
    border-radius:12px;
}

.employee-item {
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:8px 0;
}

.employee-item small {
    display:block;
    color:#6b7280;
}

/* FOOTER */
.custom-modal-footer {
    border-top:none;
    padding:20px 0 0 0;
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

.custom-save-btn {
    padding:8px 20px;
    border-radius:20px;
}
/* liste mission */
/* ================= OM LIST DESIGN ================= */

.om-card {
    background:white;
    border-radius:14px;
    padding:18px 22px;
    margin-bottom:18px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
    transition:0.3s;
}

.om-card:hover {
    transform:translateY(-3px);
}

.om-left {
    display:flex;
    gap:15px;
}

.om-checkbox {
    margin-top:6px;
}

.om-top {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
}

.om-code {
    color:#6b7280;
}

.om-title {
    margin:6px 0 10px 0;
    font-weight:600;
}

/* BADGES */

.om-status {
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
}

.status-success {
    background:#dcfce7;
    color:#16a34a;
}

.status-warning {
    background:#fef3c7;
    color:#d97706;
}

.status-gray {
    background:#e5e7eb;
    color:#6b7280;
}

.om-societe {
    background:#f3f4f6;
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
}

/* META LINE */
.om-meta {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    font-size:13px;
    color:#6b7280;
    margin-bottom:8px;
}

.om-meta i {
    margin-right:6px;
}

/* USERS */
.om-users {
    font-size:13px;
    color:#6b7280;
}

.om-users i {
    margin-right:6px;
}

/* ACTIONS */
.om-actions {
    display:flex;
    gap:15px;
    font-size:16px;
    cursor:pointer;
}

.om-actions i:hover {
    opacity:0.7;
}

/* liste utilisateur */
/* ================= USERS PAGE ================= */

.users-topbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:20px 0 30px 0;
    gap:20px;
}

/* SEARCH */
/* ================= MISSION SEARCH FINAL FIX ================= */

.mission-toolbar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.toolbar-left {
    flex: 1;
}

/* SEARCH CONTAINER */
.search-box {
    position: relative;
    width: 100%;
}

/* INPUT */
.search-box input {
    width: 100%;
    height: 48px;
    padding-left: 48px;
    padding-right: 15px;
    border-radius: 14px;
    border: 2px solid #10b981;
    background: #f3f4f6;
    font-size: 15px;
    outline: none;
    transition: 0.2s ease;
}

/* ICON PERFECT CENTER */
.search-box .search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #9ca3af;
    pointer-events: none;
}

/* FOCUS EFFECT */
.search-box input:focus {
    background: white;
    box-shadow: 0 0 0 4px rgba(16,185,129,0.12);
}



/* GRID */
.users-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:20px;
}

/* CARD */
.user-card {
    background:white;
    border-radius:14px;
    padding:20px;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
    transition:0.3s;
}

.user-card:hover {
    transform:translateY(-4px);
}

/* HEADER */
.user-header {
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:15px;
}

.user-avatar {
    width:45px;
    height:45px;
    background:#10b981;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-weight:bold;
}

.user-header h6 {
    margin:0;
    font-weight:600;
}

.user-header small {
    color:#6b7280;
}

/* INFO */
.user-info p {
    margin:5px 0;
    font-size:14px;
    color:#6b7280;
}

.user-info i {
    margin-right:6px;
}

/* FOOTER */
.user-footer {
    margin-top:15px;
}

.dept-badge {
    background:#f3f4f6;
    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
}
/* ================= TOOLBAR ================= */

.mission-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* ================= SEARCH ================= */

.search-box {
    position: relative;
    width: 380px;
}

.search-box i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 14px;
}

.search-box input {
    width: 100%;
    padding: 10px 15px 10px 40px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    outline: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.search-box input:focus {
    border-color: #10b981;
    background: white;
    box-shadow: 0 0 0 2px rgba(16,185,129,0.1);
}

/* ================= FILTER BUTTONS ================= */

/* ================= TOOLBAR ================= */

.mission-toolbar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

/* LEFT SIDE */
.toolbar-left {
    flex: 1;
}

/* ================= SEARCH BOX ================= */

.search-box {
    position: relative;
    width: 100%;
}

.search-box input {
    width: 100%;
    height: 42px;
    padding-left: 45px;
    padding-right: 15px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 14px;
    outline: none;
    transition: 0.2s ease;
}

/* ICON POSITION PERFECT CENTER */
.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: #9ca3af;
    pointer-events: none;
}

.search-box input:focus {
    border-color: #10b981;
    background: white;
    box-shadow: 0 0 0 2px rgba(16,185,129,0.12);
}

/* RIGHT SIDE FILTERS */
.toolbar-right {
    display: flex;
    gap: 10px;
}



/* couleur user modifier  */
/* ================= EMPLOYEE CARD DESIGN ================= */

.employee-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    cursor: pointer;
    transition: 0.25s ease;
    margin-bottom: 12px;
}

.employee-card input {
    margin-top: 4px;
}

.employee-content strong {
    display: block;
    font-size: 14px;
}

.employee-content small {
    color: #6b7280;
    font-size: 12px;
}

/* HOVER */
.employee-card:hover {
    border-color: #10b981;
}

/* CHECKED STATE */
.employee-card input:checked + .employee-content {
    color: #065f46;
}

.employee-card input:checked {
    accent-color: #10b981;
}

.employee-card:has(input:checked) {
    background: #d1fae5;
    border-color: #10b981;
}

/* ================= SIDEBAR COLLAPSE ================= */

.sidebar {
    width: 260px;
    transition: all 0.3s ease;
}

/* contenu */
.content {
    margin-left: 260px;
    transition: all 0.3s ease;
}

/* état réduit */
.sidebar.collapsed {
    width: 80px;
}

/* contenu quand sidebar réduit */
.sidebar.collapsed + .content {
    margin-left: 80px;
}

/* cacher le texte */
.sidebar.collapsed .logo-text {
    display: none;
}

.sidebar.collapsed .menu span {
    display: none;
}

/* centrer icones */
.sidebar.collapsed .menu a {
    justify-content: center;
}

/* header alignement */
.sidebar.collapsed .sidebar-header {
    justify-content: center;
}

/* cacher bouton close */
.sidebar.collapsed .close-btn {
    display: none;
}

.stat-card{
    position:relative;
}
/* ===== DASHBOARD ICON FIX ===== */

.stat-card{
    position:relative;
}

.stat-card .icon,
.stat-card .icon-plane{
    position:absolute;
    right:25px;
    top:22px;
    background:none;
    width:auto;
    height:auto;
    border-radius:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.stat-card .icon i,
.stat-card .icon-plane i{
    font-size:42px;
}

.stat-card .green i{
    color:#34d399;
}

.stat-card .orange i{
    color:#f59e0b;
}

.stat-card .blue i{
    color:#22c1dc;
}

.stat-card .teal i{
    color:#34d399;
}

/* checkbox */
.modal-body{
    overflow-y:auto;
}

.modal-content{
  max-height:90vh;
  display:flex;
  flex-direction:column;
}

/* ================= SELECT2 ================= */

.select2-container{
    width:100% !important;
    z-index:2050;
}

/* input select */
.select2-container--default .select2-selection--multiple{
    border-radius:14px;
    border:1px solid #e5e7eb;
    min-height:48px;
    padding:6px 8px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
}

/* tags sélectionnés */
.select2-container--default .select2-selection__choice{
    background:#d1fae5;
    border:none;
    color:#065f46;
    border-radius:8px;
    padding:4px 8px;
    font-size:13px;
}

/* dropdown */
.select2-dropdown{
    border-radius:14px;
    border:1px solid #e5e7eb;
}

/* liste employés */
.select2-results__options{
    max-height:250px;
    overflow-y:auto;
}

/* option */
.select2-results__option{
    padding:12px;
    border-radius:10px;
}

/* hover */
.select2-results__option--highlighted{
    background:#f3f4f6 !important;
    color:#111 !important;
}

/* option sélectionnée */
.select2-results__option[aria-selected=true]{
    background:#d1fae5 !important;
    color:#065f46 !important;
}

/* checkbox */
.select-user{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.select-user-checkbox{
    width:16px;
    height:16px;
    margin-top:3px;
}
.select2-container--open{
    z-index:9999;
}


/* GRID MATERIEL */

.projects-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
gap:20px;
}


/* CARD */

.project-card{
background:white;
padding:20px;
border-radius:14px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
display:flex;
justify-content:space-between;
align-items:center;
transition:0.25s;
}

.project-card:hover{
transform:translateY(-4px);
}


/* ICON */

.project-icon{
width:46px;
height:46px;
background:#e6f9f2;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
color:#10b981;
font-size:18px;
}


/* LEFT */

.project-left{
display:flex;
gap:15px;
align-items:center;
}


/* TEXT */

.project-card h6{
margin:0;
font-weight:600;
font-size:15px;
}

.project-card small{
color:#6b7280;
}

.project-card p{
margin-top:6px;
font-size:13px;
color:#6b7280;
}


/* ACTIONS */

.mission-actions{
display:flex;
gap:12px;
font-size:16px;
cursor:pointer;
}

.mission-actions i:hover{
opacity:0.7;
}
.custom-modal-footer{
display:flex;
justify-content:flex-end;
gap:10px;
}

.btn-danger{
background:#ef4444;
border:none;
border-radius:10px;
padding:8px 18px;
}

.btn-light{
background:#f3f4f6;
border-radius:10px;
padding:8px 18px;
}



/* niany */

#materielContainer .materiel-item{
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
}

.materiel-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:600;
}

.materiel-remove{
    color:#ef4444;
    cursor:pointer;
}

#materiel_select{
    border-radius: 20px;
    padding: 6px 14px;
}



#historiqueContent .card{
    border-radius:12px;
    border:1px solid #e5e7eb;
}

#historiqueContent .badge{
    border-radius:20px;
    padding:4px 10px;
}

/* ================= RESPONSIVE ================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

#main-content {
    min-width: 0;
}

.project-left,
.om-left,
.user-header,
.toolbar-left,
.toolbar-right,
.filters,
.users-topbar,
.mission-toolbar,
.page-header,
.custom-modal-footer,
.om-top,
.om-actions {
    min-width: 0;
}

.project-card,
.om-card,
.user-card,
.stat-card,
.mission-item {
    overflow-wrap: anywhere;
}

.toolbar-right,
.users-topbar .filters {
    flex-wrap: wrap;
}

.search-box,
.search-box input {
    max-width: 100%;
}

.modal-dialog {
    max-width: min(100% - 1rem, 800px);
    margin: 0.5rem auto;
}

@media (max-width: 991.98px) {
    .sidebar {
        width: 88px;
        padding: 16px 10px;
    }

    .content,
    .sidebar.collapsed + .content {
        margin-left: 88px;
    }

    .logo-text,
    .menu span,
    .close-btn {
        display: none;
    }

    .sidebar-header {
        justify-content: center;
    }

    .sidebar .menu a {
        justify-content: center;
        padding: 12px;
    }

    .page-header,
    .users-topbar,
    .mission-toolbar {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .toolbar-left,
    .toolbar-right,
    .users-topbar .search-box,
    .users-topbar .filters {
        width: 100%;
    }

    .toolbar-right,
    .users-topbar .filters {
        gap: 8px;
    }

    .project-card,
    .om-card,
    .mission-item {
        gap: 14px;
    }

    .om-card {
        flex-direction: column;
    }

    .om-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .project-card {
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    .sidebar {
        width: 72px;
        padding: 14px 8px;
    }

    .content,
    .sidebar.collapsed + .content {
        margin-left: 72px;
        padding: 16px;
    }

    .page-header {
        margin-bottom: 20px;
        gap: 12px;
    }

    .btn-add-project {
        width: 100%;
        justify-content: center;
    }

    .projects-grid,
    .users-grid {
        grid-template-columns: 1fr;
    }

    .project-card,
    .user-card,
    .stat-card,
    .om-card {
        padding: 16px;
    }

    .project-card,
    .mission-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .project-delete {
        align-self: flex-end;
    }

    .mission-item {
        gap: 8px;
    }

    .mission-item .text-end {
        text-align: left !important;
    }

    .om-left {
        width: 100%;
    }

    .om-top {
        flex-wrap: wrap;
    }

    .om-meta {
        gap: 10px;
    }

    .select-all {
        flex-wrap: wrap;
    }

    .custom-modal {
        padding: 4px;
    }

    .modal-body,
    .custom-modal-header {
        padding-left: 14px;
        padding-right: 14px;
    }

    .custom-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-modal-footer .btn,
    .custom-save-btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .sidebar {
        width: 64px;
    }

    .content,
    .sidebar.collapsed + .content {
        margin-left: 64px;
        padding: 12px;
    }

    .logo-circle {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .search-box input {
        height: 44px;
        font-size: 14px;
    }

    .mission-filter,
    .user-filter {
        width: 100%;
        text-align: center;
    }

    .toolbar-right,
    .users-topbar .filters {
        display: grid;
        grid-template-columns: 1fr;
    }

    .om-actions {
        justify-content: space-between;
    }
}