:root{
  --ff-bg:#eef6f4;
  --ff-surface:#ffffff;
  --ff-surface-soft:#f8fafc;
  --ff-text:#17212b;
  --ff-muted:#64748b;
  --ff-line:#d9e2ea;
  --ff-green:#178455;
  --ff-blue:#2563eb;
  --ff-cyan:#0891b2;
  --ff-violet:#7c3aed;
  --ff-amber:#d97706;
  --ff-red:#dc2626;
  --ff-pink:#db2777;
  --ff-shadow:0 14px 30px rgba(15,23,42,.08);
  --ff-shadow-sm:0 8px 18px rgba(15,23,42,.06);
}

html{
  background:var(--ff-bg);
}

body{
  margin:0;
  color:var(--ff-text);
  background:
    linear-gradient(180deg, rgba(8,145,178,.10), transparent 310px),
    linear-gradient(135deg, rgba(23,132,85,.10), rgba(217,119,6,.07) 50%, rgba(124,58,237,.06)),
    var(--ff-bg) !important;
  font-family:Tahoma, "Segoe UI", system-ui, -apple-system, sans-serif !important;
  line-height:1.55;
}

.fish-nav + .wrap,
.fish-nav + .container,
.fish-nav + .container-fluid{
  margin-top:18px;
}

.wrap,
.container{
  width:min(100% - 24px, var(--page-max, 1280px));
}

.wrap{
  margin-left:auto !important;
  margin-right:auto !important;
  padding:18px 0 28px !important;
}

.container.py-4{
  padding-top:18px !important;
  padding-bottom:28px !important;
}

h1,h2,h3,h4,h5{
  color:#111827;
  font-weight:850;
}

h1,
h2,
h3{
  letter-spacing:0;
}

h3{
  font-size:clamp(1.25rem, 1.1rem + .6vw, 1.75rem);
}

.wrap > h1:first-child,
.wrap > h2:first-child,
.wrap > h3:first-child,
.container > h1:first-child,
.container > h2:first-child,
.container > h3:first-child{
  display:flex;
  align-items:center;
  gap:10px;
  color:#0f766e;
  padding:8px 0 4px;
}

.wrap > h1:first-child::before,
.wrap > h2:first-child::before,
.wrap > h3:first-child::before,
.container > h1:first-child::before,
.container > h2:first-child::before,
.container > h3:first-child::before{
  content:"";
  width:10px;
  align-self:stretch;
  min-height:32px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--ff-green), var(--ff-blue));
  box-shadow:0 8px 18px rgba(23,132,85,.20);
}

.text-muted,
.small.text-muted,
.kpi-title,
.kpi-sub,
.paid-note{
  color:var(--ff-muted) !important;
}

.card,
.x-card,
.cardx,
.paid-box,
.kpi-box,
.kpi .box,
.stat,
.stat-card,
.quick-card,
.menu-card,
.sticky-summary,
.table-wrap{
  background:rgba(255,255,255,.96) !important;
  border:1px solid var(--ff-line) !important;
  border-radius:8px !important;
  box-shadow:var(--ff-shadow-sm) !important;
}

.card,
.x-card,
.cardx,
.paid-box,
.kpi-box,
.kpi .box,
.stat,
.stat-card,
.quick-card,
.menu-card{
  position:relative;
}

.card::before,
.x-card::before,
.cardx::before,
.paid-box::before,
.kpi-box::before,
.kpi .box::before,
.stat::before,
.stat-card::before,
.quick-card::before,
.menu-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg, var(--ff-green), var(--ff-blue));
  opacity:.85;
}

.card:nth-of-type(4n+1)::before,
.x-card:nth-of-type(4n+1)::before,
.cardx:nth-of-type(4n+1)::before,
.kpi-box:nth-of-type(4n+1)::before,
.stat-card:nth-of-type(4n+1)::before,
.quick-card:nth-of-type(4n+1)::before,
.menu-card:nth-of-type(4n+1)::before{
  background:linear-gradient(180deg, var(--ff-green), #22c55e);
}

.card:nth-of-type(4n+2)::before,
.x-card:nth-of-type(4n+2)::before,
.cardx:nth-of-type(4n+2)::before,
.kpi-box:nth-of-type(4n+2)::before,
.stat-card:nth-of-type(4n+2)::before,
.quick-card:nth-of-type(4n+2)::before,
.menu-card:nth-of-type(4n+2)::before{
  background:linear-gradient(180deg, var(--ff-blue), var(--ff-cyan));
}

.card:nth-of-type(4n+3)::before,
.x-card:nth-of-type(4n+3)::before,
.cardx:nth-of-type(4n+3)::before,
.kpi-box:nth-of-type(4n+3)::before,
.stat-card:nth-of-type(4n+3)::before,
.quick-card:nth-of-type(4n+3)::before,
.menu-card:nth-of-type(4n+3)::before{
  background:linear-gradient(180deg, var(--ff-amber), #f59e0b);
}

.card:nth-of-type(4n+4)::before,
.x-card:nth-of-type(4n+4)::before,
.cardx:nth-of-type(4n+4)::before,
.kpi-box:nth-of-type(4n+4)::before,
.stat-card:nth-of-type(4n+4)::before,
.quick-card:nth-of-type(4n+4)::before,
.menu-card:nth-of-type(4n+4)::before{
  background:linear-gradient(180deg, var(--ff-violet), var(--ff-pink));
}

.card,
.x-card,
.cardx,
.paid-box,
.kpi-box,
.kpi .box,
.stat,
.stat-card,
.quick-card{
  overflow:hidden;
}

.card:hover,
.x-card:hover,
.cardx:hover,
.menu-card:hover,
.quick-card:hover{
  border-color:rgba(37,99,235,.28) !important;
  box-shadow:var(--ff-shadow) !important;
}

.card-body{
  padding:18px !important;
}

.hero{
  border-radius:8px !important;
  background:
    linear-gradient(135deg, rgba(23,132,85,.18), rgba(8,145,178,.13) 44%, rgba(37,99,235,.10) 68%, rgba(217,119,6,.10)),
    var(--ff-surface) !important;
  box-shadow:0 18px 44px rgba(15,23,42,.08) !important;
}

.menu-card{
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.menu-card:hover{
  transform:translateY(-2px) !important;
}

.menu-ico{
  border-radius:8px !important;
  background:linear-gradient(135deg, #dcfce7, #e0f2fe) !important;
  color:#0f766e;
}

.form-control,
.form-select,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea{
  background:#fff !important;
}

.form-label{
  color:#334155;
  font-size:.9rem;
  font-weight:750;
  margin-bottom:.35rem;
}

.form-control,
.form-select,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea{
  border-color:#cbd5e1 !important;
  border-radius:8px !important;
  color:var(--ff-text);
  min-height:40px;
  box-shadow:none !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus{
  border-color:var(--ff-blue) !important;
  box-shadow:0 0 0 .2rem rgba(37,99,235,.14) !important;
}

.btn,
button.btn,
a.btn{
  border-radius:8px !important;
  font-weight:800;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn-success{
  background:#178455 !important;
  border-color:#178455 !important;
  box-shadow:0 6px 14px rgba(23,132,85,.16);
}

.btn-primary{
  background:#2563eb !important;
  border-color:#2563eb !important;
  box-shadow:0 6px 14px rgba(37,99,235,.16);
}

.btn-warning{
  background:#f59e0b !important;
  border-color:#f59e0b !important;
  color:#111827 !important;
  box-shadow:0 6px 14px rgba(245,158,11,.18);
}

.btn-danger{
  background:#dc2626 !important;
  border-color:#dc2626 !important;
  box-shadow:0 6px 14px rgba(220,38,38,.16);
}

.btn-info{
  background:#0891b2 !important;
  border-color:#0891b2 !important;
  color:#fff !important;
  box-shadow:0 6px 14px rgba(8,145,178,.16);
}

.btn-outline-primary{
  color:#1d4ed8 !important;
  border-color:#93c5fd !important;
  background:#eff6ff !important;
}

.btn-outline-success{
  color:#166534 !important;
  border-color:#86efac !important;
  background:#f0fdf4 !important;
}

.btn-outline-secondary{
  color:#334155 !important;
  border-color:#cbd5e1 !important;
  background:#f8fafc !important;
}

.btn-outline-danger{
  color:#b91c1c !important;
  border-color:#fecaca !important;
  background:#fff1f2 !important;
}

.alert{
  border-radius:8px !important;
  border-width:1px;
  box-shadow:var(--ff-shadow-sm);
}

.alert-success{
  background:#ecfdf3 !important;
  border-color:#bbf7d0 !important;
  color:#14532d !important;
}

.alert-warning{
  background:#fffbeb !important;
  border-color:#fde68a !important;
  color:#78350f !important;
}

.alert-danger{
  background:#fff1f2 !important;
  border-color:#fecdd3 !important;
  color:#7f1d1d !important;
}

.alert-info{
  background:#ecfeff !important;
  border-color:#a5f3fc !important;
  color:#164e63 !important;
}

.table-responsive{
  border-radius:8px;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}

table{
  color:var(--ff-text);
}

.wrap table,
.container table{
  background:#fff;
}

table th,
.table th{
  background:linear-gradient(180deg,#dff7ea 0%,#dbeafe 100%) !important;
  color:#0f172a;
  font-weight:850;
  border-bottom:1px solid #cbd5e1 !important;
}

table td,
table th,
.table td,
.table th{
  padding:.68rem .72rem !important;
  border-color:#e2e8f0 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > *,
tbody tr:nth-child(odd) td{
  background-color:#f8fafc;
}

tbody tr:nth-child(4n+1) td{
  background-color:#f0fdf4;
}

tbody tr:nth-child(4n+2) td{
  background-color:#eff6ff;
}

tbody tr:nth-child(4n+3) td{
  background-color:#fff7ed;
}

tbody tr:nth-child(4n+4) td{
  background-color:#f5f3ff;
}

.table-hover tbody tr:hover td,
tbody tr:hover td{
  background-color:#eef6ff !important;
}

tfoot th,
tfoot td{
  background:#0f766e !important;
  color:#fff !important;
  border-color:#0f766e !important;
  font-weight:900;
}

.kpi-value,
.kpi-val,
.kpi .val,
.big-number,
.quick-num,
.stat-card .num{
  color:#0f172a;
  font-weight:900;
}

.money-red,
.text-danger{
  color:var(--ff-red) !important;
}

.money-green,
.text-success{
  color:var(--ff-green) !important;
}

.money-warn{
  color:var(--ff-amber) !important;
}

.badge{
  border-radius:999px;
  font-weight:800;
}

.text-bg-primary,
.badge.bg-primary{
  background:#2563eb !important;
}

.text-bg-success,
.badge.bg-success{
  background:#178455 !important;
}

.text-bg-warning,
.badge.bg-warning{
  background:#f59e0b !important;
  color:#111827 !important;
}

.text-bg-danger,
.badge.bg-danger{
  background:#dc2626 !important;
}

.text-bg-info,
.badge.bg-info{
  background:#0891b2 !important;
  color:#fff !important;
}

.modal-content{
  border:0 !important;
  border-radius:8px !important;
  overflow:hidden;
  box-shadow:0 26px 70px rgba(15,23,42,.24);
}

.modal-header{
  background:linear-gradient(135deg,#e0f2fe,#dcfce7) !important;
  border-bottom:1px solid #bfdbfe !important;
}

.modal-footer{
  background:#f8fafc !important;
}

.list-group-item{
  border-color:#e2e8f0 !important;
}

.list-group-item:nth-child(4n+1){
  background:#f0fdf4;
}

.list-group-item:nth-child(4n+2){
  background:#eff6ff;
}

.list-group-item:nth-child(4n+3){
  background:#fff7ed;
}

.list-group-item:nth-child(4n+4){
  background:#f5f3ff;
}

.sticky-summary{
  position:sticky;
  top:86px;
  z-index:20;
  padding:14px !important;
  backdrop-filter:blur(10px);
}

.row-paid td{
  background:#ecfdf3 !important;
}

.row-partial td{
  background:#fff7db !important;
}

.row-unpaid td{
  background:#fff0f0 !important;
}

.paid-box.due{
  background:#fff6f6 !important;
  border-color:#fecaca !important;
}

.paid-box.ok{
  background:#f0fdf4 !important;
  border-color:#bbf7d0 !important;
}

@media (max-width:768px){
  html{
    -webkit-text-size-adjust:100%;
  }

  .wrap,
  .container{
    width:min(100% - 16px, 100%);
  }

  .wrap{
    padding-top:12px !important;
  }

  .card-body,
  .x-card,
  .cardx{
    padding:14px !important;
  }

  .btn,
  button.btn,
  a.btn{
    min-height:42px;
    white-space:normal;
  }

  .form-control,
  .form-select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea{
    font-size:16px;
  }

  .row{
    --bs-gutter-x:.75rem;
  }

  .table-responsive,
  .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  table td,
  table th,
  .table td,
  .table th{
    padding:.58rem .62rem !important;
    font-size:.92rem;
  }

  .sticky-summary{
    top:76px;
  }
}

@media print{
  body{
    background:#fff !important;
  }

  .card,
  .x-card,
  .cardx,
  .paid-box,
  .stat,
  .table-wrap{
    box-shadow:none !important;
  }
}