@import url("mobile.css");

:root{
  --primary:#16a34a;
  --primary-hover:#15803d;
  --primary-soft:#ecfdf3;
  --accent:#22c55e;
  --bg:#f5f8f5;
  --surface:#ffffff;
  --surface-soft:#f8fbf8;
  --text:#0f172a;
  --text-muted:#64748b;
  --border:#e4e8e2;
  --border-strong:#d7dfd8;
  --shadow:0 12px 34px rgba(15,23,42,.08);
  --shadow-lg:0 20px 48px rgba(15,23,42,.12);
  --radius:20px;
  --radius-sm:14px;
  --radius-lg:24px;
  --radius-pill:999px;
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:20px;
  --space-5:24px;
  --space-6:32px;
  --input-height:50px;
  --button-height:48px;
  --card-padding:20px;
  --font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --transition: all .22s ease;
  --focus: rgba(22,163,74,.16);
  --danger:#ef4444;
  --success:#22c55e;
  --bg-dark:#0f172a;
  --surface-dark:#111827;
  --text-dark:#f8fafc;
  --muted-dark:#94a3b8;
}

html{
  min-width:0;
  font-family: var(--font-family);
  font-size:16px;
  line-height:1.5;
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  min-width:0;
  margin:0;
  padding:0;
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}

a{
  color:var(--primary);
  text-decoration:none;
  transition:color .2s ease;
}

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

::selection{
  background: rgba(22,163,74,.18);
  color: var(--text);
}

.app{
    display:flex;
    min-height:100vh;
    background:var(--bg);
}

.app{
    flex-direction:column;
}

.main{
    flex:1;
    margin-left:280px;
    padding:calc(env(safe-area-inset-top) + 24px) 24px calc(88px + env(safe-area-inset-bottom));
    min-width:0;
    background:var(--bg);
}

@media (max-width: 900px) {
    .main{
        margin-left:0;
        padding:calc(env(safe-area-inset-top) + 18px) 16px calc(88px + env(safe-area-inset-bottom));
    }

    .stat-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:14px;
    }

    .stat-card {
        min-height:136px;
        padding:18px 16px;
    }
}

@media (max-width: 480px) {
    .stat-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px;
        align-items:stretch;
        grid-auto-rows:1fr;
    }

    .stat-card {
        gap:10px;
        padding:14px 12px;
        border-radius:18px;
        min-height:128px;
        height:100%;
    }

    .stat-icon {
        width:40px;
        height:40px;
        border-radius:12px;
    }

    .stat-icon svg {
        width:18px;
        height:18px;
    }

    .stat-card__label {
        font-size:.68rem;
        letter-spacing:.06em;
    }

    .stat-card__value {
        margin-top:8px;
        font-size:1.65rem;
    }

    .stat-card__hint {
        font-size:.76rem;
    }

    #offlineSyncLast {
        font-size:.72rem;
    }
}

@media (max-width: 390px) {
    .stat-grid {
        gap:8px;
        align-items:stretch;
        grid-auto-rows:1fr;
    }

    .stat-card {
        padding:12px 10px;
        min-height:120px;
        height:100%;
    }

    .stat-card__label {
        font-size:.62rem;
    }

    .stat-card__value {
        font-size:1.45rem;
    }

    .stat-card__hint {
        font-size:.7rem;
    }
}

@media (max-width: 360px) {
    .stat-grid {
        gap:8px;
        align-items:stretch;
        grid-auto-rows:1fr;
    }

    .stat-card {
        padding:10px 8px;
        gap:7px;
        min-height:116px;
        height:100%;
    }

    .stat-card__label {
        font-size:.56rem;
        letter-spacing:.05em;
        font-weight:700;
    }

    .stat-card__value {
        font-size:1.22rem;
        font-weight:750;
        margin-top:6px;
    }

    .stat-card__hint {
        font-size:.64rem;
        line-height:1.3;
    }
}
/* ==================================
   FOUNDER SYSTEM CONSOLE
   ================================== */

.founder-console-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.founder-console-hero {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 18px;
  align-items: stretch;
}

.founder-console-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.97), rgba(246,255,249,0.96));
  border: 1px solid rgba(22,163,74,0.14);
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(15,23,42,.08);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.founder-console-card .panel-head {
  padding: 18px 20px 0;
  border-bottom: none;
}

.founder-console-card .panel-body {
  padding: 0 20px 20px;
}

.founder-console-hero .founder-console-card {
  min-height: 220px;
}

.console-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  background: rgba(22,163,74,.1);
  color: var(--primary);
  border: 1px solid rgba(22,163,74,.16);
}

.console-status-chip::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(22,163,74,.12);
}

.console-status-chip.healthy { color: #15803d; background: rgba(34,197,94,.12); }
.console-status-chip.warning { color: #a16207; background: rgba(250,204,21,.16); }
.console-status-chip.critical { color: #b91c1c; background: rgba(248,113,113,.16); }

.console-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.console-metric {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(22,163,74,.12);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 112px;
}

.console-metric strong {
  font-size: 20px;
  color: var(--text);
}

.console-metric span {
  font-size: 13px;
  color: var(--text-muted);
}

.console-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.console-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(248,251,248,.8);
  border: 1px solid rgba(22,163,74,.08);
  border-radius: 14px;
}

.console-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.console-table th,
.console-table td {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(22,163,74,.12);
  text-align: left;
}

.console-table th {
  color: var(--text-muted);
  font-weight: 700;
}

.console-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.console-btn {
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  box-shadow: 0 10px 20px rgba(22,163,74,.2);
}

.console-btn.secondary {
  background: rgba(22,163,74,.1);
  color: var(--primary);
  box-shadow: none;
}

.console-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.console-badge.success { background: rgba(34,197,94,.12); color: #15803d; }
.console-badge.warning { background: rgba(250,204,21,.16); color: #a16207; }
.console-badge.critical { background: rgba(248,113,113,.16); color: #b91c1c; }

.console-skeleton {
  display: grid;
  gap: 10px;
}

.console-skeleton span {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(226,232,240,.7), rgba(248,250,252,.9), rgba(226,232,240,.7));
  background-size: 200% 100%;
  animation: consolePulse 1.2s infinite linear;
}

@keyframes consolePulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 1100px) {
  .founder-console-hero { grid-template-columns: 1fr; }
  .console-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .console-grid { grid-template-columns: 1fr; }
}

body {
    overflow-x: hidden;
}

body.drawer-open {
    overflow: hidden;
}

.app{
    display:flex;
    min-height:100vh;
    background:var(--bg);
}

.sidebar{
    width:280px;
    min-width:280px;
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    overflow-x:hidden;
    overflow-y:auto;
    background: #166543 ;
    border-right:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(24px);
    border-radius:0 32px 32px 0;
    box-shadow:0 24px 50px rgba(15,23,42,.14);
    z-index:130;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
.sidebar-logo{
    font-size:28px;
    font-weight:600;
    padding:10px 12px;
    margin-bottom:24px;
}
.main{
    flex:1;
    margin-left:280px;
    padding:30px;
    justify-content: center;
    display:flex;
    flex-direction:column;
    min-width:0;
    background:var(--bg);
}

.topbar{
    position:sticky;
    top:0;
    z-index:1000;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    min-height:72px;
    width:100%;
    box-sizing:border-box;
    padding:calc(env(safe-area-inset-top) + 12px) 18px 14px;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(226,232,240,.75);
    border-radius:24px;
    box-shadow:0 10px 30px rgba(15,23,42,.08);
    backdrop-filter:blur(20px);
    margin-bottom:22px;
}

.topbar-left{
    display:flex;
    align-items:center;
    gap:16px;
    flex:1;
    min-width:0;
}

.appbar-brand {
    display:none;
    align-items:center;
    gap:10px;
    min-width:0;
    color:var(--text);
    font-weight:700;
    font-size:15px;
    white-space:nowrap;
    overflow:visible;
    text-overflow:ellipsis;
}

.appbar-brand img {
    width:32px;
    height:32px;
    border-radius:10px;
    object-fit:contain;
}

.appbar-brand span {
    display:inline-block;
    max-width:140px;
    overflow:visible;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.topbar-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
    flex-wrap:nowrap;
}

.menu-toggle{
    border:0;
    border-radius:18px;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(22,163,74,.12);
    color:var(--primary);
    cursor:pointer;
    font-size:18px;
    box-shadow:0 12px 24px rgba(15,23,42,.1);
}

.topbar-desktop-shell,
.topbar-mobile-shell {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:12px;
}

.topbar-mobile-shell {
    display:none;
}

.content{
    flex:1;
    padding:0 0 24px;
    background:transparent;
}

.content h1{
    margin:0 0 12px;
    font-size:28px;
    font-weight:800;
    line-height:1.15;
    letter-spacing:-0.02em;
    color:#0f172a;
}

.content h2{
    margin:0 0 10px;
    font-size:22px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:-0.01em;
    color:#0f172a;
}

.content .card{
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    border:1px solid var(--border);
}

.content .row{
    display:grid;
    gap:12px;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    align-items:center;
}

.cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:18px;
    margin-top:20px;
}
.nav{
    list-style:none;
    padding:14px 14px 12px;
    margin:0;
}

.nav li{
    margin-bottom:8px;
}

.nav-link{
    display:flex;
    align-items:center;
    height:48px;
    padding:0 18px;
    border-radius:14px;
    color:#fff;
    transition:all .25s ease;
    font-family:Inter, Poppins, sans-serif;
    font-size:15px;
    font-weight:400;
    text-decoration:none;
    letter-spacing:-0.01em;
    white-space:nowrap;
}

.nav-link:hover{
    background:rgba(31, 31, 31, 0.06);
    transform:translateX(3px);
}

.nav-link.active{
    background:linear-gradient(135deg, var(--primary), var(--accent));
    color:#fff;
    box-shadow:0 12px 28px rgba(22,163,74,.22);
}

.sidebar .brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 16px 14px;
    margin:14px 14px 10px;
    border-radius:16px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 8px 22px rgba(0,0,0,.10);
}

.sidebar .brand-logo{
    width:36px;
    height:36px;
    flex-shrink:0;
    padding:10px;
    border-radius:14px;
    background:rgb(251, 253, 252);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
}

.sidebar .brand-logo img{
    width:100%;
    height:100%;
    background:transparent;
    border-radius:10px;
    object-fit:contain;
}

.sidebar .brand-text{
    min-width:0;
}

.sidebar .brand-text h1{
    font-size:21px;
    margin:0 0 2px;
    letter-spacing:0;
    font-weight:800;
    color:#fff;
    font-family:Inter, Poppins, sans-serif;
    line-height:1.15;
}

.sidebar .brand-text p{
    color: lightgray;
    margin:4px 0 0;
    font-size:10px;
    line-height:1.4;
    font-weight:100;
    font-family:Inter, Poppins, sans-serif;
    letter-spacing:0.01em;
}

.topbar-left{
    display:flex;
    align-items:center;
    gap:16px;
    flex:1;
    min-width:0;
}

.topbar-right{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
    min-height:0;
}

.topbar-right .btn,
.topbar-right .btn.secondary,
.topbar-right .btn.primary {
    min-height:40px;
    padding:0 14px;
    border-radius:var(--radius-pill);
    border:1px solid var(--border);
    background:var(--surface-soft);
    color:var(--text);
    box-shadow:none;
    font-weight:600;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.topbar-right .btn.primary {
    background:linear-gradient(135deg, var(--primary), var(--accent));
    color:#fff;
    border-color:var(--primary);
}

.topbar-right .btn.secondary:hover,
.topbar-right .btn.primary:hover {
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(22,163,74,.16);
}

.topbar-left h2{
    margin:0;
    font-size:20px;
    font-weight:700;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.menu-toggle{
    border:0;
    border-radius:var(--radius-sm);
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--primary-soft);
    color:var(--primary);
    cursor:pointer;
    font-size:18px;
    box-shadow:0 6px 16px rgba(22,163,74,.12);
}
.topbar-search{
    width:420px;
    max-width:100%;
}

.topbar-search input{
    width:100%;
    height:46px;
    border:none;
    background:#F3F4F6;
    border-radius:14px;
    padding:0 18px;
    color:var(--text);
}
.global-search{
    width:320px;
    height:44px;
    border:none;
    border-radius:14px;
    padding:0 16px;
    background:#F3F4F6;
    color:var(--text);
}
.sidebar-account{
    margin-top:8px;
    padding:12px 14px 14px;
    border-top:1px solid rgba(255,255,255,.08);
}

.sidebar-account-title{
    font-size:12px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:rgba(255,255,255,.58);
    margin:6px 8px 10px;
    font-weight:700;
}

.user-chip{
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 12px;
    border-radius:999px;
    background:#fff;
    box-shadow:0 8px 20px rgba(15,23,42,.05);
    min-height:44px;
    flex-shrink:0;
}

.topbar-profile-menu{
    position:relative;
    flex-shrink:0;
}

.topbar-more-btn {
    width:40px;
    height:40px;
    border:none;
    border-radius:999px;
    background:#f3f6ff;
    color:var(--primary);
    font-size:22px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(15,23,42,.05);
}

.topbar-more-menu{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    min-width:240px;
    max-width:min(90vw, 320px);
    display:grid;
    gap:6px;
    padding:8px;
    border-radius:18px;
    background:#fff;
    border:1px solid rgba(226,232,240,.9);
    box-shadow:0 18px 50px rgba(15,23,42,.12);
    z-index:1200;
}

.topbar-more-menu[hidden]{
    display:none;
}

.topbar-more-link{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:10px 12px;
    border-radius:12px;
    color:var(--text);
    text-decoration:none;
}

.topbar-more-link:hover{
    background:#f3f8f6;
    text-decoration:none;
}

.topbar-more-link-title{
    font-size:14px;
    font-weight:700;
}

.topbar-more-link-meta{
    font-size:11px;
    color:var(--muted);
}

.mobile-topbar-profile-menu .topbar-more-menu{
    right:0;
    left:auto;
    min-width:min(78vw, 280px);
    max-width:min(86vw, 280px);
}

.user-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
    line-height:1.1;
}

@media (max-width: 900px){
    .sidebar{
        transform:translateX(-100%);
        transition:transform .25s ease;
        border-radius:0 24px 24px 0;
        box-shadow:0 20px 50px rgba(15,23,42,.28);
    }
    .sidebar.open{transform:translateX(0);} 
    .main{margin-left:0;padding:18px;}
    .topbar{padding:0 16px;}
    .topbar-left{gap:12px;}
    .global-search{width:100%;max-width:240px;}
}

@media (max-width: 768px){
    .main {
        padding: 0 16px calc(88px + env(safe-area-inset-bottom));
    }

    .topbar {
        margin-bottom: 0;
    }

    .content {
        padding-top: 0;
    }
}

@media (max-width: 640px){
    .main{padding:14px;}
    .topbar{width:calc(100% + 28px);margin:0 -14px 10px;padding:12px 14px;height:auto;min-height:72px;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;}
    .topbar-left,.topbar-right{width:auto;flex:0 0 auto;}
    .topbar-left{gap:10px;}
    .topbar-right{flex-wrap:wrap;justify-content:flex-end;}
    .global-search{max-width:none;width:100%;}
    .user-chip{width:100%;justify-content:center;}
    .appbar-brand{display:flex;align-items:center;gap:10px;}
    .appbar-brand span{font-size:14px;max-width:100px;}
}

.avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    background:linear-gradient(135deg, #299566 0%, #16534a 100%);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    box-shadow:0 10px 22px rgba(37,99,235,.24);
}

.user-info{

    display:flex;
    flex-direction:column;
}

.user-info .name{
    font-weight:700;
    color:#0f172a;
}

.user-info .role{
    color:#64748b;
    font-size:13px;
}

.footer{
    text-align:center;
    padding:18px 16px;
    color:#64748b;
    font-size:13px;
    border-top:1px solid #E2E8F0;
    background:#fff;
    border-radius:16px 16px 0 0;
    margin-top:18px;
}
/*dashboard*/

.card{

border-radius:20px;

padding:24px;

background:#fff;

border:1px solid #e5e7eb;
}

.farmer-card{
    background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%);
    border:1px solid #e5e7eb;
    border-radius:20px;
    padding:18px;
    box-shadow:0 12px 32px rgba(15,23,42,.06);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.farmer-card:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 40px rgba(15,23,42,.10);
    border-color:rgba(10,102,194,.24);
}
.farmer-card .head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-bottom:12px;
    margin-bottom:12px;
    border-bottom:1px solid #e2e8f0;
}
.farmer-card .head .brand{
    display:flex;
    align-items:center;
    gap:10px;
}
.farmer-card .head .logo{
    width:38px;
    height:38px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#0a66c2,#2563eb);
    color:#fff;
    font-size:18px;
    box-shadow:0 10px 24px rgba(37,99,235,.2);
}
.farmer-card .head .b{
    font-weight:800;
    font-size:15px;
    color:#0f172a;
}
.farmer-card .head .s{
    font-size:12px;
    color:#64748b;
}
.farmer-card .head .badge{
    padding:6px 10px;
    border-radius:999px;
    background:#ecfdf5;
    color:#15803d;
    font-size:12px;
    font-weight:700;
}
.farmer-card .body{
    display:grid;
    grid-template-columns:96px 1fr auto;
    gap:14px;
    align-items:center;
}
.farmer-card .photo{
    width:96px;
    height:116px;
    object-fit:cover;
    border-radius:14px;
    border:1px solid #e2e8f0;
    background:#f1f5f9;
}
.farmer-card .info{
    min-width:0;
}
.farmer-card .info .name{
    font-weight:800;
    font-size:17px;
    line-height:1.2;
    color:#111827;
    margin-bottom:6px;
}
.farmer-card .info .fid,
.farmer-card .info .mob,
.farmer-card .info .addr{
    font-size:13px;
    color:#475569;
    margin-top:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.farmer-card .qr-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    min-width:84px;
}
.farmer-card .qr{
    width:78px;
    height:78px;
    border-radius:12px;
    background:#fff;
    border:1px solid #e5e7eb;
    padding:4px;
    object-fit:cover;
}
.farmer-card .qr-label{
    font-size:11px;
    color:#64748b;
    text-align:center;
}
.cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:18px;
    margin-top:20px;
}
@media (max-width: 760px){
    .cards-grid{grid-template-columns:1fr;}
    .farmer-card .body{grid-template-columns:1fr;}
    .farmer-card .photo{width:100%;height:160px;}
    .farmer-card .qr-wrap{align-items:flex-start;}
}
@media print{
    .farmer-card{
        width:85.6mm;
        height:54mm;
        padding:3mm;
        border-radius:3mm;
        box-shadow:none;
        background:#fff;
        break-inside:avoid;
        page-break-inside:avoid;
    }
    .farmer-card .head{padding-bottom:2mm;margin-bottom:2mm;}
    .farmer-card .head .logo,
    .farmer-card .head .badge,
    .farmer-card .qr-label{display:none;}
    .farmer-card .body{grid-template-columns:22mm 1fr 28mm;gap:3mm;align-items:start;}
    .farmer-card .photo{width:22mm;height:28mm;border-radius:1mm;}
    .farmer-card .info .name{font-size:9pt;}
    .farmer-card .info .fid,
    .farmer-card .info .mob,
    .farmer-card .info .addr{font-size:7pt;}
    .farmer-card .qr{width:28mm;height:28mm;}
}

input,
select,
textarea{
    min-height:50px;
    width:100%;
    box-sizing:border-box;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:0 14px;
    background:var(--surface);
    color:var(--text);
    font-size:.95rem;
    line-height:1.45;
    transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

textarea{
    padding:14px;
    min-height:112px;
    resize:vertical;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.text-link:focus-visible{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 4px var(--focus);
    background:#fff;
}

.btn{
    height:48px;
    padding:0 18px;
    border-radius:var(--radius-sm);
    border:1px solid transparent;
    background:linear-gradient(135deg, var(--primary), var(--accent));
    color:#fff;
    font-size:.95rem;
    font-weight:700;
    line-height:1;
    letter-spacing:.01em;
    box-shadow:0 10px 24px rgba(22,163,74,.16);
    transition:var(--transition);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
    text-decoration:none;
    white-space:nowrap;
}

.btn:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 26px rgba(22,163,74,.2);
}

.btn.primary{
    background:linear-gradient(135deg, var(--primary), var(--accent));
}

.btn.secondary,
.btn.ghost{
    background:#fff;
    color:var(--text);
    border-color:var(--border);
    box-shadow:none;
}

.btn.secondary:hover,
.btn.ghost:hover{
    background:var(--surface-soft);
    box-shadow:0 8px 18px rgba(15,23,42,.06);
}
.floating-install-btn{
    display:none;
    align-items:center;
    gap:10px;
    min-height:52px;
    padding:0 22px;
    border-radius:999px;
    border:1px solid rgba(22,163,74,.24);
    background:linear-gradient(135deg,#16a34a,#22c55e);
    color:#ffffff;
    font-size:.95rem;
    letter-spacing:.01em;
    font-weight:700;
    box-shadow:0 18px 40px rgba(22,163,74,.18);
    transition:transform .22s ease,box-shadow .22s ease,filter .22s ease,background .22s ease;
    cursor:pointer;
    animation:pulse-install 4s ease-in-out infinite;
}
.floating-install-btn:hover{
    animation:none;
    transform:translateY(-1px);
    box-shadow:0 20px 42px rgba(22,163,74,.24);
    filter:brightness(1.07);
    background:linear-gradient(135deg,#22c55e,#16a34a);
}
.floating-install-btn:active{
    animation:none;
    transform:translateY(0);
    box-shadow:0 14px 28px rgba(22,163,74,.2);
}

@keyframes pulse-install{
    0%,100%{ box-shadow:0 18px 40px rgba(22,163,74,.18); transform:translateY(0); }
    40%{ box-shadow:0 24px 52px rgba(22,163,74,.22); transform:translateY(-1px); }
    60%{ box-shadow:0 20px 46px rgba(22,163,74,.20); transform:translateY(0); }
}
@keyframes hero-shine-sweep {
    0% { transform: rotate(25deg) translateX(-100%); opacity: 0; }
    30% { opacity: 0.35; }
    50% { transform: rotate(25deg) translateX(150%); opacity: 0.65; }
    80% { opacity: 0.08; }
    100% { transform: rotate(25deg) translateX(150%); opacity: 0; }
}

.topbar-right{
    display:flex;
    align-items:center;
    gap:12px;
}

@media (max-width: 900px) {
    .floating-install-btn{
        width:100%;
        justify-content:center;
    }
}

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

.hero-dashboard{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:24px;

    background:#fff;
    border-radius:24px;

    border:1px solid #eef2f7;

    box-shadow:0 10px 30px rgba(15,23,42,.05);

    margin-bottom:24px;
}

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

.dashboard-hero h1{
    margin:0;
    font-size:28px;
    font-weight:800;
    color:#0f172a;
}

.dashboard-hero p{
    margin-top:6px;
    color:#64748b;
}

.hero-badge{
    background:#eef4ff;
    color:#0F4CDB;

    padding:10px 18px;

    border-radius:12px;

    font-weight:700;
    font-size:.9rem;
}

/* =========================
   QUICK ACTIONS
========================= */

.quick-actions{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:12px;
}

.action-card{
    background:#fff;

    border:1px solid #eef2f7;

    border-radius:18px;

    min-width:130px;

    padding:16px;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;

    transition:.2s;
}

.action-card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(15,23,42,.08);
}

.action-icon{
    font-size:24px;
}

/* =========================
   FOUNDER PORTAL
========================= */

.founder-hero{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:32px;
    border-radius:28px;
    background:linear-gradient(135deg, rgba(37,99,235,.95), rgba(16,185,129,.95));
    color:#fff;
    box-shadow:0 24px 60px rgba(15,23,42,.18);
    border:1px solid rgba(255,255,255,.14);
    margin-bottom:24px;
}

.founder-hero h1{
    margin:0;
    font-size:clamp(2.2rem,2.6vw,3.4rem);
    line-height:1.03;
}

.founder-hero p{
    max-width:620px;
    margin:12px 0 0;
    font-size:1rem;
    color:rgba(255,255,255,.86);
}

.founder-revenue{
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    min-width:220px;
    padding:22px 26px;
    border-radius:24px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(12px);
}

.founder-revenue span{
    color:rgba(255,255,255,.8);
    font-size:.95rem;
    margin-bottom:10px;
}

.founder-revenue strong{
    font-size:2rem;
    line-height:1.05;
}

.founder-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:18px;
    margin-bottom:24px;
}

.founder-stat{
    padding:20px 22px;
    border-radius:22px;
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    box-shadow:0 16px 30px rgba(15,23,42,.05);
    transition:.25s;
}

.founder-stat:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 32px rgba(15,23,42,.08);
}

.founder-stat span{
    display:block;
    color:#64748b;
    font-size:.95rem;
    margin-bottom:10px;
    letter-spacing:.02em;
    text-transform:uppercase;
}

.founder-stat strong{
    font-size:1.95rem;
    color:#0f172a;
}

.founder-stat.total{background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(59,130,246,.12));}
.founder-stat.active{background:linear-gradient(135deg,rgba(5,150,105,.12),rgba(52,211,153,.12));}
.founder-stat.trial{background:linear-gradient(135deg,rgba(251,191,36,.12),rgba(245,158,11,.12));}
.founder-stat.premium{background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(139,92,246,.12));}
.founder-stat.pro{background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(59,130,246,.12));}
.founder-stat.expired{background:linear-gradient(135deg,rgba(239,68,68,.12),rgba(251,113,133,.12));}

.founder-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:24px;
}

.overview-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:16px;
    margin-top:18px;
}

.mini-card{
    padding:18px;
    border-radius:20px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    box-shadow:0 10px 20px rgba(15,23,42,.04);
    transition:.2s;
}

.mini-card:hover{
    transform:translateY(-2px);
}

.mini-card span{
    display:block;
    color:#64748b;
    font-size:.9rem;
    margin-bottom:10px;
}

.mini-card strong{
    font-size:1.35rem;
    color:#0f172a;
}

.founder-actions{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:12px;
    margin-top:14px;
    align-items:stretch;
}

.action-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-height:116px;
    padding:18px 14px;
    gap:10px;
    background:linear-gradient(180deg,#ffffff,#f8fbff);
    border:1px solid rgba(37,99,235,.12);
    color:#0f172a;
    text-align:center;
    border-radius:20px;
    transition:.2s ease;
}

.action-card span{
    display:block;
    font-size:.92rem;
    margin-top:0;
}

.action-card::before{
    content: attr(data-icon);
    font-size:1.45rem;
    line-height:1;
}

.action-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(15,23,42,.12);
}

.action-card svg,
.action-card img {
    max-width:36px;
    max-height:36px;
}

    .subscription-request-list{
        display:grid;
        gap:22px;
    }

    .request-card{
        display:grid;
        gap:20px;
        padding:26px;
        border-radius:24px;
        background:#ffffff;
        border:1px solid rgba(226,232,240,.9);
        box-shadow:0 22px 45px rgba(15,23,42,.06);
    }

    .request-card.approved{
        border-color:rgba(16,185,129,.35);
    }

    .request-card.rejected{
        border-color:rgba(239,68,68,.35);
    }

    .request-summary{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
        gap:14px;
        color:#334155;
        align-items:start;
    }

    .request-summary div{
        display:flex;
        flex-direction:column;
        gap:6px;
    }

    .request-summary strong{
        color:#0f172a;
        font-size:1rem;
        font-weight:700;
        display:block;
    }

    .request-summary span{
        color:#64748b;
        font-size:.92rem;
        line-height:1.5;
    }

    .request-screenshot{
        border-radius:20px;
        overflow:hidden;
        background:#f8fafc;
        border:1px solid #e2e8f0;
        padding:18px;
    }

    .request-screenshot h4{
        margin:0 0 14px;
        font-size:1rem;
        color:#0f172a;
    }

    .request-screenshot img{
        width:100%;
        height:auto;
        max-height:340px;
        object-fit:cover;
        border-radius:18px;
    }

    .request-actions{
        display:flex;
        flex-wrap:wrap;
        gap:12px;
        align-items:center;
        justify-content:flex-start;
    }

    .request-card .btn{
        min-width:130px;
    }



@media (max-width: 720px) {
    .founder-hero{
        padding:24px;
    }
    .founder-revenue{
        width:100%;
    }
}

/* =========================
   KPI CARDS
========================= */

.dashboard-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:18px;
    margin-bottom:24px;
}

.stat-card{
    position:relative;
    background:var(--surface);
    border-radius:var(--radius);
    border:1px solid rgba(226,232,240,.9);
    padding:20px;
    overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    box-shadow:var(--shadow);
}

.stat-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 40px rgba(15,23,42,.12);
    border-color:rgba(22,163,74,.14);
}

.card-icon{
    width:46px;
    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    font-size:22px;

    margin-bottom:12px;
}

.farmers-card .card-icon{
    background:#ede9fe;
}

.collection-card .card-icon{
    background:#dbeafe;
}

.payments-card .card-icon{
    background:#ffedd5;
}

.sync-card .card-icon{
    background:#e0f2fe;
}

.stat-card h3{
    margin:0;
    color:#64748b;
    font-size:.9rem;
    font-weight:600;
}

.stat-card .value{
    margin-top:10px;

    font-size:34px;
    font-weight:800;

    color:#0f172a;
}

.stat-card .sub{
    margin-top:4px;

    color:#64748b;
    font-size:.85rem;
}

/* =========================
   PANELS
========================= */

.panel{
    background:#fff;

    border-radius:22px;

    border:1px solid #eef2f7;

    box-shadow:0 10px 30px rgba(15,23,42,.05);

    padding:20px;

    height:auto;
    min-height:auto;


    margin-bottom:20px;
}
.backup-hero{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    background:linear-gradient(135deg, rgba(59,130,246,.12), rgba(96,165,250,.05));
    border:1px solid rgba(59,130,246,.18);
    border-radius:24px;
    padding:28px 30px;
    margin-bottom:24px;
}
.backup-hero > div{
    flex:1 1 320px;
    min-width:280px;
}
.backup-hero h1{
    margin:0;
    font-size:2rem;
    line-height:1.1;
    color:#0f172a;
}
.backup-hero p{
    margin-top:0.85rem;
    max-width:620px;
    font-size:1rem;
    color:#475569;
}
.backup-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    width:100%;
}
.backup-actions .btn{
    min-width:210px;
}
@media (max-width:920px){
    .backup-hero{
        flex-direction:column;
        align-items:stretch;
    }
    .backup-actions{
        justify-content:flex-start;
    }
}
.dashboard-side-stack{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.subscription-panel,
.trend-panel,
.suppliers-panel{
    margin:0;
    width: 200mm;
    max-width: 300mm;
}
.subscription-summary{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.subscription-summary div{
    font-size:.95rem;
}

.subscription-actions{
    margin-top:10px;
}
.chart-container{
    height:220px;
    width:100%;
}
.podium-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-bottom:15px;
}

.podium-card{
    padding:14px;
}

.rank{
    font-size:20px;
}

.name{
    font-size:.9rem;
}

.stat{
    font-size:.8rem;
}

.panel-head{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:18px;
}

.panel-head h3{
    margin:0;

    font-size:1rem;
    font-weight:700;

    color:#0f172a;
}

.subscription-panel{
    height:fit-content;
}

.trend-panel{
    min-height:380px;
}

.chart-container{
margin-top:18px;
height:240px;
background:#FBFCFE;
border:1px solid #EEF2F7;
border-radius:18px;
padding:14px;
}

#trendChart{
    width:100%;
    height:100%;
}

.suppliers-panel{
    margin-top:20px;
}


/* =========================
   TREND GRAPH
========================= */

.chart-bars{
    display:flex;
    align-items:flex-end;

    gap:18px;

    height:260px;

    padding:10px 0;
}

.chart-bar{
    flex:1;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:12px;
}

.chart-bar span{
    font-size:.8rem;
    color:#64748b;
}

.chart-bar .track{
    width:100%;

    height:200px;

    display:flex;
    align-items:flex-end;

    border-radius:14px;

    background:#f8fafc;

    overflow:hidden;
}

.chart-bar .fill{
    width:100%;

    border-radius:14px 14px 0 0;

    background:linear-gradient(
        180deg,
        #3b82f6,
        #0F4CDB
    );

    transition:1s ease;
}

/* =========================
   PODIUM
========================= */

.podium-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:16px;

    margin-bottom:20px;
}

.podium-card{
    background:#fff;

    border:1px solid #eef2f7;

    border-radius:20px;

    padding:20px;

    text-align:center;
}

.rank{
    font-size:24px;
    font-weight:800;

    margin-bottom:10px;
}

.rank-1{
    border-top:4px solid #f59e0b;
}

.rank-2{
    border-top:4px solid #94a3b8;
}

.rank-3{
    border-top:4px solid #c2410c;
}

.name{
    font-weight:700;
    color:#0f172a;
}

.stat{
    margin-top:6px;
    color:#64748b;
}

/* =========================
   MILK TANK
========================= */

.milk-tank{
    background:#fff;

    border:1px solid #eef2f7;

    border-radius:20px;

    padding:20px;

    margin-bottom:20px;
}

.tank-track{
    height:18px;

    background:#eef2f7;

    border-radius:999px;

    overflow:hidden;
}

.tank-fill{
    height:100%;

    background:linear-gradient(
        90deg,
        #22c55e,
        #16a34a
    );

    border-radius:999px;
}

.tank-label{
    display:flex;
    justify-content:space-between;

    margin-top:10px;

    font-size:.85rem;
    color:#64748b;
}

/* =========================
   TABLES
========================= */

.table-wrap{
    overflow:auto;
}

.table-wrap table{
    width:100%;
    border-collapse:collapse;
}

.table-wrap thead{
    background:#f8fafc;
}

.table-wrap th{
    padding:14px;
    text-align:left;

    color:#475569;
    font-size:.85rem;
}

.table-wrap td{
    padding:14px;

    border-bottom:1px solid #f1f5f9;
}

/* =========================
   PREMIUM DASHBOARD REDESIGN
========================= */

.dashboard-shell {
    display:flex;
    flex-direction:column;
    gap:24px;
}

.dashboard-shell .panel,
.dashboard-hero-card {
    background:#ffffff;
    border:1px solid rgba(226,232,240,.9);
    border-radius:28px;
    box-shadow:0 14px 38px rgba(15,23,42,.08);
}

.dashboard-hero-card {
    position: relative;
    overflow: hidden;
    padding:28px 28px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:24px;
    align-items:center;
    background:linear-gradient(135deg, #f3fdf7 0%, #dcfce7 42%, #bbf7d0 100%);
    border:1px solid rgba(34,197,94,.18);
    box-shadow:0 16px 42px rgba(15,23,42,.12);
}

.dashboard-hero-card::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -30%;
    width: 44%;
    height: 184%;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.92), rgba(255,255,255,0));
    transform: rotate(24deg) translateX(-100%);
    animation: hero-shine-sweep 3s ease-in-out infinite;
    pointer-events:none;
}

.dashboard-banners {
    margin: 18px 0 24px;
}

.banner-slider {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 12px 35px rgba(0,0,0,.08);
    background: #fff;
    height: 630px;
}

.banner-track {
    display: flex;
    transition: transform .6s ease;
    will-change: transform;
    align-items: stretch;
}

.banner-slide {
    flex: 0 0 100%;
    position: relative;
    cursor: pointer;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
    min-height: 100%;
}

.banner-btn {
    position: absolute;
    left: 20px;
    bottom: 20px;
    border: none;
    background: #f1f2f1;
    color: #0f100f;
    padding: 14px 22px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(22,163,74,.30);
    transition: transform .3s ease, background .3s ease;
    max-width: calc(100% - 40px);
    text-decoration: none;
    white-space: normal;
}

.banner-btn:hover {
    transform: translateY(-3px);
    background: #15803d;
}

.banner-btn--primary {
    padding: 16px 24px;
    font-size: 16px;
}

.banner-dots {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 2;
}

.banner-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: #ddd;
    cursor: pointer;
    transition: transform .25s ease, background .25s ease;
}

.banner-dot[aria-selected="true"] {
    background: #16a34a;
    transform: scale(1.1);
}

.banner-slider:focus-visible {
    outline: 2px solid #16a34a;
    outline-offset: 4px;
}

@media (max-width: 1024px) {
    .banner-slider {
        height: 220px;
    }
}

@media (max-width: 768px) {
    .banner-slider {
        height: 220px;
    }
    .banner-btn {
        left: 18px;
        bottom: 18px;
        max-width: calc(100% - 36px);
    }
}

@media(max-width: 480px) {
    .banner-slider {
        height: 200px;
    }
    .banner-btn {
        left: 14px;
        bottom: 14px;
        max-width: calc(100% - 28px);
        padding: 10px 16px;
        font-size: 14px;
    }
    .banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
    min-height: 100%;
}
}

@media (max-width: 390px) {
    .banner-slider {
        height: var(--banner-height-mobile, 175px);
    }
    .banner-btn {
        left: 12px;
        bottom: 12px;
        max-width: calc(100% - 24px);
        padding: 10px 14px;
        font-size: 13px;
    }
    .banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
    min-height: 100%;
}
}

.hero-eyebrow {
    display:inline-flex;
    align-items:center;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(59,130,246,.12);
    color:#2563eb;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:14px;
}

.hero-copy h1 {
    margin:0;
    font-size:clamp(2rem, 3vw, 2.8rem);
    line-height:1.05;
    color:#0f172a;
}

.hero-copy p {
    margin:14px 0 0;
    color:#475569;
    max-width:100%;
    line-height:1.75;
}

.hero-meta {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    justify-content:flex-end;
}

.date-chip,
.hero-pill {
    border-radius:999px;
    padding:10px 14px;
    font-weight:700;
    font-size:.92rem;
}

.date-chip {
    background:#eff6ff;
    color:#2563eb;
}

.hero-pill {
    background:#f8fafc;
    color:#0f172a;
    border:1px solid #e2e8f0;
}

.hero-pill--muted {
    color:#64748b;
    background:#f8fafc;
}

.hero-alert {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-radius:20px;
    padding:16px 18px;
    background:linear-gradient(90deg, #fff7ed 0%, #ffffff 100%);
    border:1px solid #fde68a;
    box-shadow:0 10px 24px rgba(245,158,11,.12);
}

.hero-alert strong {
    display:block;
    color:#92400e;
    margin-bottom:4px;
}

.hero-alert div {
    color:#78350f;
    font-size:.95rem;
}

.stat-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:16px;
}

.stat-card {
    position:relative;
    background:linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border:1px solid rgba(148,163,184,.16);
    border-radius:20px;
    padding:22px 20px 20px;
    box-shadow:0 12px 32px rgba(15,23,42,.08), inset 0 1px 2px rgba(255,255,255,.5);
    display:flex;
    align-items:flex-start;
    gap:14px;
    min-height:152px;
    transition:transform .24s cubic-bezier(.22,.12,.08,1), box-shadow .24s ease, border-color .24s ease, background .24s ease;
    overflow:hidden;
}

.stat-card::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:4px;
    opacity:0.9;
    transition:opacity .24s ease, width .24s ease;
    border-radius:4px 0 0 4px;
}

.stat-card:hover {
    transform:translateY(-4px);
    box-shadow:0 20px 48px rgba(15,23,42,.12), inset 0 1px 2px rgba(255,255,255,.6);
    border-color:rgba(148,163,184,.28);
    background:linear-gradient(135deg, #ffffff 0%, #f8f9fc 100%);
}

.stat-card--farmers::before { background:linear-gradient(180deg, #7c3aed 0%, #a78bfa 100%); }
.stat-card--collection::before { background:linear-gradient(180deg, #2563eb 0%, #60a5fa 100%); }
.stat-card--payments::before { background:linear-gradient(180deg, #d97706 0%, #fbbf24 100%); }
.stat-card--sync::before { background:linear-gradient(180deg, #db2777 0%, #f472b6 100%); }

.stat-card:hover::before {
    width:5px;
}

.stat-icon {
    width:52px;
    height:52px;
    border-radius:16px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    position:relative;
    background:#f1f5f9;
    box-shadow:0 4px 16px rgba(0,0,0,.06), inset 0 1px 2px rgba(255,255,255,.8);
    transition:transform .24s cubic-bezier(.22,.12,.08,1), box-shadow .24s ease, background .24s ease;
}

.stat-icon svg {
    width:24px;
    height:24px;
    stroke:currentColor;
    stroke-width:1.5;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.95;
}

.stat-card--farmers .stat-icon { background:linear-gradient(135deg, #ede9fe 0%, #f5f0ff 100%); color:#6d28d9; box-shadow:0 4px 16px rgba(125,58,237,.12), inset 0 1px 2px rgba(255,255,255,.8); }
.stat-card--collection .stat-icon { background:linear-gradient(135deg, #e0e7ff 0%, #ede9fe 100%); color:#1d4ed8; box-shadow:0 4px 16px rgba(37,99,235,.12), inset 0 1px 2px rgba(255,255,255,.8); }
.stat-card--payments .stat-icon { background:linear-gradient(135deg, #fefae8 0%, #fff8e7 100%); color:#b45309; box-shadow:0 4px 16px rgba(217,119,6,.12), inset 0 1px 2px rgba(255,255,255,.8); }
.stat-card--sync .stat-icon { background:linear-gradient(135deg, #fdf1f7 0%, #fce7f3 100%); color:#be185d; box-shadow:0 4px 16px rgba(219,39,119,.12), inset 0 1px 2px rgba(255,255,255,.8); }



.stat-card__content {
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.stat-card__label {
    margin:0;
    font-size:.72rem;
    font-weight:750;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:.09em;
    line-height:1.4;
    opacity:.85;
}

.stat-card__value {
    margin-top:10px;
    font-size:2.15rem;
    font-weight:850;
    background:linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    line-height:1.1;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
    word-break:keep-all;
}

.stat-card__hint {
    margin:8px 0 0;
    color:#64748b;
    font-size:.82rem;
    line-height:1.5;
    font-weight:500;
    opacity:.8;
}

#offlineSyncSummary,
#offlineSyncLast {
    display:block;
    width:100%;
    word-break:break-word;
    white-space:normal;
}

#offlineSyncLast {
    margin-top:4px;
    color:#475569;
    font-size:.78rem;
}

.stat-card--sync .stat-card__content {
    gap:2px;
}

.stat-card--sync .stat-card__hint:first-of-type {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

.stat-card--sync .stat-card__hint:first-of-type::before {
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 4px rgba(34,197,94,.12);
    flex-shrink:0;
}

.dashboard-middle{

display:grid;

grid-template-columns:

2.2fr 0.9fr;

gap:24px;
margin-bottom:24px;


align-items:start;

margin-top:24px;
}

.dashboard-shell .panel {
    padding:24px;
    background:#ffffff;
    border:1px solid #e8eef7;
    border-radius:22px;
    box-shadow:0 10px 30px rgba(15,23,42,.06);
}

.panel-body {
    display:flex;
    flex-direction:column;
    gap:24px;
}

.btn.small {
    min-width:140px;
    padding:0 16px;
    font-size:.92rem;
}

.subscription-payment-hero {
    position:relative;
    overflow:hidden;
    padding:34px 34px 30px;
    background:linear-gradient(135deg, #7ac7ea 0%, #e6fbf7 45%, #d9f5ff 100%);
    border:1px solid #cfeaf7;
    border-radius:28px;
    box-shadow:0 22px 50px rgba(15,23,42,.12);
}

.subscription-payment-hero:before {
    content:'';
    position:absolute;
    top:-30px;
    right:-40px;
    width:220px;
    height:220px;
    background:radial-gradient(circle at 30% 30%, rgba(37,99,235,.22), transparent 55%);
    filter:blur(24px);
}

.subscription-payment-hero:after {
    content:'';
    position:absolute;
    bottom:-28px;
    left:-24px;
    width:180px;
    height:180px;
    background:radial-gradient(circle at 60% 40%, rgba(22,163,74,.18), transparent 50%);
    filter:blur(30px);
}

.subscription-payment-hero .hero-copy {
    position:relative;
    z-index:1;
    max-width:760px;
}

.subscription-payment-hero .hero-eyebrow {
    display:inline-flex;
    align-items:center;
    padding:8px 14px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(37,99,235,.11), rgba(22,163,74,.12));
    color:#0f172a;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:14px;
    box-shadow:0 8px 24px rgba(37,99,235,.08);
}

.subscription-payment-hero .hero-copy h1 {
    margin:0;
    font-size:clamp(2rem, 2.8vw, 3.1rem);
    line-height:1.02;
    color:#0f172a;
}

.subscription-payment-hero .hero-copy p {
    margin:18px 0 0;
    color:#475569;
    max-width:680px;
    font-size:1rem;
    line-height:1.7;
}

.subscription-payment-hero .hero-meta {
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:center;
    margin-top:24px;
}

.subscription-payment-hero .hero-pill {
    border-radius:999px;
    padding:12px 16px;
    font-weight:700;
    font-size:.95rem;
    background:linear-gradient(135deg, #ffffff, #f4fbff);
    color:#0f172a;
    border:1px solid rgba(37,99,235,.14);
    box-shadow:0 8px 20px rgba(15,23,42,.06);
}

.subscription-payment-hero .hero-pill + .hero-pill {
    background:linear-gradient(135deg, #f7fff2, #ecf9ff);
}

.subscription-payment-summary {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
    padding:24px;
    border-radius:24px;
    background:radial-gradient(circle at top left, #ffffff 0%, #f8fcff 45%, #f5f7fb 100%);
    border:1px solid #eaf2fb;
}

.subscription-payment-summary div {
    display:flex;
    flex-direction:column;
    gap:6px;
    color:#475569;
}

.subscription-payment-summary small {
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.8rem;
}

.subscription-payment-summary strong {
    font-size:1.2rem;
    color:#0f172a;
}

.subscription-payment-panel {
    padding:0;
}

.subscription-payment-grid {
    display:grid;
    grid-template-columns:320px 1fr;
    gap:22px;
    align-items:start;
}

.subscription-payment-qr {
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:24px;
    border-radius:24px;
    background:linear-gradient(180deg,#ffffff,#f7fbff);
    border:1px solid #dbeafe;
    box-shadow:0 12px 30px rgba(15,23,42,.07);
}

.subscription-payment-qr img {
    width:100%;
    max-width:240px;
    border-radius:20px;
    object-fit:cover;
}

.subscription-payment-qr-note {
    margin-top:18px;
    font-size:.95rem;
    color:#475569;
    text-align:center;
}

.subscription-payment-details {
    display:grid;
    gap:18px;
    padding:24px;
    border-radius:24px;
    background:#ffffff;
    border:1px solid #e5e7f8;
    box-shadow:0 10px 30px rgba(15,23,42,.05);
}

.subscription-payment-details .field {
    display:grid;
    gap:10px;
}

.subscription-payment-details label {
    font-weight:700;
    color:#0f172a;
}

.subscription-payment-details .value {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 18px;
    border-radius:16px;
    background:#f8fafc;
    border:1px solid #e5e7f0;
    color:#0f172a;
}

.subscription-payment-details .value span {
    font-weight:700;
}

.subscription-form {
    display:grid;
    gap:18px;
    padding:26px;
    border-radius:24px;
    background:#ffffff;
    border:1px solid #e5e7f8;
    box-shadow:0 10px 30px rgba(15,23,42,.05);
}

.subscription-form label {
    font-weight:700;
    color:#0f172a;
}

.subscription-form input,
.subscription-form textarea {
    width:100%;
    min-height:54px;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid #dbe7f0;
    background:#f8fbff;
    color:#0f172a;
    font-size:.95rem;
}

.subscription-form textarea {
    min-height:120px;
    resize:vertical;
}

.subscription-form .btn.primary {
    min-width:180px;
    align-self:flex-start;
}

@media (max-width: 980px) {
    .subscription-payment-grid {
        grid-template-columns:1fr;
    }
}

@media (max-width: 720px) {
    .subscription-payment-summary {
        grid-template-columns:1fr;
    }
    .subscription-expired-banner {
        flex-direction:column;
        align-items:flex-start;
    }
}

.subscription-expired-banner {
    display:flex;
    justify-content:space-between;
    gap:24px;
    align-items:center;
    padding:22px 24px;
    margin:20px 0;
    border-radius:24px;
    background:linear-gradient(90deg, #fee2e2 0%, #fff1f2 100%);
    border:1px solid #fca5a5;
    box-shadow:0 12px 32px rgba(244,114,182,.12);
}

.subscription-expired-title {
    font-size:1.35rem;
    font-weight:800;
    color:#b91c1c;
    margin-bottom:8px;
}

.subscription-expired-text {
    max-width:660px;
    color:#7f1d1d;
    line-height:1.7;
}

.subscription-expired-banner .btn.primary {
    background:linear-gradient(135deg,#dc2626,#f43f5e);
    color:#ffffff;
    border:none;
    padding:14px 20px;
    border-radius:16px;
    box-shadow:0 16px 28px rgba(220,38,38,.18);
}

.dashboard-shell .panel-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}

.dashboard-shell .panel-head h3 {
    margin:0;
    font-size:1.05rem;
    font-weight:700;
    color:#0f172a;
}

.panel-subtitle {
    margin:4px 0 0;
    color:#64748b;
    font-size:.9rem;
}

.chart-filter{
width:120px;
height:42px;
border-radius:12px;
padding:0 12px;
border:1px solid #E5E7EB;
background:#fff;
font-weight:600;
}

.trend-chart-wrap {
    display:block;
    background:linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    border:1px solid #e8eef7;
    border-radius:18px;
    height: 330px;
    width: 95%;

}

.trend-chart-wrap canvas{
    height: 230px!important;
    width:100%;
    
}

.trend-panel{
padding:22px;
}

.quick-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin:10px 0 0;
}

.quick-card{
    min-height:108px;
    border-radius:20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:10px;
    background:var(--surface);
    border:1px solid rgba(226,232,240,.9);
    padding:16px;
}
.quick-card:hover {
    transform:translateY(-4px);
    box-shadow:0 18px 42px rgba(15,23,42,.14);
    border-color:rgba(22,163,74,.14);
}

@keyframes qaFadeIn {
    from { opacity:0; transform:translateY(6px); }
    to { opacity:1; transform:translateY(0); }
}

.quick-action {
    width:100%;
    min-height:142px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:20px 14px 17px;
    border:1px solid #e5eaf0;
    border-radius:18px;
    background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
    box-shadow:0 8px 18px rgba(15,23,42,.045);
    color:var(--text);
    font:inherit;
    text-align:center;
    cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    position:relative;
    overflow:visible;
    -webkit-tap-highlight-color:transparent;
    opacity:0;
    animation:qaFadeIn .28s cubic-bezier(.22,.12,.08,1) both;
}

.quick-action:nth-child(2) { animation-delay:.03s; }
.quick-action:nth-child(3) { animation-delay:.06s; }
.quick-action:nth-child(4) { animation-delay:.09s; }
.quick-action:nth-child(5) { animation-delay:.12s; }
.quick-action:nth-child(6) { animation-delay:.15s; }
.quick-action:nth-child(7) { animation-delay:.18s; }
.quick-action:nth-child(8) { animation-delay:.21s; }

.quick-action:active { transform:translateY(-1px); }

.quick-action:focus-visible {
    outline:3px solid rgba(37,99,235,.25);
    outline-offset:3px;
}

@media (hover:hover) {
    .quick-action:hover {
        transform:translateY(-5px);
        border-color:rgba(22,163,74,.32);
        background:#fff;
        box-shadow:0 16px 30px rgba(15,23,42,.11);
    }
}

.quick-action .qa-icon {
    width:54px;
    height:54px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:#fff;
    box-shadow:0 8px 16px rgba(15,23,42,.12);
    transition:transform .2s ease, box-shadow .2s ease;
}

.quick-action:hover .qa-icon {
    transform:scale(1.05);
    box-shadow:0 10px 20px rgba(15,23,42,.16);
}

.quick-action .qa-label {
    margin-top:0;
    font-size:13px;
    font-weight:700;
    color:var(--text);
    text-align:center;
    line-height:1.25;
    width:100%;
}

.quick-icon {
     width:46px;
height:46px;

display:flex;
align-items:center;
justify-content:center;

background:#EEF4FF;

border-radius:14px;

color:#2563EB;
}

.quick-icon svg {
    width:20px;
    height:20px;
    stroke:currentColor;
    stroke-width:1.8;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.quick-label {
    font-size:14px;
    font-weight:600;
    color:#334155;
}

.table-wrap {
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--surface);
    box-shadow:var(--shadow);
}

.table-wrap table {
    width:100%;
    border-collapse:collapse;
}

.table-wrap thead th {
    background:#f8fafc;
    color:#475569;
    font-size:.78rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    padding:14px 16px;
    border-bottom:1px solid #e2e8f0;
    position:sticky;
    top:0;
    z-index:1;
}

.table-wrap tbody td {
    padding:14px 16px;
    border-bottom:1px solid #f1f5f9;
    color:#051d3f;
    font-size:.95rem;
    line-height:1.45;
    vertical-align:middle;
}

.table-wrap tbody tr {
    transition:background-color .2s ease;
}

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

.table-wrap tbody tr:hover {
    background:#f8fbff;
}

.table-primary {
    font-weight:700;
    color:#0f172a;
}

.table-secondary {
    margin-top:2px;
    font-size:.82rem;
    color:#64748b;
}

.status-pill {
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    font-size:.76rem;
    font-weight:700;
    background:#ecfdf3;
    color:#15803d;
}

.text-link {
    color:#2563eb;
    font-weight:700;
    text-decoration:none;
}

.text-link:hover {
    text-decoration:underline;
}

@media (max-width:1200px) {
    .stat-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .dashboard-middle {
        grid-template-columns:1fr;
    }
}

@media (max-width:480px) {
    .dashboard-shell {
        gap:16px;
    }

    .dashboard-hero-card,
    .dashboard-shell .panel {
        padding:18px;
    }

    .stat-grid,
    .quick-actions {
        grid-template-columns:1fr;
    }

    .hero-alert {
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (max-width:768px) {

    .banner-slider   {
        order:2;
    }
    .dashboard-shell> .dashboard-hero-card {
        order:1;
    }

    #quickActions {
        order:3;
    }

    .stat-grid {
        order:4;
    }

    .dashboard-middle > .trend-chart-wrap {
        order:5;
    }

    .dashboard-shell > .panel-table {
        order:6;
    }
}
.fab{
    position:fixed;

    bottom:95px;

    right:18px;

    width:60px;
    height:60px;

    border-radius:50%;

    background:#0F4CDB;

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:
    0 12px 30px rgba(15,76,219,.35);
}
/*farmers page*/
.panel-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.panel-head-right{
    display:flex;
    gap:12px;
    align-items:center;
}
.farmer-search{

    width:320px;

    height:48px;

    border:1px solid #e5e7eb;

    border-radius:14px;

    padding:0 16px;

    background:#fff;
}
.table-wrap{
    overflow-x:auto;
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#fff;
}
.table-wrap table{
    width:100%;
    border-collapse:collapse;
}
.table-wrap th{
    background:#f8fafc;
    padding:14px;
    text-align:left;
    border-bottom:1px solid #e5e7eb;
}
.table-wrap tbody tr{

    transition:.15s;
}
.table-wrap tbody tr:hover{

    background:#f8fafc;
}
.table-wrap td{
    padding:14px;
    border-bottom:1px solid #f1f5f9;
}
.actions{

    display:flex;

    gap:12px;

    margin-top:24px;
}
.btn.ghost{

    background:#f8fafc;

    border:1px solid #e5e7eb;

    color:#334155;
}
.btn.danger{

    background:#ef4444;

    color:#fff;

    border:none;
}
.modal{
    position:fixed;
    inset:0;

    display:none;

    align-items:center;
    justify-content:center;

    background:rgba(15,23,42,.55);

    z-index:99999; /* IMPORTANT */
}

.modal.active{
    display:flex;
}
.modal-box{
    width:min(800px,90vw);
    max-height:90vh;
    overflow-y:auto;
    background:var(--surface);
    border-radius:var(--radius-lg);
    padding:32px;
    border:1px solid var(--border);
    box-shadow:var(--shadow-lg);
}
.modal-box input,
.modal-box textarea{

    border-radius:14px;

    border:1px solid #e5e7eb;

    padding:12px 16px;
}
.modal-box input[type="checkbox"]{

    width:18px;
    height:18px;
    margin:0;
}
.password-field{
    position:relative;
    display:flex;
    align-items:center;
}
.password-field input{
    width:100%;
    padding-right:44px;
}
.password-toggle{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:transparent;
    color:var(--muted);
    font-size:18px;
    cursor:pointer;
    padding:6px;
    line-height:1;
}
.password-toggle:hover{
    color:var(--primary);
}
.form-row > div:has(label:has(input[type="checkbox"])) {
    justify-content:center;
}
.modal-box label:has(input[type="checkbox"]){

    display:flex !important;

    align-items:center;

    gap:10px;

    margin:0;
    padding:0;
    font-weight:600;
    color:#334155;
}
.form-row:not(.report-filter-form){

    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));
    gap:22px;
    margin-bottom:22px;
}
.form-row > div{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:12px;
    
}
.form-row label{
    display:block;
    font-weight:600;
    font-size:14px;
    color:#334155;
    margin:0 0 4px;
    
}
.report-filter-form{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap:18px;
    align-items:start;
}
.report-filter-form > div{
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:flex-start;
}
.report-filter-form label{
    width:100%;
    text-align:left;
}
.report-filter-form input,
.report-filter-form select{
    width:100%;
    min-width:0;
}
.modal-box form input,
.modal-box form textarea{
    width:100%;
    box-sizing:border-box;
}
.modal-box form textarea{
    min-height:110px;
    resize:vertical;
}
.modal-box form .actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

/* ===========================
   COLLECTION PAGE
=========================== */

.collection-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:24px;
}

.collection-stat{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:24px;
    padding:24px;
    position:relative;
    overflow:hidden;
    transition:.25s ease;
}

.collection-stat:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.collection-stat h4{
    font-size:14px;
    color:#64748b;
    margin-bottom:12px;
}

.collection-stat .value{
    font-size:34px;
    font-weight:800;
    color:#16a34a;
}

/* ===========================
   ENTRY FORM
=========================== */

.collection-entry-panel{
    margin-bottom:24px;
}

.panel,
.card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:24px;
    box-shadow:var(--shadow);
    overflow:hidden;
}

.panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:24px;
}

.panel-head h3{
    font-size:22px;
    font-weight:700;
    color:#0f172a;
}

#cf .form-row{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
    margin-bottom:20px;
}

#cf label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    font-weight:600;
    color:#334155;
}

#cf input,
#cf select{
    width:100%;
    height:52px;
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:0 16px;
    font-size:14px;
    background:#fff;
}

#cf input:focus,
#cf select:focus{
    outline:none;
    border-color:#16a34a;
      box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

#cf .actions{
    margin-top:24px;
}

#cf .btn.primary{
    min-width:180px;
    height:52px;
    border-radius:14px;
    background:#16a34a;
    color:#fff;
    font-weight:700;
}

/* ===========================
   CALCULATED RATE BOXES
=========================== */

#calc_rate,
#calc_amount{
    background:#f0fdf4;
    border-color:#86efac;
    font-weight:700;
    color:#166534;
}

.calc-highlight{
    animation:pulseCalc .8s ease;
}

@keyframes pulseCalc{
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.03);
    }
    100%{
        transform:scale(1);
    }
}

/* ===========================
   RECENT COLLECTIONS
=========================== */

.table-wrap{
    overflow-x:auto;
}

.table-wrap table{
    width:100%;
    border-collapse:collapse;
}

.table-wrap thead th{
    background:#024a68;
    color:#f1f3f6;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    padding:16px;
    border-bottom:1px solid #e5e7eb;
}

.table-wrap tbody td{
    padding:16px;
    border-bottom:1px solid #f1f5f9;
}

.table-wrap tbody tr:hover{
    background:#f8fafc;
}

/* ===========================
   STATUS BADGES
=========================== */

.collection-synced{
    display:inline-flex;
    align-items:center;
    padding:6px 12px;
    border-radius:999px;
    background:#dcfce7;
    color:#166534;
    font-size:12px;
    font-weight:700;
}

.collection-pending{
    display:inline-flex;
    align-items:center;
    padding:6px 12px;
    border-radius:999px;
    background:#fef3c7;
    color:#92400e;
    font-size:12px;
    font-weight:700;
}

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

#qr_input{
    flex:1;
    width:auto;
    max-width:420px;
    min-width:220px;
    display:block;
    border-radius:12px;
    background:#fff;
    border:1px solid #d1d5db;
    box-shadow:none;
}

#btnQrLookup{
    height:52px;
    border-radius:14px;
    padding:0 18px;
    background:#f8fafc;
}

@media (max-width: 900px) {
    #qr_input {
        width:100%;
        max-width:100%;
        min-width:0;
    }
}

/* ===========================
   MILK COLLECTION THEME
=========================== */

.collection-stat:nth-child(1){
    border-left:4px solid #16a34a;
}

.collection-stat:nth-child(2){
    border-left:4px solid #2563eb;
}

.collection-stat:nth-child(3){
    border-left:4px solid #f59e0b;
}

.collection-stat:nth-child(4){
    border-left:4px solid #9333ea;
}

/* =====================================
   TESTING PAGE
===================================== */

/* Quality Dashboard Cards */

.testing-dashboard{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:24px;
}

.quality-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:24px;
    padding:24px;
    text-align:center;
    transition:.25s ease;
}

.quality-card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.quality-card span{
    display:block;
    font-size:14px;
    font-weight:600;
    margin-bottom:10px;
}

.quality-card h2{
    font-size:42px;
    font-weight:800;
    margin:0;
}

/* Excellent */

.excellent-card{
    border-left:5px solid #22c55e;
}

.excellent-card h2{
    color:#16a34a;
}

/* Good */

.good-card{
    border-left:5px solid #f59e0b;
}

.good-card h2{
    color:#d97706;
}

/* Bad */

.bad-card{
    border-left:5px solid #ef4444;
}

.bad-card h2{
    color:#dc2626;
}

/* =====================================
   FORM PANEL
===================================== */

.testing-form-panel{
    margin-bottom:24px;
}

.testing-form-panel .panel-head{
    margin-bottom:24px;
}

.testing-form-panel h3{
    font-size:22px;
    font-weight:700;
    color:#0f172a;
}

/* =====================================
   TOP FIELDS
===================================== */

#tf .form-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
    padding-right:32px;
    margin-bottom:20px;
}

#tf label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
   
    font-weight:600;
    color:#334155;
}

#tf input,
#tf select,
#tf textarea{
    width:100%;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#fff;
}

#tf input,
#tf select{
    height:52px;
    padding:0 16px;
}

#tf textarea{
    min-height:100px;
    padding:14px;
    resize:vertical;
}

#tf input:focus,
#tf select:focus,
#tf textarea:focus{
    outline:none;
    border-color:#16a34a;
    box-shadow:0 0 0 4px rgba(22,163,74,.12);
}

/* =====================================
   FAT / SNF / QUALITY GRID
===================================== */

.milk-test-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-bottom:20px;
}

.test-input-card{
    padding:20px;
    border:none;
    background:none;
}
.test-input-card label{
    margin-bottom:10px;
}

.test-input-card input,
.test-input-card select{
    background:#fff;
     width:100%;
    height:52px;
    margin-top:8px;
}

/* =====================================
   QUALITY RESULT CARD
===================================== */

.quality-result-card{
    position:relative;
}

.quality-result-card select{
    font-weight:700;
}

/* Excellent */

.quality-excellent{
    background:#dcfce7 !important;
    color:#166534 !important;
    border-color:#86efac !important;
}

/* Good */

.quality-good{
    background:#fef3c7 !important;
    color:#92400e !important;
    border-color:#fde68a !important;
}

/* Bad */

.quality-bad{
    background:#fee2e2 !important;
    color:#991b1b !important;
    border-color:#fca5a5 !important;
}

/* =====================================
   QUALITY NOTE
===================================== */

.quality-note{
    margin-bottom:20px;
    padding:14px 18px;
    border-radius:14px;
    background:#f0fdf4;
    border:1px solid #bbf7d0;
    color:#166534;
    font-size:14px;
    line-height:1.6;
}

/* =====================================
   SAVE BUTTON
===================================== */

#tf .actions{
    margin-top:24px;
}

#tf .btn.primary{
    min-width:180px;
    height:52px;
    border-radius:14px;
    background:#16a34a;
    color:#fff;
    font-weight:700;
}

/* =====================================
   HISTORY HEADER
===================================== */

.testing-search{
    width:260px;
    height:48px;
    padding:0 16px;
    border:1px solid #e5e7eb;
    border-radius:14px;
    background:#fff;
}

.testing-search:focus{
    outline:none;
    border-color:#16a34a;
}

/* =====================================
   TEST TABLE
===================================== */

.testing-table{
    width:100%;
    border-collapse:collapse;
}

.testing-table thead th{
     background:#024a68;
    color:#f1f5f9;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    padding:16px;
    border-bottom:1px solid #e5e7eb;
}

.testing-table tbody td{
    padding:16px;
    border-bottom:1px solid #f1f5f9;
}

.testing-table tbody tr:hover{
    background:#f8fafc;
}

/* =====================================
   MESSAGE
===================================== */

.msg.success{
    background:#dcfce7;
    color:#166534;
    border:1px solid #86efac;
    border-radius:14px;
    padding:12px 16px;
    margin-bottom:16px;
}

.msg.error{
    background:#fee2e2;
    color:#991b1b;
    border:1px solid #fca5a5;
    border-radius:14px;
    padding:12px 16px;
    margin-bottom:16px;
}

/* =====================================
   PAYMENT SUMMARY
===================================== */

.payment-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:24px;
}

.payment-summary-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:24px;
    padding:24px;
    position:relative;
    overflow:hidden;
    transition:.25s ease;
}

.payment-summary-card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.payment-summary-card h4{
    font-size:14px;
    color:#64748b;
    margin-bottom:12px;
}

.payment-summary-card .amount,
.payment-summary-card .value{
    font-size:34px;
    font-weight:800;
    color:#16a34a;
}

.payment-summary-card:nth-child(1){ border-left:4px solid #16a34a; }
.payment-summary-card:nth-child(2){ border-left:4px solid #2563eb; }
.payment-summary-card:nth-child(3){ border-left:4px solid #f59e0b; }
.payment-summary-card:nth-child(4){ border-left:4px solid #9333ea; }

.ledger-empty-state{
    background:linear-gradient(180deg,#eff6ff,#fff);
    border:1px solid #bfdbfe;
    border-radius:18px;
    padding:24px;
    text-align:center;
    color:#334155;
    box-shadow:0 12px 30px rgba(59,130,246,.08);
}

.ledger-empty-state h4{
    margin:0 0 10px;
    font-size:18px;
    color:#1d4ed8;
}

.ledger-empty-state p{
    margin:0;
    color:#475569;
    line-height:1.6;
}

.ledger-summary-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:16px;
    margin-bottom:16px;
}

.ledger-summary-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:24px;
    padding:24px;
    box-shadow:0 20px 40px rgba(15,23,42,.04);
}

.ledger-summary-card h3{
    margin:0 0 10px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;
    color:#334155;
    text-transform:uppercase;
}

.ledger-summary-value{
    font-size:30px;
    font-weight:800;
    color:#0f172a;
    margin-bottom:8px;
}

.ledger-summary-sub{
    font-size:13px;
    color:#64748b;
    line-height:1.5;
}

.ledger-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:8px;
}

.table-wrap table th{
    background:#16534a;
    color:#eff5fd;
}

.table-wrap table td{
     color:#48515d;
}

.table-wrap table tr:hover td{
    background:#f8fbff;
}

.table-wrap table tr td .payment-pending,
.table-wrap table tr td .payment-paid{
    min-width:96px;
}

#ledgerView .muted{
    display:none;
}

#ledgerView p.muted{
    color:#475569;
}

#ledgerView .ledger-empty-state,
#ledgerView .ledger-summary-cards{
    max-width:100%;
}

#ledgerView .ledger-summary-card{
    min-height:130px;
}

#ledgerView .ledger-actions button{
    min-width:160px;
}

#pf input,
#pf select,
#pf textarea{

    width:100%;

    border:1px solid #dbe7ff;

    background:#fbfdff;

    border-radius:16px;

    font-size:15px;

    color:#0f172a;

    transition:.25s;

    outline:none;

    box-sizing:border-box;
    padding:12px 16px;
}

#pf input:focus,
#pf select:focus,
#pf textarea:focus{

    border-color:#16a34a;

    background:#fff;

    box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

#pf textarea{

    min-height:140px;

    padding:16px 18px;

    resize:vertical;

    margin-top:10px;
}
.btn{
    border:none;
    border-radius:14px;

    font-weight:600;
    cursor:pointer;

    transition:.2s ease;
}

#pf .btn.primary{

    min-width:220px;

    height:56px;

    border:none;

    border-radius:16px;

    background:#16a34a;

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

    box-shadow:0 12px 25px rgba(37,99,235,.28);
}

#pf .btn.primary:hover{

    transform:translateY(-2px);

    box-shadow:0 18px 35px rgba(37,99,235,.35);
}
@keyframes fadeUp{

from{

opacity:0;
transform:translateY(20px);

}

to{

opacity:1;
transform:translateY(0);

}

}
.payment-paid{
    display:inline-flex;
    align-items:center;

    background:#dcfce7;
    color:#166534;

    padding:6px 12px;
    border-radius:999px;

    font-size:.8rem;
    font-weight:700;
}

.payment-pending{
    display:inline-flex;
    align-items:center;

    background:#fef3c7;
    color:#92400e;

    padding:6px 12px;
    border-radius:999px;

    font-size:.8rem;
    font-weight:700;
}
.msg{
    margin-bottom:12px;
    padding:12px 16px;
    border-radius:14px;
    font-weight:600;
}

.msg.success{
    background:#dcfce7;
    color:#166534;
}

.msg.error{
    background:#fee2e2;
    color:#b91c1c;
}

 label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    font-weight:600;
    color:#334155;
}
.panel{

    background:#fff;

    border-radius:24px;

    padding:28px;

    border:1px solid #e8eef7;

    box-shadow:0 12px 35px rgba(15,23,42,.08);
}

.panel-head{
    margin-bottom:8px;
}

.panel-head h3{

    margin:0;

    font-size:28px;

    font-weight:700;

    color:#0f172a;
}
.panel-head2 h3{
    margin-bottom:8px;
}
.filter-actions{

display:flex;

gap:10px;

align-items:center;

}
.report-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:24px;
}

.report-summary .report-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:24px;
    padding:24px;
    position:relative;
    overflow:hidden;
    transition:.25s ease;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    text-align:left;
}

.report-summary .report-card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.report-summary .report-card h4{
    font-size:14px;
    color:#64748b;
    margin:0 0 12px;
    text-align:left;
    width:100%;
}

.report-summary .report-card .value{
    font-size:34px;
    font-weight:800;
    color:#16a34a;
    margin-top:6px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    text-align:left;
}

.report-card:nth-child(1){ border-left:4px solid #16a34a; }
.report-card:nth-child(2){ border-left:4px solid #2563eb; }
.report-card:nth-child(3){ border-left:4px solid #f59e0b; }
.report-card:nth-child(4){ border-left:4px solid #9333ea; }
#rf{
    display:grid;
    grid-template-columns:
        minmax(180px,1fr)
        minmax(180px,1fr)
        minmax(220px,1fr)
        minmax(240px, max-content);
    gap:16px;
    align-items:end;
    margin-top:18px;
    width:100%;
    box-sizing:border-box;
}
#rf > div{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:0;
}
#rf label{
    margin-bottom:10px;
    font-size:14px;
    font-weight:600;
    color:#475569;
}

#rf input,
#rf select{

    width:100%;

    height:56px;

    padding:0 18px;

    border-radius:16px;

    border:1px solid #dbe7ff;

    background:#fbfdff;

    color:#0f172a;

    font-size:15px;

    transition:.25s;

    outline:none;

    box-sizing:border-box;
}
 #rf input:focus,
 #rf select:focus{

    border-color:#16a34a;

    background:#fff;

    box-shadow:
    0 0 0 4px rgba(37,99,235,.12);

}
#rf{
    display:grid;
    grid-template-columns:
        minmax(180px,1fr)
        minmax(180px,1fr)
        minmax(220px,1fr)
        minmax(280px, minmax-content);
    gap:16px;
    align-items:end;
}

#rf > div:last-child{
    display:flex !important;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:12px;
    align-items:center;
    justify-content:flex-end;
    min-width: 0;
    max-width:100%;
}
#rf .filter-actions{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:12px;
    align-items:center;
    justify-content:flex-end;
    min-width: 0;
    max-width:100%;
}
#rf .btn{
    height:60px;
    min-width:90px;
    border-radius:16px;
    font-weight:700;
}
@media (max-width: 900px) {
    #rf{
        grid-template-columns:
            minmax(180px,1fr)
            minmax(180px,1fr)
            minmax(220px,1fr);
    }
    #rf > div:last-child,
    #rf .filter-actions{
        flex-wrap:wrap;
        justify-content:flex-start;
    }
}

@media (max-width: 720px) {
    #rf{
        grid-template-columns:1fr;
    }
}

#rf .btn.primary{

    height:56px;

    min-width:110px;

    border:none;

    border-radius:16px;

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    color:#fff;

    font-weight:600;

    font-size:15px;

    box-shadow:0 10px 25px rgba(37,99,235,.25);

    transition:.25s;
}
#rf .btn.primary:hover{

    transform:translateY(-2px);

    box-shadow:0 18px 35px rgba(37,99,235,.30);
}


#xlsBtn{
    background:#16a34a;
    border-color:#16a34a;
    color:#fff;
    box-shadow:0 10px 25px rgba(22,163,74,.25);
}
#xlsBtn:hover{
    background:#15803d;
}
#pdfBtn{
    background:#dc2626;
    border-color:#dc2626;
    color:#fff;
    box-shadow:0 10px 25px rgba(220,38,38,.25);
}
#pdfBtn:hover{
    background:#b91c1c;
}

#tbl tfoot{
    background:#f8fafc;
}

#tbl tfoot th{
    padding:16px;
    font-size:.95rem;
    font-weight:800;
    color:#16a34a;
    background:#dff3f8;
    border-top:1px solid #e5e7eb;
}

#totQ,
#totA{
    color:#16a34a !important;
    font-weight:800;
}
.muted{
    color:#94a3b8;
    text-align:center;
    padding:24px;
}
.report-card:nth-child(2) .value{
    color:#15803d;
    font-size:2rem;
}
.report-card:nth-child(3) .value{
    color:#0f172a;
}
.report-card:nth-child(4) .value{
    color:#eba625;
}
.notice-create-panel{
    background:#fff;
     border:1px solid #e5e7eb;
    border-radius:24px;

    padding:22px;
    margin-bottom:20px;

    box-shadow:0 10px 25px rgba(22,163,74,.08);
}
.notice-create-header{
    margin-bottom:18px;
}

.notice-create-header h2{
    margin:0 0 6px;
    font-size:1.35rem;
    font-weight:800;
    color:#0f172a;
}

.notice-create-header span{
    color:#64748b;
    font-size:.92rem;
}
#nf .notice-form-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    margin-bottom:16px;
    margin-right:28px;
}

.notice-form-grid > div{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.notice-form-grid label,
.notice-create-panel label{
    display:block;
    margin-right:0;
    margin-bottom:8px;
    color:#475569;
    font-weight:600;
    font-size:.9rem;
}
#nf .notice-create-panel input,
#nf .notice-create-panel textarea{
    width:100%;
    padding:14px 16px;
    border:1.5px solid #dbeafe;
    border-radius:16px;
    background:#fff;
    font-size:.95rem;
    transition:.2s ease;
}

.notice-create-panel input:focus,
.notice-create-panel textarea:focus{
    outline:none;

    border-color:#16a34a;

    box-shadow:0 0 0 4px rgba(22,163,74,.08);
}

.notice-create-panel textarea{
    min-height:120px;
    resize:vertical;
}
.notice-create-panel .panel-head{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:16px;

    margin-bottom:20px;
}

.notice-create-panel .panel-head h3{
    margin:0;
    font-size:1.15rem;
    font-weight:700;
    color:#0f172a;
}
.notice-search{
    width:280px;
    max-width:100%;

    padding:12px 16px;

    border:1.5px solid #dbeafe;
    border-radius:999px;

    background:#f8fafc;
}

.notice-search:focus{
    outline:none;

    border-color:#16a34a;

    background:#fff;
}
.notice-feed{
    display:flex;
    flex-direction:column;
    gap:16px;
}
.notice-card{
    background:#fff;

    border:1px solid #ecfdf5;
    border-radius:20px;

    padding:18px;

    box-shadow:0 4px 15px rgba(22,163,74,.06);

    transition:.2s ease;
}

.notice-card:hover{
    transform:translateY(-2px);
}
.notice-top{
    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:12px;
}
.notice-icon{
    width:50px;
    height:50px;

    border-radius:16px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#dcfce7;

    font-size:1.4rem;
}
.notice-top h3{
    margin:0;

    font-size:1rem;
    font-weight:700;

    color:#0f172a;
}
.notice-date{
    display:block;

    margin-top:4px;

    color:#94a3b8;

    font-size:.82rem;
}
.notice-body{
    color:#475569;

    line-height:1.7;

    font-size:.95rem;

    padding-left:64px;
}
.notice-actions{
    margin-top:16px;

    padding-left:64px;
}
.empty-notice{
    text-align:center;

    padding:40px 20px;

    color:#94a3b8;

    background:#f8fafc;

    border-radius:18px;
}
.notice-create-panel label{
    margin-right:0 !important;
    padding-left:0 !important;
}

.notice-create-panel textarea{
    margin-right:0 !important;
}
.wa-hero{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;

    padding:24px;

    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );

    border-radius:24px;

    color:#fff;

    margin-bottom:20px;

    box-shadow:0 15px 35px rgba(22,163,74,.18);
}

.wa-hero-panel h1{
    margin:0;
    font-size:1.8rem;
    font-weight:800;
}

.wa-hero-panel p{
    margin-top:6px;
    opacity:.9;
}
#retryPending{
    background:#fff !important;
    color:#15803d !important;
    border:none;
    font-weight:700;
}
.wa-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;

    margin-bottom:20px;
}

.wa-stat-card{
    background:#fff;

    border-radius:20px;

    padding:20px;

    box-shadow:0 8px 25px rgba(15,23,42,.06);

    border:1px solid #ecfdf5;

    transition:.25s ease;
}

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

.wa-stat-card span{
    display:block;

    color:#64748b;

    font-size:.9rem;
}

.wa-stat-card strong{
    display:block;

    margin-top:10px;

    font-size:2rem;
    font-weight:800;
}
.wa-stat-card.sent{
    border-left:5px solid #22c55e;
}

.wa-stat-card.sent strong{
    color:#16a34a;
}

.wa-stat-card.failed{
    border-left:5px solid #ef4444;
}

.wa-stat-card.failed strong{
    color:#dc2626;
}

.wa-stat-card.active{
    border-left:5px solid #3b82f6;
}

.wa-stat-card.active strong{
    color:#2563eb;
}
.wa-grid{
    display:grid;
    grid-template-columns:minmax(0, 1.3fr) minmax(280px, .7fr);
    gap:20px;
    margin-bottom:20px;
    align-items:start;
}
.broadcast-panel{
    background:#fff;
    border-radius:24px;
    border:1px solid #ecfdf5;
    box-shadow:0 10px 30px rgba(22,163,74,.08);
    position:relative;
    z-index:1;
    isolation:isolate;
}
.broadcast-panel form {
    display:flex;
    flex-direction:column;
    gap:12px;
}
.broadcast-panel input,
.broadcast-panel textarea {
    width:100%;
    box-sizing:border-box;
    padding:18px;
    margin:0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.broadcast-panel textarea {
    min-height:130px;
    resize:vertical;
}
.broadcast-panel button {
    width:100%;
    justify-content:center;
}
.quick-actions2 {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:100px;
}
.quick-action{
    border:none;
    background:#f0fdf4;
    color:#166534;
    padding:18px;
    border-radius:18px;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
    text-align:left;
}

.quick-action:hover{
    background:#dcfce7;
    transform:translateY(-2px);
}

@media (max-width: 900px) {
    .wa-grid {
        grid-template-columns:1fr;
        gap:16px;
    }

    .broadcast-panel,
    .quick-info {
        width:100%;
    }

    .broadcast-panel input,
    .broadcast-panel textarea {
        padding:14px 15px;
    }

    .quick-actions2 {
        margin-bottom:0;
    }

    .template-card-head {
        justify-content:center;
        text-align:center;
    }

    .template-save-btn {
        width:100%;
        max-width:220px;
    }
}

#templateList > div{
    background:#fff;

    border:1px solid #ecfdf5;

    border-radius:18px;

    padding:18px;

    margin-bottom:16px;

    box-shadow:0 4px 15px rgba(22,163,74,.05);
    position:relative;
    z-index:0;
}
.template-card {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:18px;
    border-bottom:1px solid #e2e6ef;
    padding-bottom:14px;
}
.template-card-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}
.template-save-btn {
    align-self:center;
}
#templateList button,
#templateList [data-template] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
#templateList textarea{
    width: 95%;    

    min-height:130px;

    border:1.5px solid #dbeafe;

    border-radius:16px;

    padding:14px;

    font-size:.92rem;

    background:#fafafa;
}

#templateList textarea:focus{
    outline:none;

    border-color:#16a34a;

    box-shadow:0 0 0 4px rgba(22,163,74,.08);
}
#logsMeta{
    margin-bottom:15px;

    color:#64748b;

    font-size:.9rem;
}
.status-sent{
    background:#dcfce7;
    color:#166534;

    padding:6px 10px;

    border-radius:999px;

    font-size:.8rem;
    font-weight:700;
}

.status-failed{
    background:#fee2e2;
    color:#b91c1c;

    padding:6px 10px;

    border-radius:999px;

    font-size:.8rem;
    font-weight:700;
}

.settings-hero{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:24px;

    margin-bottom:20px;

    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );

    border-radius:24px;

    color:#fff;

    box-shadow:0 15px 35px rgba(22,163,74,.18);
}

.settings-title h2{
    margin:0;
    font-size:1.8rem;
    font-weight:800;
}

.settings-title p{
    margin-top:6px;
    opacity:.9;
}
.settings-status{
    display:flex;
    align-items:center;
    gap:10px;

    background:rgba(255,255,255,.18);

    padding:10px 16px;

    border-radius:999px;

    font-weight:600;
}

.status-dot{
    width:10px;
    height:10px;

    border-radius:50%;

    background:#fff;

    animation:pulse-status 2s infinite;
}

@keyframes pulse-status{
    0%{opacity:1}
    50%{opacity:.4}
    100%{opacity:1}
}
.user-management-cta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:45px;
    margin-bottom:20px;
    background:linear-gradient(135deg,#dcfce7,#ffffff);
    border:1px solid #dcfce7;
    border-radius:20px;
    box-shadow:0 8px 20px rgba(22,163,74,.05);
}

.user-management-cta strong{
    display:block;
    margin-bottom:6px;
    font-size:1.25rem;
    font-weight:700;
}

.user-management-cta p{
    margin:0;
    color:#64748b;
}

.user-management-link{
    color:#2563eb;
    font-weight:700;
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:color .2s ease, border-color .2s ease;
}

.user-management-link:hover,
.user-management-link:focus{
    color:#1d4ed8;
    border-color:#1d4ed8;
}
.settings-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
    gap:20px;

    margin-bottom:24px;
}
.settings-card{
    background:#fff;

    border:1px solid #ecfdf5;

    border-radius:24px;

    padding:22px;

    box-shadow:0 10px 25px rgba(22,163,74,.06);

    transition:.25s ease;
}

.settings-card:hover{
    transform:translateY(-2px);
}

.settings-card .form-row > div{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.settings-card label{
    display:block;
    font-weight:600;
    font-size:14px;
    color:#334155;
    margin:0;
}

.settings-card input,
.settings-card textarea{
    width:100%;
    box-sizing:border-box;
    border-radius:12px;
    border:1px solid #e5e7eb;
    padding:12px 16px;
    font-size:14px;
    color:#1f2937;
}

.settings-card input:focus,
.settings-card textarea:focus{
    outline:none;
    border-color:#16a34a;
    box-shadow:0 0 0 3px rgba(22,163,74,.1);
}

.settings-card > label{
    display:block;
    margin-top:12px;
    margin-bottom:8px;
    font-weight:600;
    font-size:14px;
    color:#334155;
}
.settings-card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:20px;
}

.settings-card-header h3{
    margin:0;

    font-size:1.1rem;
    font-weight:700;

    color:#0f172a;
}

.settings-card-header span{
    background:#f0fdf4;

    color:#15803d;

    padding:6px 12px;

    border-radius:999px;

    font-size:.78rem;
    font-weight:600;
}
.formula-box{
    margin-top:18px;

    padding:16px;

    border-radius:16px;

    background:#f0fdf4;

    color:#166534;

    font-weight:700;

    border:1px solid #dcfce7;
}
.switch{
    position:relative;
    width:60px;
    height:32px;
}

.switch input{
    opacity:0;
    width:0;
    height:0;
}

.slider{
    position:absolute;
    inset:0;

    cursor:pointer;

    background:#cbd5e1;

    border-radius:999px;

    transition:.3s;
}

.slider:before{
    content:"";

    position:absolute;

    width:24px;
    height:24px;

    left:4px;
    top:4px;

    background:#fff;

    border-radius:50%;

    transition:.3s;
}

.switch input:checked + .slider{
    background:#16a34a;
}

.switch input:checked + .slider:before{
    transform:translateX(28px);
}
.settings-footer{
    display:flex;
    justify-content:flex-end;

    margin-top:10px;
}

.save-settings-btn{
    min-width:220px;
    height:56px;

    border-radius:18px;

    font-size:1rem;
    font-weight:700;

    box-shadow:0 10px 20px rgba(22,163,74,.15);
}
.premium-card{
    background:linear-gradient(
        135deg,
        #fffbeb,
        #ffffff
    );

    border:1px solid #fde68a;
}

.premium-card .settings-card-header span{
    background:#fef3c7;
    color:#92400e;
}
.toggle-box{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;
    padding:12px 0;
}

.toggle-box strong{
    display:block;
    margin-bottom:6px;
    font-weight:600;
    color:#334155;
}

.toggle-box p{
    margin:0;
    color:#64748b;
    font-size:14px;
}
.settings-card:nth-child(1){
    border-top:4px solid #16a34a;
}

.settings-card:nth-child(2){
    border-top:4px solid #3b82f6;
}

.settings-card:nth-child(3){
    border-top:4px solid #f59e0b;
}

.settings-card:nth-child(4){
    border-top:4px solid #a855f7;
}
.profile-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;

    padding:28px;

    background:#fff;

    border:1px solid #ecfdf5;
    border-radius:24px;

    box-shadow:0 10px 30px rgba(22,163,74,.08);

    margin-bottom:20px;
}
.profile-avatar{
    width:90px;
    height:90px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );

    color:#fff;

    font-size:2rem;
    font-weight:800;

    flex-shrink:0;

    box-shadow:0 12px 25px rgba(22,163,74,.18);
    position:relative;
    overflow:visible;
    cursor:pointer;
}
.profile-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.profile-avatar-default{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#fff}
.profile-avatar-default svg{width:68%;height:68%;fill:currentColor}
.profile-avatar-edit{position:absolute;right:-9px;bottom:-7px;width:31px;height:31px;display:flex;align-items:center;justify-content:center;background:#19a7d8;border:3px solid #fff;border-radius:50%;color:#fff;line-height:1}
.profile-avatar-edit svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.profile-details{
    flex:1;
}

.profile-details h1{
    margin:0;

    font-size:1.8rem;
    font-weight:800;

    color:#0f172a;
}

.profile-details p{
    margin:6px 0 12px;

    color:#64748b;

    font-size:.95rem;
}
.profile-role{
    display:inline-flex;
    align-items:center;

    padding:8px 14px;

    border-radius:999px;

    font-size:.82rem;
    font-weight:700;
}
.role-super_admin{
    background:#fef3c7;
    color:#92400e;
}

.role-admin{
    background:#dbeafe;
    color:#1d4ed8;
}

.role-operator{
    background:#dcfce7;
    color:#166534;
}

.role-farmer{
    background:#f1f5f9;
    color:#475569;
}
.profile-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:16px;

    margin-bottom:20px;
}
.profile-stat{
    background:#fff;

    border:1px solid #ecfdf5;

    border-radius:20px;

    padding:18px;

    text-align:center;

    box-shadow:0 6px 20px rgba(22,163,74,.05);
}

.profile-stat span{
    display:block;

    color:#64748b;

    font-size:.85rem;

    margin-bottom:8px;
}

.profile-stat strong{
    font-size:1.1rem;
    font-weight:700;

    color:#0f172a;
}
.profile-edit-card{
    background:#fff;

    border:1px solid #ecfdf5;

    border-radius:24px;

    padding:24px;

    box-shadow:0 10px 25px rgba(22,163,74,.06);
}
.profile-edit-header{
    margin-bottom:20px;
}

.profile-edit-header h2{
    margin:0 0 6px;

    font-size:1.3rem;
    font-weight:700;

    color:#0f172a;
}

.profile-edit-header p{
    margin:0;

    color:#64748b;
}
.profile-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:42px;
    margin-bottom:18px;
    margin-right: 28px;
}
.profile-edit-card label{
    display:block;
    margin-bottom:8px;
    margin-right:28px;

    color:#475569;

    font-size:.9rem;
    font-weight:600;
}
.profile-edit-card input,
.profile-edit-card select{
    width:100%;

    padding:14px 16px;

    border:1.5px solid #dbeafe;
    border-radius:16px;

    background:#fff;

    transition:.2s;
}

.profile-edit-card input:focus,
.profile-edit-card select:focus{
    outline:none;

    border-color:#16a34a;

    box-shadow:0 0 0 4px rgba(22,163,74,.08);
}
.profile-edit-card .actions{
    margin-top:24px;
}

.profile-edit-card .btn.primary{
    min-width:180px;
    height:54px;

    border-radius:16px;

    font-weight:700;

    box-shadow:0 10px 20px rgba(22,163,74,.15);
}
.profile-hero .btn.ghost{
    background:#f0fdf4;
    color:#15803d;

    border:1px solid #dcfce7;
}

.profile-hero .btn.ghost:hover{
    background:#dcfce7;
}
.profile-stat:nth-child(1){
    border-top:4px solid #16a34a;
}

.profile-stat:nth-child(2){
    border-top:4px solid #3b82f6;
}

.profile-stat:nth-child(3){
    border-top:4px solid #f59e0b;
}

.profile-stat:nth-child(4){
    border-top:4px solid #a855f7;
}
.audit-hero{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:28px;

    margin-bottom:20px;

    background:linear-gradient(
        135deg,
        #0f172a,
        #1e293b
    );

    border-radius:24px;

    color:#fff;

    box-shadow:0 15px 40px rgba(15,23,42,.25);
}

.audit-hero h1{
    margin:0;
    font-size:1.8rem;
    font-weight:800;
    color:#ffffff !important;
}

.audit-hero p,
.audit-hero span,
.audit-hero strong,
.audit-hero div{
    color:#ffffff !important;
}
.audit-dashboard{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:16px;

    margin-bottom:20px;
}

.audit-card{
    background:#fff;

    border-radius:20px;

    padding:20px;

    border:1px solid #e2e8f0;

    box-shadow:0 8px 25px rgba(15,23,42,.05);

    text-align:center;
}

.audit-card span{
    display:block;

    color:#64748b;

    font-size:.85rem;

    margin-bottom:10px;
}

.audit-card strong{
    font-size:2rem;
    font-weight:800;

    color:#0f172a;
}
.audit-card:nth-child(1){
    border-top:4px solid #16a34a;
}

.audit-card:nth-child(2){
    border-top:4px solid #3b82f6;
}

.audit-card:nth-child(3){
    border-top:4px solid #f59e0b;
}
.audit-filters{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.filter-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
}
.filter-grid label{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.filter-grid span{
    font-size:.85rem;
    font-weight:600;
    color:#475569;
}
.audit-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}
#logsContainer{
    min-height:300px;
}
#logsContainer .audit-logs-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

#logsContainer thead{
    background:#f8fafc;
}

#logsContainer th{
    padding:15px;

    text-align:left;

    font-size:.85rem;
    font-weight:700;

    color:#ffffff;

    border-bottom:1px solid #e2e8f0;
    background:#1e293b;
}

#logsContainer th,
#logsContainer td{
    padding:14px 15px;
    border-bottom:1px solid #f1f5f9;
    vertical-align:top;
    word-break:break-word;
}

#logsContainer .audit-log-cell{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

#logsContainer .audit-log-value{
    display:block;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
}

#logsContainer .audit-logs-table th:nth-child(6),
#logsContainer .audit-logs-table td:nth-child(6){
    width:28%;
}

#logsContainer .audit-logs-table th:nth-child(7),
#logsContainer .audit-logs-table td:nth-child(7){
    width:12%;
}
#logsContainer tbody tr{
    transition:.15s ease;
}

#logsContainer tbody tr:hover{
    background:#f8fafc;
}
.audit-badge{
    display:inline-flex;
    align-items:center;

    padding:6px 12px;

    border-radius:999px;

    background:#eff6ff;

    color:#1d4ed8;

    font-size:.78rem;
    font-weight:700;
}
.empty-state{
    text-align:center;

    padding:60px 20px;

    color:#94a3b8;

    font-size:1rem;
}
.error{
    padding:18px;

    border-radius:16px;

    background:#fee2e2;

    color:#b91c1c;

    font-weight:600;
}
#exportExcel{
    background:#16a34a;
    color:#ffffff;
}

#exportPdf{
    background:#dc2626;
    color:#ffffff;
}
.audit-hero::after{
    content:"🔒 SECURE";

    font-size:.8rem;
    font-weight:700;
    letter-spacing:1px;

    padding:8px 14px;

    background:rgba(255,255,255,.1);

    border-radius:999px;
}
.pricing-hero{
    text-align:center;

    padding:50px 24px;

    margin-bottom:24px;

    border-radius:28px;

    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );

    color:#fff;

    box-shadow:0 20px 45px rgba(22,163,74,.18);
}

.pricing-hero h1{
    margin:0;
    font-size:2.4rem;
    font-weight:800;
}

.pricing-hero p{
    margin-top:12px;
    opacity:.92;
    font-size:1.05rem;
}
.subscription-overview{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:16px;

    margin-bottom:28px;
}

.subscription-card{
    background:#fff;

    border:1px solid #ecfdf5;

    border-radius:20px;

    padding:18px;

    text-align:center;

    box-shadow:0 8px 20px rgba(22,163,74,.05);
}

.subscription-card span{
    display:block;

    color:#64748b;

    font-size:.85rem;

    margin-bottom:8px;
}

.subscription-card strong{
    font-size:1.2rem;
    font-weight:800;
}
.current-plan{
    background:linear-gradient(
        135deg,
        #dcfce7,
        #ffffff
    );

    border:2px solid #22c55e;
}

.current-plan strong{
    color:#15803d;
}
.modern-pricing-grid{
    display:grid;
    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:24px;

    align-items:stretch;
}
.modern-plan-card{
    position:relative;

    display:flex;
    flex-direction:column;

    background:#fff;

    border:1px solid #ecfdf5;

    border-radius:28px;

    padding:28px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(22,163,74,.06);

    transition:.3s ease;
}

.modern-plan-card:hover{
    transform:translateY(-6px);

    box-shadow:0 20px 40px rgba(22,163,74,.12);
}
.plan-popular{
    border:2px solid #22c55e;

    transform:scale(1.03);
}

.plan-popular:hover{
    transform:scale(1.03) translateY(-6px);
}
.plan-pro{
    background:linear-gradient(
        135deg,
        #fffbeb,
        #ffffff
    );

    border:2px solid #f59e0b;
}
.plan-trial{
    background:linear-gradient(
        135deg,
        #eff6ff,
        #ffffff
    );

    border:2px solid #60a5fa;
}
.plan-ribbon{
    position:absolute;

    top:16px;
    right:-35px;

    width:150px;

    text-align:center;

    background:#16a34a;

    color:#fff;

    font-size:.78rem;
    font-weight:700;

    padding:8px;

    transform:rotate(45deg);
}
.modern-plan-header{
    text-align:center;

    margin-bottom:22px;
}

.modern-plan-header h2{
    margin:0;

    font-size:1.5rem;
    font-weight:800;

    color:#0f172a;
}
.modern-price{
    margin:16px 0 8px;

    font-size:3rem;
    font-weight:900;

    color:#16a34a;

    line-height:1;
}

.modern-plan-header span{
    color:#64748b;
    font-size:.9rem;
}
.modern-summary{
    text-align:center;

    color:#475569;

    line-height:1.6;

    margin-bottom:24px;
}
.modern-features{
    list-style:none;

    padding:0;
    margin:0;

    flex:1;
}

.modern-features li{
    display:flex;
    align-items:center;

    gap:10px;

    padding:12px 0;

    border-bottom:1px solid #f1f5f9;

    color:#334155;
}

.modern-features li:last-child{
    border-bottom:none;
}
.modern-plan-footer{
    margin-top:24px;
}

.modern-plan-footer .btn{
    width:100%;
    height:56px;

    border-radius:18px;

    font-size:.95rem;
    font-weight:700;
}
.btn.disabled{
    background:#f1f5f9 !important;
    color:#94a3b8 !important;
    cursor:not-allowed;
}

.btn.disabled.muted{
    background:#f8fafc !important;
}
.plan-popular::before{
    content:"";

    position:absolute;

    inset:-100px;

    background:
    radial-gradient(
        circle,
        rgba(34,197,94,.12),
        transparent 70%
    );

    pointer-events:none;
}
.plan-popular .modern-price{
    font-size:3.5rem;
    color:#15803d;
}
/* USER MANAGEMENT STYLES */
.user-management-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    padding:28px;
    background:#fff;
    border:1px solid #ecfdf5;
    border-radius:24px;
    margin-bottom:24px;
    box-shadow:0 10px 30px rgba(22,163,74,.08);
}

.user-management-header h1{
    margin:0 0 8px 0;
    font-size:1.8rem;
    font-weight:800;
    color:#0f172a;
}

.user-management-header p{
    margin:0;
    color:#64748b;
    font-size:14px;
}

.user-stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:16px;
    margin-bottom:24px;
}

.user-stat-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:20px;
    box-shadow:0 4px 12px rgba(0,0,0,.04);
}

.user-stat-card h3{
    margin:0 0 12px 0;
    font-size:13px;
    font-weight:600;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.user-stat-card .value{
    font-size:2.5rem;
    font-weight:800;
    color:#16a34a;
}

.user-search{
    padding:12px 16px;
    border-radius:12px;
    border:1px solid #e5e7eb;
    font-size:14px;
    transition:.2s ease;
    width:280px;
}

.user-search:focus{
    outline:none;
    border-color:#16a34a;
    box-shadow:0 0 0 3px rgba(22,163,74,.1);
}

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


.user-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:20px;
    box-shadow:0 4px 12px rgba(0,0,0,.04);
    transition:.25s ease;
}

.user-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(0,0,0,.08);
    border-color:#d1d5db;
}

.user-card-top{
    display:flex;
    gap:16px;
    align-items:flex-start;
    margin-bottom:16px;
    padding-bottom:16px;
    border-bottom:1px solid #f3f4f6;
}

.user-avatar{
    width:56px;
    height:56px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:1.4rem;
    color:#fff;
    flex-shrink:0;
    background:linear-gradient(135deg,#16a34a,#22c55e);
}

.user-card-top h3{
    margin:0 0 6px 0;
    font-size:1.1rem;
    font-weight:700;
    color:#0f172a;
}

.role-badge{
    display:inline-block;
    padding:4px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.role-badge.admin{
    background:#fee2e2;
    color:#991b1b;
}

.role-badge.operator{
    background:#dbeafe;
    color:#1e40af;
}

.role-badge.farmer{
    background:#fef3c7;
    color:#92400e;
}

.user-info{
    margin-bottom:16px;
}

.user-info p{
    margin:8px 0;
    font-size:13px;
    color:#475569;
    line-height:1.5;
}

.user-actions{
    display:flex;
    gap:8px;
    justify-content:flex-end;
    padding-top:12px;
    border-top:1px solid #f3f4f6;
    flex-wrap:wrap;
}

.user-actions .user-btn,.user-btn .delete{
    padding:8px 12px;
    font-size:14px;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-width:44px;
    height:40px;
    line-height:1;
    transition:transform .06s ease, filter .06s ease;
    background:var(--primary,#0ea5a0);
    color:#fff;
    border:0;
}
.user-actions .user-btn.delete{
    background:#ef4444;
     border:1px solid #e5e7eb;
    color:#ffff;
   
}
.user-actions :hover{ filter:brightness(.96); }
.user-actions :active{ transform:translateY(1px); }


/* =====================================
   FARMER PORTAL STYLES
===================================== */

.farmer-portal-hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    padding:28px;
    background:linear-gradient(135deg, #ecfdf5 0%, #d1fae5 45%, #bbf7d0 100%);
    border:1px solid #a7f3d0;
    border-radius:24px;
    box-shadow:0 16px 40px rgba(22, 163, 74, .14);
    margin-bottom:24px;
}

.farmer-avatar{
    width:80px;
    height:80px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, #16a34a, #22c55e);
    color:#fff;
    font-size:2rem;
    font-weight:800;
    flex-shrink:0;
    box-shadow:0 12px 25px rgba(22,163,74,.2);
}

.farmer-hero h2{
    margin:0 0 6px 0;
    font-size:1.6rem;
    font-weight:800;
    color:#0f172a;
}

.farmer-hero p{
    margin:4px 0;
    color:#64748b;
    font-size:.95rem;
}

.farmer-stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:16px;
    margin-bottom:24px;
}

.farmer-stat-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:20px;
    padding:22px;
    box-shadow:0 4px 12px rgba(0,0,0,.04);
    transition:.25s ease;
}

.farmer-stat-card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.farmer-stat-card h3{
    margin:0 0 10px 0;
    font-size:13px;
    font-weight:600;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.farmer-stat-card .value{
    font-size:2.2rem;
    font-weight:800;
    color:#16a34a;
}

.portal-section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    gap:12px;
    flex-wrap:wrap;
}

.portal-section-header h3{
    margin:0;
    font-size:1.1rem;
    font-weight:700;
    color:#0f172a;
}

.statement-controls{
    display:flex;
    gap:12px;
    align-items:flex-end;
    flex-wrap:wrap;
}

.statement-controls > div{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.statement-controls label{
    font-size:13px;
    font-weight:600;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.statement-controls select,
.statement-controls input{
    height:44px;
    border-radius:12px;
    border:1px solid #e5e7eb;
    padding:0 12px;
    font-size:14px;
    background:#fff;
}

.statement-controls select:focus,
.statement-controls input:focus{
    outline:none;
    border-color:#16a34a;
    box-shadow:0 0 0 3px rgba(22,163,74,.1);
}

.statement-controls .btn{
    height:44px;
    padding:0 20px;
    border-radius:12px;
    font-size:14px;
    font-weight:600;
}

.statement-preview{
    margin-top:16px;
    padding:20px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:18px;
}

.statement-preview .portal-section-header{
    margin-bottom:16px;
}

.statement-preview .farmer-stat-card{
    padding:16px;
    margin-bottom:12px;
}

.statement-preview .farmer-stat-card h3{
    font-size:12px;
    margin-bottom:6px;
}

.statement-preview .farmer-stat-card .value{
    font-size:1.5rem;
}

.portal-collection-table,
.portal-payment-table{
    width:100%;
    border-collapse:collapse;
}

.portal-collection-table thead,
.portal-payment-table thead{
    background:#f8fafc;
}

.portal-collection-table th,
.portal-payment-table th{
    padding:14px;
    text-align:left;
    color:#475569;
    font-size:.85rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
    border-bottom:1px solid #e5e7eb;
}

.portal-collection-table td,
.portal-payment-table td{
    padding:14px;
    border-bottom:1px solid #f1f5f9;
    color:#334155;
}

.portal-collection-table tbody tr:hover,
.portal-payment-table tbody tr:hover{
    background:#f8fbff;
}

.portal-empty-state{
    text-align:center;
    padding:40px 20px;
    color:#94a3b8;
    font-size:14px;
    background:#f8fafc;
    border-radius:16px;
}

.portal-status-badge{
    display:inline-block;
    padding:6px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
}

.status-paid{
    background:#dcfce7;
    color:#166534;
}

.status-pending{
    background:#fef3c7;
    color:#92400e;
}

.status-synced{
    background:#dbeafe;
    color:#1e40af;
}

@media(max-width:480px){
    .farmer-portal-hero{
        padding:18px;
    }

    .farmer-avatar{
        width:60px;
        height:60px;
        font-size:1.4rem;
    }

    .farmer-hero h2{
        font-size:1.3rem;
    }

    .farmer-stats-grid{
        grid-template-columns:1fr;
    }

    .farmer-stat-card{
        padding:16px;
    }

    .farmer-stat-card .value{
        font-size:1.8rem;
    }
}
.register-result-body{

    display:grid;

    grid-template-columns:1fr 320px;

    gap:40px;

    align-items:start;

}
.register-result-info{

    display:flex;

    flex-direction:column;
    margin-left:20px;

    gap:14px;

    justify-content:flex-start !important;

    align-items:flex-start;

    height:auto !important;
}
.result-item{

    display:flex;
    flex:none !important;

    flex-direction:column;
    align-items: flex-start;

    gap:4px;

    margin-left:14px;

    padding:0;
}
.result-item .muted{

    font-size:14px;

    color:#94a3b8;
}
.result-item strong{

    font-size:24px;

    font-weight:700;

    color:#0f172a;
}
.register-result-qr{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    padding-top:10px;
}
.register-result-actions{

    margin-top:16px;

    display:flex;

    gap:12px;

    justify-content:center;

    flex-wrap:wrap;
}
.register-result-actions .btn{

    min-width:170px;

    justify-content:center;
}
#r_qr{

    width:220px !important;

    height:220px !important;

    object-fit:contain;

    background:#fff;

    border:1px solid #d1fae5;

    border-radius:20px;

    padding:10px;

    box-shadow:
      0 10px 25px rgba(15,23,42,.08);
}
.register-result-info > *{

    flex:none !important;
}

/* Settings and WhatsApp page-specific layouts. */
.settings-page,
.whatsapp-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
}

.settings-header,
.whatsapp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    border: 1px solid rgba(22, 163, 74, .14);
    border-radius: 20px;
    background: linear-gradient(135deg, #ecfdf5, #ffffff);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}

.settings-header h1,
.whatsapp-header h1 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.1;
}

.settings-header p,
.whatsapp-header p {
    margin: 8px 0 0;
    color: #64748b;
}

.settings-header__eyebrow,
.settings-section__eyebrow,
.whatsapp-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #15803d;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.settings-header__status,
.settings-header__center,
.whatsapp-channel-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(22, 163, 74, .18);
    border-radius: 999px;
    background: #f0fdf4;
    color: #15803d;
    font-size: .78rem;
    font-weight: 700;
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.settings-section,
.broadcast-panel,
.quick-info,
.whatsapp-preview-panel,
.whatsapp-stats-panel,
.whatsapp-detail-panel {
    padding: 24px;
    border: 1px solid #e4e8e2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
}

.settings-section__heading,
.whatsapp-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.settings-section__heading h3,
.whatsapp-section-heading h2,
.whatsapp-detail-panel h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.25rem;
}

.settings-section__heading p,
.whatsapp-section-heading p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: .9rem;
}

.pricing-layout,
.whatsapp-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, .72fr);
    gap: 20px;
    align-items: start;
}

.pricing-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.whatsapp-page .whatsapp-workspace > .broadcast-panel,
.whatsapp-page .whatsapp-workspace > .whatsapp-sidebar {
    display: flex;
    min-width: 0;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    visibility: visible;
    opacity: 1;
}

.whatsapp-page .whatsapp-workspace > .broadcast-panel {
    flex-direction: column;
    align-self: start;
    min-height: 420px;
    overflow: visible;
    grid-column: 1;
    grid-row: 1;
}

.whatsapp-page .whatsapp-workspace > .whatsapp-sidebar {
    flex-direction: column;
    align-self: start;
    grid-column: 2;
    grid-row: 1;
}

.pricing-card,
.quality-card {
    padding: 20px;
    border: 1px solid #e4e8e2;
    border-radius: 16px;
    background: #fbfdfb;
}

.pricing-card__header,
.toggle-box,
.broadcast-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.pricing-card__header { margin-bottom: 18px; }
.pricing-card__header > div { display: inline-flex; align-items: center; gap: 10px; }
.pricing-card__icon { font-size: 1.2rem; }
.pricing-card__badge { color: #15803d; font-size: .72rem; font-weight: 700; }
.pricing-card__badge.subtle { color: #64748b; }

.settings-field-grid,
.center-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.field-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-group--full { grid-column: 1 / -1; }
.field-group label,
.broadcast-field label { color: #334155; font-size: .84rem; font-weight: 700; }

.settings-page input,
.settings-page textarea,
.broadcast-panel input,
.broadcast-panel textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid #dfe7f4;
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    font-size: 1rem;
}

.settings-page input:focus,
.settings-page textarea:focus,
.broadcast-panel input:focus,
.broadcast-panel textarea:focus {
    outline: none;
    border-color: #16a34a;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .12);
}

.quality-grid { display: grid; grid-template-columns: minmax(140px, 180px) minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border-top: 1px solid #e4e8e2; }
.quality-grid--header { border-top: 0; color: #64748b; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.quality-grid__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.settings-preview,
.settings-info-panel { margin-top: 18px; padding: 16px; border-radius: 14px; background: #f0fdf4; color: #166534; }
.save-settings-btn { min-width: 190px; min-height: 50px; justify-content: center; box-shadow: 0 10px 22px rgba(22, 163, 74, .18); }

.whatsapp-sidebar { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.broadcast-form { display: flex; flex-direction: column; gap: 18px; }
.broadcast-field { display: flex; flex-direction: column; gap: 8px; }
.broadcast-panel textarea { min-height: 170px; resize: vertical; }
.broadcast-helper,
.broadcast-char-count,
.broadcast-validation-note { color: #64748b; font-size: .78rem; }
.broadcast-submit { min-width: 190px; min-height: 48px; justify-content: center; }
.recipient-summary { padding: 12px; border: 1px solid #dcefe1; border-radius: 12px; background: #f7fcf8; color: #166534; font-weight: 700; }
.quick-actions2 { display: flex; flex-direction: column; gap: 8px; }
.quick-action { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 70px; padding: 12px; border: 1px solid #e5ebe6; border-radius: 14px; background: #fff; color: #166534; cursor: pointer; text-align: left; }
.quick-action:hover, .quick-action:focus-visible { border-color: #86efac; background: #f7fcf8; outline: none; }
.quick-action__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; background: #ecfdf5; color: #15803d; }
.quick-action strong, .quick-action small { display: block; }
.quick-action small { margin-top: 3px; color: #64748b; font-size: .75rem; }
.whatsapp-preview-bubble { padding: 16px; border: 1px solid #dcefe1; border-radius: 14px 14px 14px 4px; background: #f0fdf4; }
.whatsapp-preview-bubble strong { display: block; color: #14532d; }
.whatsapp-preview-bubble p { min-height: 42px; margin: 8px 0 12px; color: #365044; white-space: pre-wrap; overflow-wrap: anywhere; }
.whatsapp-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wa-stat-card { padding: 11px; border: 1px solid #e5ebe6; border-radius: 12px; background: #fbfdfb; }
.wa-stat-card span { display: block; color: #64748b; font-size: .7rem; }
.wa-stat-card strong { display: block; margin-top: 5px; color: #15803d; font-size: 1.35rem; }

@media (max-width: 768px) {
    .whatsapp-workspace, .pricing-layout { grid-template-columns: 1fr; }
    .whatsapp-page .whatsapp-workspace > .broadcast-panel,
    .whatsapp-page .whatsapp-workspace > .whatsapp-sidebar {
        grid-column: 1;
        grid-row: auto;
    }
    .settings-header, .whatsapp-header { flex-direction: column; }
    .settings-field-grid, .center-form-grid { grid-template-columns: 1fr; }
    .broadcast-actions { align-items: stretch; flex-direction: column; }
    .broadcast-submit, .save-settings-btn { width: 100%; }
}

@media (max-width: 560px) {
    .settings-section, .broadcast-panel, .quick-info, .whatsapp-preview-panel, .whatsapp-stats-panel, .whatsapp-detail-panel { padding: 18px 16px; }
    .settings-section__heading, .whatsapp-section-heading { flex-direction: column; }
    .whatsapp-stats-grid { grid-template-columns: 1fr; }
    .broadcast-panel textarea { min-height: 145px; }
}

/* Premium WhatsApp communication-center treatment. */
.whatsapp-page {
    gap: 24px;
}

.whatsapp-page .whatsapp-header {
    position: relative;
    min-height: 132px;
    padding: 30px 34px;
    overflow: hidden;
    border-color: rgba(22, 163, 74, .16);
    background: linear-gradient(115deg, #f0fdf4 0%, #ffffff 64%, #f8fbff 100%);
}

.whatsapp-page .whatsapp-header::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -105px;
    width: 250px;
    height: 190px;
    border: 1px solid rgba(22, 163, 74, .12);
    border-radius: 50%;
    pointer-events: none;
}

.whatsapp-page .whatsapp-header > div,
.whatsapp-page .whatsapp-header > button {
    position: relative;
    z-index: 1;
}

.whatsapp-page .whatsapp-header h1 {
    letter-spacing: -.02em;
}

.whatsapp-page .whatsapp-header .btn {
    min-height: 44px;
    border-color: #d7e9dc;
    background: #ffffff;
    color: #166534;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
}

.whatsapp-page .broadcast-panel {
    border-color: #dce9df;
    border-radius: 22px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .07);
}

.whatsapp-page .broadcast-panel::before {
    content: "";
    display: block;
    width: 46px;
    height: 4px;
    margin-bottom: 20px;
    border-radius: 999px;
    background: linear-gradient(90deg, #16a34a, #86efac);
}

.whatsapp-page .whatsapp-section-heading h2,
.whatsapp-page .whatsapp-detail-panel h2 {
    letter-spacing: -.01em;
}

.whatsapp-page .broadcast-field label {
    font-size: .8rem;
    letter-spacing: .02em;
}

.whatsapp-page .broadcast-panel input,
.whatsapp-page .broadcast-panel textarea {
    border-color: #d8e3dc;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .02);
}

.whatsapp-page .broadcast-panel textarea {
    min-height: 184px;
    line-height: 1.55;
}

.whatsapp-page .recipient-summary {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 13px;
}

.whatsapp-page .recipient-summary__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #dcfce7;
    color: #15803d;
}

.whatsapp-page .broadcast-submit {
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(22, 163, 74, .2);
}

.whatsapp-page .whatsapp-sidebar {
    gap: 14px;
}

.whatsapp-page .quick-info,
.whatsapp-page .whatsapp-preview-panel,
.whatsapp-page .whatsapp-stats-panel {
    padding: 20px;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .055);
}

.whatsapp-page .quick-actions2 {
    gap: 8px;
}

.whatsapp-page .quick-action {
    min-height: 68px;
    border-color: #e0eae2;
    border-radius: 13px;
    transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.whatsapp-page .quick-action:hover,
.whatsapp-page .quick-action:focus-visible {
    border-color: #86efac;
    background: #f7fcf8;
    box-shadow: 0 8px 18px rgba(22, 163, 74, .08);
    transform: translateY(-1px);
}

.whatsapp-page .quick-action__icon {
    background: #eafaf0;
}

.whatsapp-page .whatsapp-preview-bubble {
    position: relative;
    padding: 18px;
    border-radius: 16px 16px 16px 5px;
    background: #effbf3;
}

.whatsapp-page .whatsapp-preview-bubble::after {
    content: "";
    position: absolute;
    left: -1px;
    bottom: -8px;
    width: 14px;
    height: 14px;
    background: #effbf3;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.whatsapp-page .whatsapp-preview-bubble p {
    font-size: .88rem;
}

.whatsapp-page .whatsapp-stats-grid {
    gap: 10px;
}

.whatsapp-page .whatsapp-stats-panel--hero {
    width: 100%;
    box-sizing: border-box;
    padding: 22px 24px;
}

.whatsapp-page .whatsapp-stats-panel--hero .whatsapp-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.whatsapp-page .whatsapp-preview-panel--hero {
    width: 100%;
    box-sizing: border-box;
    padding: 22px 24px;
}

.whatsapp-page .whatsapp-preview-panel--hero .whatsapp-preview-bubble {
    width: 100%;
    box-sizing: border-box;
}

.whatsapp-page .wa-stat-card {
    padding: 12px;
    border-radius: 13px;
}

.whatsapp-page .wa-stat-card strong {
    font-size: 1.5rem;
}

.whatsapp-page .whatsapp-detail-panel {
    border-radius: 18px;
}

/* Premium account connectivity badge used by the shared layout. */
.sidebar .sidebar-account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.sidebar .offline-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 108px;
    min-height: 30px;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
    color: #dbeafe;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 16px rgba(15, 23, 42, .14);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}

.sidebar .offline-badge .offline-badge-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), 0 0 10px currentColor;
}

.sidebar .offline-badge.online {
    border-color: rgba(134, 239, 172, .46);
    background: linear-gradient(135deg, rgba(22, 163, 74, .3), rgba(16, 185, 129, .14));
    color: #dcfce7;
}

.sidebar .offline-badge.offline {
    border-color: rgba(253, 186, 116, .46);
    background: linear-gradient(135deg, rgba(245, 158, 11, .26), rgba(234, 88, 12, .12));
    color: #fef3c7;
}