:root {
  --navy:#061c32;
  --navy2:#0c2946;
  --panel:#102f4d;
  --line:#315575;
  --cyan:#04b8eb;
  --receipt-width:400px;
  --sidebar-width:112px;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:#061b30;
  color:#f3f8ff;
  font:14px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow:hidden;
}

button {
  cursor:pointer;
}

.topbar {
  height:78px;
  background:linear-gradient(90deg,#031529,#08253d 72%,#092b35);
  display:flex;
  align-items:center;
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,#154f7b,#05c5ee,#86d0ad) 1;
  position:relative;
  gap:0;
  z-index:5;
}

.brand {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:240px;
  padding:0 22px;
  font-size:29px;
  font-style:italic;
  font-weight:800;
  white-space:nowrap;
}

.brand img {
  max-width:85px;
  max-height:58px;
  object-fit:contain;
}

.brand small {
  display:block;
  font-size:10px;
  letter-spacing:2.4px;
  font-style:normal;
  text-align:center;
  margin-top:-5px;
}

.top-item {
  display:flex;
  align-items:center;
  gap:13px;
  border-left:1px solid #38617c;
  padding:0 20px;
  min-height:45px;
  white-space:nowrap;
}

.top-item>i,.terminal-connect>i {
  font-size:28px;
}

.top-item b {
  display:block;
  font-size:15px;
}

.top-item small,.terminal-connect small {
  display:block;
  font-size:12px;
  color:#b9d7e8;
}

.status-dot {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#35df58;
  margin-right:6px;
}

.top-user {
  min-width:205px;
}

.top-user select {
  width:175px;
  background:#173957;
  border:0;
  color:#fff;
}

.terminal-connect {
  border:0;
  border-left:1px solid #38617c;
  background:transparent;
  color:#fff;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  min-height:45px;
  white-space:nowrap;
}

.terminal-connect span {
  text-align:left;
}

.top-plants {
  margin-left:auto;
  align-self:stretch;
  min-width:175px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(90deg,#07283a 0%,rgba(5,33,41,.65) 50%,rgba(5,33,41,.45)),url('../assets/plantes-header.jpg') center right/cover;
}

.register-overlay {
  font-size:12px;
  font-weight:700;
  background:rgba(2,19,32,.6);
  padding:7px 9px;
  border-radius:5px;
}

.top-actions {
  display:flex;
  padding:0 10px;
}

.icon-btn {
  border:0;
  color:#fff;
  background:transparent;
  font-size:19px;
  padding:9px;
}

.workspace {
  height:calc(100dvh - 78px);
  display:flex;
  min-height:0;
}

.sidebar {
  width:var(--sidebar-width);
  flex:0 0 var(--sidebar-width);
  background:#071f37;
  border-right:1px solid #173c59;
  padding:12px 8px;
  display:flex;
  flex-direction:column;
  gap:7px;
  overflow-y:auto;
}

.nav-tile {
  border:1px solid #143c5c;
  background:linear-gradient(140deg,#103252,#0a2744);
  color:#fff;
  border-radius:9px;
  min-height:77px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:3px;
  font-weight:650;
  font-size:11px;
}

.nav-tile i {
  font-size:27px;
}

.nav-tile.active,.nav-tile:hover {
  background:linear-gradient(130deg,#20a6db,#076cae);
  border-color:#1db6ee;
}

.pos-main {
  flex:1;
  min-width:0;
  min-height:0;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:radial-gradient(circle at 50% 10%,#103754 0%,#071e34 70%);
}

.search-area {
  position:relative;
  z-index:3;
}

.search-line {
  display:flex;
  gap:9px;
}

.search-input {
  display:flex;
  align-items:center;
  flex:1;
  min-width:210px;
  background:#f7fbff;
  color:#193752;
  border-radius:8px;
  padding:0 9px;
  box-shadow:0 2px 6px #0003;
}

.search-input>i {
  font-size:20px;
}

.search-input input {
  border:0;
  background:transparent;
  box-shadow:none!important;
  font-size:14px;
}

.search-input button {
  background:transparent;
  border:0;
  color:#6d8495;
}

.category-filters {
  display:flex;
  gap:6px;
}

.filter {
  min-width:65px;
  background:linear-gradient(#1c405f,#0e2b49);
  color:#fff;
  border:1px solid #496881;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:7px 6px;
  font-size:11px;
  gap:3px;
}

.filter i {
  font-size:22px;
}

.filter.active {
  background:linear-gradient(#138fba,#075e8f);
  border-color:#35d5f5;
}

.member-bar {
  margin-top:9px;
  display:flex;
  align-items:center;
  gap:9px;
  background:#102f4e;
  border:1px solid #2d5271;
  border-radius:8px;
  padding:7px;
}

.member-bar select {
  flex:1;
  min-width:140px;
}

.member-bar label {
  white-space:nowrap;
}

.member-bar .points {
  width:70px;
}

.small-square {
  background:#087ca4;
  color:#fff;
  border:0;
  border-radius:6px;
  padding:7px 10px;
}

.search-results {
  position:absolute;
  top:54px;
  left:0;
  right:0;
  max-height:240px;
  overflow:auto;
  background:#f8fbff;
  color:#123;
  z-index:20;
  box-shadow:0 10px 30px #0008;
  border-radius:8px;
}

.search-result {
  display:flex;
  justify-content:space-between;
  gap:15px;
  width:100%;
  border:0;
  border-bottom:1px solid #d9e2ea;
  padding:10px 15px;
  text-align:left;
  background:#fff;
}

.search-result:hover {
  background:#d5edff;
}

.cart-panel {
  flex:1;
  min-height:130px;
  display:flex;
  background:#eaf3fa;
  border:1px solid #3d6582;
  border-radius:8px;
  overflow:hidden;
}

.cart-table-wrap {
  overflow:auto;
  flex:1;
  position:relative;
}

.cart-table {
  --bs-table-bg:transparent;
  --bs-table-color:#12283c;
  --bs-table-border-color:#c4d6e4;
}

.cart-table thead {
  position:sticky;
  top:0;
  z-index:1;
  background:#173b5a;
  color:#fff;
}

.cart-table th {
  background:transparent;
  color:#fff;
  white-space:nowrap;
  padding:10px;
}

.cart-table td {
  padding:9px 10px;
  vertical-align:middle;
}

.cart-table tbody tr:nth-child(odd) {
  background:#d4eaff;
}

.cart-table tbody tr:nth-child(even) {
  background:#eef6fc;
}

.qty-control {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
}

.qty-control button {
  border:1px solid #a6c0d6;
  background:#fff;
  width:30px;
  height:31px;
  font-size:18px;
}

.qty-control span {
  display:inline-grid;
  place-items:center;
  background:#fff;
  border-block:1px solid #a6c0d6;
  min-width:34px;
  height:31px;
}

.delete-item {
  border:0;
  background:transparent;
  color:#183a54;
  font-size:17px;
}

.empty-cart {
  position:absolute;
  inset:40px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  color:#66869c;
}

.empty-cart i {
  font-size:44px;
}

.cart-actions {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
}

.cart-actions button {
  border:1px solid #385b77;
  background:linear-gradient(#244763,#15334e);
  border-radius:8px;
  color:#fff;
  padding:10px 4px;
  font-weight:650;
  white-space:nowrap;
}

.cart-actions i {
  font-size:19px;
  margin-right:7px;
}

.summary-area {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:10px;
  min-height:145px;
}

.note-panel,.totals-panel {
  background:linear-gradient(#103251,#0b2843);
  border:1px solid #315674;
  border-radius:9px;
  padding:12px;
}

.note-panel label {
  display:block;
  margin-bottom:7px;
  font-weight:600;
}

.note-panel textarea {
  height:91px;
  resize:none;
  background:#193d5b;
  color:#fff;
  border-color:#6a8ba6;
}

.note-panel textarea::placeholder {
  color:#a8bac9;
}

.totals-panel {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
}

.totals-panel>div {
  display:flex;
  justify-content:space-between;
}

.grand-total {
  border-top:1px solid #5e849c;
  margin-top:4px;
  padding-top:5px;
  font-size:22px;
}

.grand-total strong {
  font-size:29px;
}

.balance-line {
  font-size:11px;
  color:#a6c6d8;
}

.payment-bar {
  display:flex;
  gap:8px;
  min-height:93px;
  align-items:stretch;
}

.amount-box {
  width:205px;
  flex:0 0 205px;
}

.amount-box label {
  display:block;
  font-weight:650;
  margin-bottom:5px;
}

.amount-box .input-group {
  height:59px;
}

.amount-box input {
  font-size:23px;
  font-weight:800;
  text-align:right;
  min-width:0;
}

.amount-box .input-group-text {
  font-weight:700;
}

.amount-box .btn {
  background:#21435f;
  border-color:#54728a;
}

.pay-group {
  flex:1;
  min-width:0;
  display:flex;
  position:relative;
}

.pay-main,.pay-toggle {
  color:#fff;
  border:1px solid #ffffff35;
}

.pay-main {
  flex:1;
  min-width:0;
  border-radius:9px 0 0 9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  font-weight:750;
  padding:7px 1px;
}

.pay-main i {
  font-size:23px;
}

.pay-main small {
  display:block;
  font-size:11px;
  font-weight:500;
}

.pay-toggle {
  width:28px;
  flex:0 0 28px;
  border-radius:0 9px 9px 0;
}

.pay-card {
  background:linear-gradient(#009bc4,#006e9d);
}

.pay-cash {
  background:linear-gradient(#2cbf53,#148335);
}

.pay-klarna {
  background:linear-gradient(#f9a3c9,#e66eaa);
  color:#181b28;
}

.pay-gift {
  background:linear-gradient(#ffca32,#ef9f04);
  color:#192337;
}

.pay-mixed {
  background:linear-gradient(#425b75,#243b56);
}

.receipt-pane {
  width:var(--receipt-width);
  flex:0 0 var(--receipt-width);
  background:#061a2d;
  padding:14px 12px 20px 2px;
  overflow:hidden;
}

.receipt-paper {
  height:100%;
  position:relative;
  background:#f7faff;
  color:#15263c;
  border-radius:9px 9px 0 0;
  filter:drop-shadow(0 4px 8px #0006);
  display:flex;
  flex-direction:column;
}

.receipt-paper:after {
  content:"";
  position:absolute;
  bottom:-10px;
  left:0;
  right:0;
  height:10px;
  background:linear-gradient(135deg,#f7faff 25%,transparent 25%) 0 0/14px 14px repeat-x,linear-gradient(225deg,#f7faff 25%,transparent 25%) 0 0/14px 14px repeat-x;
}

.receipt-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 14px;
  border-bottom:1px solid #dce7f1;
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  color:#55748e;
}

.receipt-top button {
  border:0;
  background:transparent;
  color:#244965;
}

.receipt-paper iframe {
  flex:1;
  width:100%;
  border:0;
  background:white;
}

.dropdown-menu {
  z-index:100;
}

.modal {
  color:#142d42;
}

@media(max-width:1400px) {
  .top-item {
    padding:0 11px;
  }

  .brand {
    min-width:190px;
    font-size:24px;
    padding:0 12px;
  }

  .top-user {
    min-width:170px;
  }

  .top-user select {
    width:145px;
  }

  .category-filters {
    gap:3px;
  }

  .filter {
    min-width:54px;
    font-size:10px;
  }

  .receipt-pane {
    --receipt-width:360px;
  }

  .payment-bar {
    gap:5px;
  }

  .amount-box {
    width:180px;
    flex-basis:180px;
  }

}

@media(max-width:1150px) {
  .top-plants {
    display:none;
  }

  .top-item:nth-of-type(3) {
    display:none;
  }

  .receipt-pane {
    --receipt-width:310px;
  }

  .filter span {
    display:none;
  }

  .filter {
    min-width:40px;
  }

  .cart-actions button {
    font-size:11px;
  }

  .cart-actions i {
    margin-right:2px;
  }

  .pay-main {
    font-size:11px;
  }

  .amount-box {
    width:150px;
    flex-basis:150px;
  }

}

@media(max-width:850px) {
  body {
    overflow:auto;
  }

  .workspace {
    height:auto;
    min-height:calc(100dvh - 78px);
  }

  .sidebar {
    --sidebar-width:76px;
  }

  .nav-tile {
    min-height:64px;
    font-size:9px;
  }

  .nav-tile i {
    font-size:22px;
  }

  .pos-main {
    min-height:850px;
  }

  .receipt-pane {
    display:none;
  }

  .top-user,.terminal-connect {
    display:none;
  }

  .search-line {
    flex-wrap:wrap;
  }

  .category-filters {
    width:100%;
  }

  .filter {
    flex:1;
  }

  .payment-bar {
    flex-wrap:wrap;
  }

  .amount-box {
    width:100%;
    flex-basis:100%;
  }

  .pay-group {
    min-height:70px;
  }

  .summary-area {
    grid-template-columns:1fr;
  }

  .cart-actions {
    grid-template-columns:repeat(3,1fr);
  }

}
/* ==========================================
   TON.FISH POS - Boutons de catégories
   ========================================== */

#filters .filter {
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
    cursor: pointer;
}

/* Survol : effet bleu lumineux */
#filters .filter:hover {
    background-color: rgba(0, 174, 239, 0.18);
    border-color: #00aeef;
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(0, 174, 239, 0.25);
}

/* Catégorie sélectionnée */
#filters .filter.active {
    background-color: #087db8;
    border-color: #00aeef;
    color: #ffffff;
}

/* Survol d'une catégorie déjà sélectionnée */
#filters .filter.active:hover {
    background-color: #0995d8;
    border-color: #40cfff;
}