/* KESLES Brand Tokens */
:root {
  --ma-white:         #F4F9FF;
  --bubbles:          #E6FFFC;
  --luminescent-sky:  #CCFFFA;
  --fresh-turquoise:  #40E0D0;
  --clear-skies:      #E6F7FF;
  --ganon-blue:       #A3E0FF;
  --pervenche:        #009AE8;   /* primary */
  --sea-paint:        #00517A;   /* dark primary */
  --oxford:           #001D2B;   /* text */
  --pico-orange:      #FFA200;   /* accent */
}

html, body { background: var(--ma-white); color: var(--oxford); font-family: 'Inter', system-ui, sans-serif; }

.brand-primary   { color: var(--pervenche); }
.bg-brand-primary{ background-color: var(--pervenche); }
.bg-brand-dark   { background-color: var(--oxford); }
.bg-brand-accent { background-color: var(--pico-orange); }
.text-brand-dark { color: var(--oxford); }
.text-brand-muted{ color: #5a7180; }
.border-brand    { border-color: var(--clear-skies); }

.btn-primary {
  background: var(--pervenche); color: #fff; padding: .55rem 1rem; border-radius: .5rem;
  font-weight: 600; transition: background .15s;
}
.btn-primary:hover { background: var(--sea-paint); }

.btn-accent {
  background: var(--pico-orange); color: var(--oxford); padding: .55rem 1rem; border-radius: .5rem; font-weight: 600;
}
.btn-accent:hover { filter: brightness(0.95); }

.btn-secondary {
  background: #fff; color: var(--oxford); padding: .5rem .9rem; border-radius: .5rem;
  border: 1px solid #d8e6ee; font-weight: 500;
}
.btn-secondary:hover { background: var(--clear-skies); }

.btn-danger {
  background: #fff; color: #b42318; padding: .4rem .75rem; border-radius: .5rem;
  border: 1px solid #fda29b; font-weight: 500; font-size: .85rem;
}
.btn-danger:hover { background: #fee4e2; }

.input {
  width: 100%; border: 1px solid #d8e6ee; border-radius: .5rem; padding: .55rem .75rem;
  background: #fff; outline: none; transition: border .15s, box-shadow .15s;
}
.input:focus { border-color: var(--pervenche); box-shadow: 0 0 0 3px rgba(0,154,232,.15); }

.card {
  background: #fff; border-radius: .875rem; border: 1px solid var(--clear-skies);
  box-shadow: 0 1px 2px rgba(0,29,43,.04);
}

.sidebar-link {
  display: flex; align-items: center; gap: .75rem; padding: .6rem .85rem; border-radius: .5rem;
  color: #c5dae6; font-weight: 500; transition: background .15s, color .15s;
}
.sidebar-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-link.active { background: var(--pervenche); color: #fff; }
.sidebar-link .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity:.6;}

.badge { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600;}
.badge-green { background: #D1FADF; color: #027A48; }
.badge-red   { background: #FEE4E2; color: #B42318; }
.badge-blue  { background: var(--clear-skies); color: var(--sea-paint); }
.badge-amber { background: #FEF0C7; color: #B54708; }

.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
  color: #5a7180; font-weight: 600; padding: .75rem 1rem; background: var(--clear-skies); }
.table td { padding: .8rem 1rem; border-top: 1px solid var(--clear-skies); font-size: .9rem; }
.table tr:hover td { background: #fafdff; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,29,43,.55); display: none; z-index:50; }
.modal-overlay.open { display: flex; align-items: center; justify-content: center; }
.modal { background: #fff; border-radius: 1rem; width: 100%; max-width: 560px; padding: 1.5rem; max-height: 90vh; overflow-y:auto; }

.toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap:.5rem;}
.toast { padding: .7rem 1rem; border-radius: .5rem; color:#fff; font-weight: 500; box-shadow: 0 4px 16px rgba(0,29,43,.2); }
.toast-success { background: #039855; }
.toast-error   { background: #b42318; }
.toast-info    { background: var(--pervenche); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c5dae6; border-radius: 4px;}