/* File: assets/css/app.css */

/* ========= UI REFACTOR — MODERNE + DARK MODE (v1) ========= */

:root{
  --gs-bg: #f4f6f9;
  --gs-surface: #ffffff;
  --gs-surface-2: #f8fafc;
  --gs-border: #e5e7eb;
  --gs-text: #111827;
  --gs-text-muted: #6b7280;

  --gs-primary: #4f46e5;
  --gs-primary-2: #6366f1;
  --gs-success: #16a34a;
  --gs-danger: #dc2626;
  --gs-warning: #f59e0b;
  --gs-info: #0ea5e9;

  --gs-radius: 12px;
  --gs-radius-sm: 10px;

  --gs-shadow-sm: 0 4px 10px rgba(0,0,0,.06);
  --gs-shadow: 0 10px 25px rgba(0,0,0,.08);

  --gs-ring: 0 0 0 3px rgba(79,70,229,.18);

  --gs-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

body.dark-mode{
  --gs-bg: #0b0f19;
  --gs-surface: #111827;
  --gs-surface-2: #0f172a;
  --gs-border: #1f2937;
  --gs-text: #e5e7eb;
  --gs-text-muted: #9aa4b2;

  --gs-primary: #7c3aed;
  --gs-primary-2: #8b5cf6;

  --gs-shadow-sm: 0 6px 16px rgba(0,0,0,.45);
  --gs-shadow: 0 18px 40px rgba(0,0,0,.55);

  --gs-ring: 0 0 0 3px rgba(139,92,246,.22);
}

/* Base */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  background: var(--gs-bg);
  color: var(--gs-text);
  font-family: var(--gs-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .25s ease, color .25s ease;
}

a{ color: var(--gs-primary); }
a:hover{ color: var(--gs-primary-2); }

hr{ border-color: var(--gs-border); opacity: 1; }

.text-muted{ color: var(--gs-text-muted) !important; }

/* Navbar (compatible header.php) */
.navbar.bg-dark{
  background: linear-gradient(180deg, rgba(17,24,39,1) 0%, rgba(17,24,39,.96) 100%) !important;
}
.navbar .nav-link{
  color: rgba(255,255,255,.78) !important;
  border-radius: 10px;
  padding: .45rem .7rem;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.navbar .nav-link:hover{
  color: rgba(255,255,255,.95) !important;
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}
.navbar .nav-link.active{
  font-weight: 700;
  color: #fff !important;
  background: rgba(255,255,255,.10);
}

.gs-navbar{ backdrop-filter: blur(10px); }
.gs-brand-logo{
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gs-brand-logo img{
  width: 38px;
  height: 38px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.15);
}
.gs-brand-fallback{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.12);
}

.gs-icon-btn{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Notifications */
.notification-btn{
  position: relative;
  color: rgba(255,255,255,.78);
  margin-right: 10px;
  cursor: pointer;
  transition: .2s ease;
}
.notification-btn:hover{ color: #fff; }

.badge-counter{
  position: absolute;
  top: -6px;
  right: -10px;
  font-size: .65rem;
  padding: 3px 6px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.notif-dropdown{
  width: 340px;
  padding: 0;
  border: 1px solid var(--gs-border);
  border-radius: 14px;
  box-shadow: var(--gs-shadow);
  overflow: hidden;
  background: var(--gs-surface);
}
body.dark-mode .notif-dropdown{
  background: var(--gs-surface);
  border-color: var(--gs-border);
}

.notif-header{
  background: var(--gs-surface-2);
  padding: 10px 14px;
  font-weight: 700;
  font-size: .9rem;
  border-bottom: 1px solid var(--gs-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--gs-text);
}

.notif-item{
  padding: 10px 14px;
  border-bottom: 1px solid var(--gs-border);
  display: block;
  text-decoration: none;
  color: var(--gs-text);
  transition: .15s ease;
  font-size: .9rem;
}
.notif-item:hover{
  background: rgba(99,102,241,.08);
}
.notif-item.unread{
  background: rgba(22,163,74,.08);
  border-left: 3px solid var(--gs-success);
}
.notif-time{
  font-size: .75rem;
  color: var(--gs-text-muted);
  display: block;
  margin-top: 4px;
}

/* Cards */
.card{
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  box-shadow: var(--gs-shadow-sm);
  background: var(--gs-surface);
  overflow: hidden;
}
.card .card-header{
  background: var(--gs-surface-2);
  border-bottom: 1px solid var(--gs-border);
  color: var(--gs-text);
}
.card .card-footer{
  background: var(--gs-surface-2);
  border-top: 1px solid var(--gs-border);
}
body.dark-mode .card{
  box-shadow: var(--gs-shadow-sm);
}

/* Buttons */
.btn{
  border-radius: 12px;
  font-weight: 600;
}
.btn:focus{
  box-shadow: var(--gs-ring) !important;
}
.btn-success{ background-color: var(--gs-success) !important; border-color: var(--gs-success) !important; }
.btn-danger{ background-color: var(--gs-danger) !important; border-color: var(--gs-danger) !important; }
.btn-primary{ background-color: var(--gs-primary) !important; border-color: var(--gs-primary) !important; }
.btn-outline-secondary{
  border-color: rgba(148,163,184,.45) !important;
}
body.dark-mode .btn-outline-secondary{
  border-color: rgba(148,163,184,.25) !important;
  color: rgba(255,255,255,.85) !important;
}

/* Tables */
.table{
  color: var(--gs-text);
  border-color: var(--gs-border);
}
.table thead th{
  background: var(--gs-surface-2);
  color: var(--gs-text);
  border-bottom: 1px solid var(--gs-border) !important;
}
.table tbody td{
  border-color: var(--gs-border) !important;
}
.table-hover tbody tr:hover{
  background: rgba(99,102,241,.06) !important;
}
body.dark-mode .table-hover tbody tr:hover{
  background: rgba(124,58,237,.14) !important;
}

/* Forms */
.form-label{
  font-weight: 700;
}
.form-control,
.form-select{
  border-radius: 12px;
  border-color: var(--gs-border);
  background: var(--gs-surface);
  color: var(--gs-text);
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.form-control::placeholder{ color: rgba(107,114,128,.8); }
body.dark-mode .form-control::placeholder{ color: rgba(154,164,178,.75); }

.form-control:focus,
.form-select:focus{
  border-color: rgba(99,102,241,.5);
  box-shadow: var(--gs-ring);
}

body.dark-mode .form-control,
body.dark-mode .form-select{
  background: #0b1220;
  border-color: #233047;
  color: var(--gs-text);
}

.input-group-text{
  border-radius: 12px;
  border-color: var(--gs-border);
  background: var(--gs-surface-2);
  color: var(--gs-text);
}
body.dark-mode .input-group-text{
  background: #0f172a;
  border-color: #233047;
}

/* Dropdowns / modals */
.dropdown-menu{
  border-radius: 14px;
  border: 1px solid var(--gs-border);
  box-shadow: var(--gs-shadow);
  background: var(--gs-surface);
}
.dropdown-item{
  color: var(--gs-text);
}
.dropdown-item:hover{
  background: rgba(99,102,241,.08);
}
body.dark-mode .dropdown-item:hover{
  background: rgba(124,58,237,.14);
}

.modal-content{
  border-radius: 16px;
  border: 1px solid var(--gs-border);
  background: var(--gs-surface);
  color: var(--gs-text);
}
.modal-header,
.modal-footer{
  border-color: var(--gs-border);
  background: var(--gs-surface-2);
}

/* Alerts */
.alert{
  border-radius: 14px;
  border: 1px solid var(--gs-border);
}

/* Badges */
.badge{
  border-radius: 999px;
}

/* A4 page (création/modif/aperçu) */
.a4-page{
  background: #ffffff;
  color: #111827;
  border-radius: 14px;
  box-shadow: var(--gs-shadow);
  border: 1px solid rgba(229,231,235,.9);
}
body.dark-mode .a4-page{
  background: var(--gs-surface);
  color: var(--gs-text);
  border-color: rgba(31,41,55,.9);
  box-shadow: 0 0 22px rgba(0,0,0,.55) !important;
}

/* List group */
.list-group-item{
  border-color: var(--gs-border);
  background: var(--gs-surface);
  color: var(--gs-text);
}
body.dark-mode .list-group-item{
  background: var(--gs-surface);
}

/* Utility polish */
.shadow-soft{ box-shadow: var(--gs-shadow-sm) !important; }
.rounded-2xl{ border-radius: 18px !important; }

@media (max-width: 991.98px){
  .notif-dropdown{
    width: min(92vw, 360px);
  }
  .navbar .nav-link{
    margin-bottom: 6px;
  }
}