/* CFMS - County Government of Nyeri
   Main Stylesheet - Modernized & Cross-Browser Fixed */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Outfit:wght@600;700;800&display=swap');

:root {
    /* Nyeri County Official Theme */
    --primary: #1a5e2a;       /* County Green */
    --primary-dark: #0d3d18;  /* Deep Forest Green */
    --primary-light: #2d8a42; /* Medium Green */
    --secondary: #8B1a1a;     /* County Maroon/Red */
    --accent: #c8a227;        /* County Gold */
    --accent-dark: #a07d1a;   /* Deep Gold */
    --danger: #dc2626;
    --warning: #d97706;
    --success: #16a34a;
    --info: #0284c7;
    --bg: #f1f5f9;
    --bg-alt: #e8edf5;
    --card-bg: #ffffff;
    --text: #0f172a;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --sidebar-width: 255px;
    --navbar-height: 64px;
    --shadow: 0 1px 3px rgba(0,0,0,0.06),0 4px 16px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07),0 10px 30px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.14);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 5px;
    --transition: 0.2s ease;
}

*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}

body.cfms-body {
    font-family: 'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}
a{color:var(--primary);text-decoration:none;}
a:hover{color:var(--primary-dark);text-decoration:none;}
img{max-width:100%;height:auto;}

/* ── Logo size guards (prevent bleed-out) ── */
.cfms-navbar img,
.land-nav img          { width:auto;height:34px;max-width:none;-o-object-fit:contain;object-fit:contain;flex-shrink:0; }
.cfms-footer img       { width:auto;height:24px!important;max-width:none;-o-object-fit:contain;object-fit:contain;vertical-align:middle;flex-shrink:0; }
.footer-brand          { display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;flex-wrap:nowrap; }
.auth-header img       { width:auto;height:60px;max-width:none; }
.sidebar-header img    { width:auto;max-width:none; }

::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:#f1f5f9;}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:#94a3b8;}

/* NAVBAR */
.cfms-navbar {
    background: linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%);
    padding: 0 20px;
    height: var(--navbar-height);
    -webkit-box-shadow: 0 2px 16px rgba(10,52,96,0.3);
    box-shadow: 0 2px 16px rgba(10,52,96,0.3);
    position: fixed;
    top:0;left:0;right:0;
    z-index: 1050;
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
    -webkit-box-align: center!important;
    -ms-flex-align: center!important;
    align-items: center!important;
    -webkit-box-pack: justify!important;
    -ms-flex-pack: justify!important;
    justify-content: space-between!important;
}
/* Brand: always single row, never wrap */
.cfms-navbar .navbar-brand{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;text-decoration:none;padding:0;-ms-flex-negative:0;flex-shrink:0;white-space:nowrap;}
/* Collapse wrapper: take remaining space, right-align */
.cfms-navbar .navbar-collapse{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
.navbar-brand{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;text-decoration:none;padding:0;}
.brand-text{color:#fff;font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;letter-spacing:-0.3px;line-height:1.2;}
.brand-sub{font-size:10px;font-weight:400;color:rgba(255,255,255,0.55);display:block;letter-spacing:0.3px;}
.cfms-navbar .nav-link{color:rgba(255,255,255,0.85)!important;font-size:13px;padding:7px 13px!important;border-radius:var(--radius-sm);-webkit-transition:all var(--transition);transition:all var(--transition);font-weight:500;}
.cfms-navbar .nav-link:hover{color:#fff!important;background:rgba(255,255,255,0.12);}
.btn-nav-login{background:rgba(255,255,255,0.1)!important;border:1.5px solid rgba(255,255,255,0.25)!important;border-radius:var(--radius-sm)!important;}
.btn-nav-register{background:var(--accent)!important;color:#1a1a1a!important;border-radius:24px!important;padding:6px 18px!important;font-weight:600!important;}
.btn-nav-register:hover{background:var(--accent-dark)!important;color:#fff!important;}
.notification-bell{position:relative!important;}
.notif-badge{position:absolute;top:2px;right:4px;background:var(--danger);color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0 3px;line-height:1;}
.notif-dropdown{width:320px;padding:0;border:1px solid var(--border);-webkit-box-shadow:var(--shadow-lg);box-shadow:var(--shadow-lg);border-radius:var(--radius);overflow:hidden;}
.notif-item{border-bottom:1px solid var(--border);padding:10px 16px;white-space:normal;font-size:13px;-webkit-transition:background var(--transition);transition:background var(--transition);}
.notif-item:hover{background:var(--bg);}
.notif-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;}
.user-avatar-sm{width:32px;height:32px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;border-radius:50%;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-weight:700;font-size:13px;margin-right:7px;-webkit-box-shadow:0 2px 8px rgba(245,158,11,0.4);box-shadow:0 2px 8px rgba(245,158,11,0.4);}
.user-menu-toggle{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
.user-name-nav{font-size:13px;font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.navbar-toggler{border:none;background:rgba(255,255,255,0.12);border-radius:var(--radius-xs);padding:6px 10px;cursor:pointer;}
.navbar-toggler-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255,255,255,0.9%29' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");}

/* LAYOUT */
.cfms-layout{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:var(--navbar-height);min-height:calc(100vh - var(--navbar-height));}
/* Public pages: push content below fixed navbar, hero provides its own padding-top */
.cfms-public-main{margin-top:var(--navbar-height);min-height:calc(100vh - var(--navbar-height) - 70px);overflow-x:hidden;}
/* Public hero accounts for navbar via padding-top — do NOT add extra margin-top on hero itself */

/* SIDEBAR */
.cfms-sidebar{width:var(--sidebar-width);background:#fff;border-right:1px solid var(--border);position:fixed;top:var(--navbar-height);left:0;height:calc(100vh - var(--navbar-height));overflow-y:auto;overflow-x:hidden;z-index:900;-webkit-transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;-webkit-box-shadow:2px 0 12px rgba(0,0,0,0.04);box-shadow:2px 0 12px rgba(0,0,0,0.04);}
.cfms-sidebar::-webkit-scrollbar{width:3px;}
.cfms-sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.sidebar-header{padding:16px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#f8fafc,#f1f5f9);}
.sidebar-role-badge{display:inline-block;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font-size:10px;font-weight:700;padding:4px 12px;border-radius:20px;letter-spacing:0.8px;-webkit-box-shadow:0 2px 8px rgba(15,76,129,0.25);box-shadow:0 2px 8px rgba(15,76,129,0.25);}
.sidebar-nav{padding:8px 0 20px;}
.sidebar-section-title{display:block;font-size:10px;font-weight:700;letter-spacing:1.2px;color:var(--text-muted);text-transform:uppercase;padding:14px 18px 5px;}
.sidebar-link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;padding:9px 18px;color:var(--text-muted);text-decoration:none;font-size:13.5px;font-weight:500;border-left:3px solid transparent;-webkit-transition:all var(--transition);transition:all var(--transition);margin:1px 0;}
.sidebar-link:hover{color:var(--primary);background:rgba(15,76,129,0.05);border-left-color:rgba(15,76,129,0.3);text-decoration:none;}
.sidebar-link.active{color:var(--primary);background:rgba(15,76,129,0.09);border-left-color:var(--primary);font-weight:600;}
.sidebar-link i{width:18px;text-align:center;font-size:14px;}

/* MAIN CONTENT */
.cfms-main{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:var(--sidebar-width);min-width:0;overflow-x:hidden;overflow-y:visible;}
.cfms-main-content{padding:28px 28px 40px;max-width:1400px;}

/* STAT CARDS */
.stat-card{background:#fff;border-radius:var(--radius);padding:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:16px;-webkit-box-shadow:var(--shadow);box-shadow:var(--shadow);border:1px solid var(--border);-webkit-transition:all 0.25s ease;transition:all 0.25s ease;height:100%;position:relative;overflow:hidden;}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--radius) var(--radius) 0 0;}
.stat-card:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:var(--shadow-md);box-shadow:var(--shadow-md);}
.stat-icon{width:52px;height:52px;border-radius:var(--radius-sm);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:20px;-ms-flex-negative:0;flex-shrink:0;}
.stat-icon.blue{background:#dbeafe;color:#1d4ed8;}
.stat-icon.orange{background:#fef3c7;color:#d97706;}
.stat-icon.red{background:#fee2e2;color:#dc2626;}
.stat-icon.green{background:#dcfce7;color:#16a34a;}
.stat-icon.teal{background:#ccfbf1;color:#0d9488;}
.stat-icon.purple{background:#ede9fe;color:#7c3aed;}
.stat-info{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;}
.stat-info h3{font-family:'Outfit',sans-serif;font-size:28px;font-weight:700;color:var(--text);line-height:1.1;margin-bottom:3px;}
.stat-info p{font-size:12px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin:0;}
.stat-card.blue::before{background:linear-gradient(90deg,#3b82f6,#60a5fa);}
.stat-card.orange::before{background:linear-gradient(90deg,#f59e0b,#fbbf24);}
.stat-card.red::before{background:linear-gradient(90deg,#ef4444,#f87171);}
.stat-card.green::before{background:linear-gradient(90deg,#22c55e,#4ade80);}
.stat-card.teal::before{background:linear-gradient(90deg,#14b8a6,#2dd4bf);}
.stat-card.purple::before{background:linear-gradient(90deg,#8b5cf6,#a78bfa);}

/* CARDS */
.cfms-card{background:#fff;border-radius:var(--radius);-webkit-box-shadow:var(--shadow);box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden;}
.cfms-card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:12px;background:#fafbfc;}
.cfms-card-title{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;color:var(--text);margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;}
.cfms-card-body{padding:20px;}

/* BUTTONS */
.btn-cfms-primary{background:linear-gradient(135deg,var(--primary-light),var(--primary));color:#fff;border:none;padding:9px 22px;border-radius:var(--radius-sm);font-weight:600;font-size:13.5px;cursor:pointer;-webkit-transition:all var(--transition);transition:all var(--transition);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;line-height:1.4;text-decoration:none;-webkit-box-shadow:0 2px 8px rgba(15,76,129,0.25);box-shadow:0 2px 8px rgba(15,76,129,0.25);}
.btn-cfms-primary:hover{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;-webkit-transform:translateY(-1px);transform:translateY(-1px);-webkit-box-shadow:0 4px 16px rgba(15,76,129,0.35);box-shadow:0 4px 16px rgba(15,76,129,0.35);text-decoration:none;}
.btn-cfms-secondary{background:#fff;color:var(--primary);border:1.5px solid var(--primary);padding:8px 20px;border-radius:var(--radius-sm);font-weight:600;font-size:13.5px;-webkit-transition:all var(--transition);transition:all var(--transition);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;cursor:pointer;text-decoration:none;line-height:1.4;}
.btn-cfms-secondary:hover{background:var(--primary);color:#fff;text-decoration:none;}
.btn{border-radius:var(--radius-xs);font-weight:500;}
.btn-sm{padding:5px 12px;font-size:12.5px;}
.btn-primary{background:var(--primary);border-color:var(--primary);}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);}
.btn-success{background:var(--success);border-color:var(--success);}
.btn-danger{background:var(--danger);border-color:var(--danger);}
.btn-warning{background:var(--warning);border-color:var(--warning);color:#fff;}

/* TABLES */
.cfms-table{width:100%;border-collapse:collapse;font-size:13px;}
.cfms-table thead th{background:#f8fafc;color:var(--text-muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:0.7px;padding:12px 16px;border-bottom:2px solid var(--border);white-space:nowrap;}
.cfms-table tbody td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle;}
.cfms-table tbody tr:hover{background:#f8fafc;}
.cfms-table tbody tr:last-child td{border-bottom:none;}
.cfms-table tbody tr{-webkit-transition:background var(--transition);transition:background var(--transition);}

/* BADGES */
.badge{font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;letter-spacing:0.3px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:3px;white-space:nowrap;}
.badge-primary{background:#dbeafe;color:#1d4ed8;}
.badge-info{background:#e0f2fe;color:#0284c7;}
.badge-warning{background:#fef3c7;color:#92400e;}
.badge-success{background:#dcfce7;color:#15803d;}
.badge-danger{background:#fee2e2;color:#b91c1c;}
.badge-secondary{background:#f1f5f9;color:#475569;}
.badge-dark{background:#1e293b;color:#fff;}

/* FORMS */
.form-control{border:1.5px solid var(--border);border-radius:var(--radius-xs);padding:9px 13px;font-size:14px;color:var(--text);-webkit-transition:border-color var(--transition),-webkit-box-shadow var(--transition);transition:border-color var(--transition),box-shadow var(--transition);background:#fff;width:100%;line-height:1.5;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.form-control:focus{border-color:var(--primary);-webkit-box-shadow:0 0 0 3px rgba(15,76,129,0.12);box-shadow:0 0 0 3px rgba(15,76,129,0.12);outline:none;}
.form-label{font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px;display:block;}
.form-group{margin-bottom:16px;}
.input-group-text{background:#f8fafc;border:1.5px solid var(--border);color:var(--text-muted);font-size:14px;}
.input-group>.form-control{border-radius:0 var(--radius-xs) var(--radius-xs) 0;}
.input-group-prepend .input-group-text{border-radius:var(--radius-xs) 0 0 var(--radius-xs);border-right:none;}
.input-group-append .input-group-text{border-radius:0 var(--radius-xs) var(--radius-xs) 0;border-left:none;cursor:pointer;}
/* select uses native arrow — no SVG background needed */

/* PAGE HEADER */
.page-header{margin-bottom:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:16px;-ms-flex-wrap:wrap;flex-wrap:wrap;}
.page-title{font-family:'Outfit',sans-serif;font-size:22px;font-weight:800;color:var(--text);margin:0;letter-spacing:-0.3px;}
.page-subtitle{font-size:13px;color:var(--text-muted);margin:3px 0 0;}
.breadcrumb{background:transparent;padding:0;margin:4px 0 0;font-size:12px;}
.breadcrumb-item a{color:var(--primary);}
.breadcrumb-item.active{color:var(--text-muted);}
.breadcrumb-item+.breadcrumb-item::before{color:var(--text-muted);}

/* FILTER BAR */
.filter-bar{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:20px;-webkit-box-shadow:var(--shadow);box-shadow:var(--shadow);}
.filter-bar-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:var(--text-muted);margin-bottom:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;}

/* STATUS TIMELINE */
.status-timeline{list-style:none;padding:0;position:relative;}
.status-timeline::before{content:'';position:absolute;left:15px;top:0;bottom:0;width:2px;background:var(--border);}
.timeline-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:16px;margin-bottom:20px;position:relative;}
.timeline-dot{width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid var(--border);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:12px;color:var(--text-muted);-ms-flex-negative:0;flex-shrink:0;z-index:1;}
.timeline-dot.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.timeline-dot.success{background:var(--success);border-color:var(--success);color:#fff;}
.timeline-content{-webkit-box-flex:1;-ms-flex:1;flex:1;padding-top:4px;}
.timeline-title{font-weight:600;font-size:13px;}
.timeline-meta{font-size:12px;color:var(--text-muted);}
.timeline-body{font-size:13px;margin-top:6px;background:var(--bg);padding:10px 14px;border-radius:var(--radius-sm);}

/* ALERTS */
.alert{border-radius:var(--radius-sm);border:none;padding:12px 16px;font-size:13.5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;}
.alert-danger{background:#fef2f2;color:#991b1b;border-left:4px solid var(--danger);}
.alert-success{background:#f0fdf4;color:#166534;border-left:4px solid var(--success);}
.alert-warning{background:#fffbeb;color:#92400e;border-left:4px solid var(--warning);}
.alert-info{background:#eff6ff;color:#1e40af;border-left:4px solid var(--info);}
.alert .close{margin-left:auto;padding:0;background:transparent;border:none;font-size:18px;line-height:1;opacity:0.5;cursor:pointer;}
.alert .close:hover{opacity:1;}

/* PUBLIC */
.public-form-wrapper{max-width:800px;margin:40px auto;padding:0 16px;}
.public-hero{background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 60%,var(--primary-light) 100%);color:#fff;padding:80px 0 60px;text-align:center;position:relative;overflow:hidden;}
.public-hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 50%,rgba(255,255,255,0.06) 0%,transparent 50%),radial-gradient(circle at 70% 50%,rgba(255,255,255,0.04) 0%,transparent 50%);}
/* Hero logo — fixed size, never bleed */
.public-hero img.hero-logo,.public-hero .hero-logo{width:auto!important;height:80px!important;max-width:none!important;display:block;margin:0 auto 16px;position:relative;z-index:1;-o-object-fit:contain;object-fit:contain;}
.public-hero h1{font-family:'Outfit',sans-serif;font-size:30px;font-weight:800;margin-bottom:10px;position:relative;}
.public-hero p{opacity:.85;font-size:15px;max-width:600px;margin:0 auto;position:relative;}
.hero-badges{margin-top:20px;display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative;}
.hero-badge{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);color:#fff;padding:5px 14px;border-radius:20px;font-size:12px;font-weight:500;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}

/* TRACKING */
.tracking-card{background:#fff;border-radius:var(--radius);-webkit-box-shadow:var(--shadow);box-shadow:var(--shadow);padding:30px;margin-bottom:24px;}
.ref-badge{display:inline-block;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:700;font-family:monospace;letter-spacing:1px;}

/* STAR RATING — stars in DOM 5→1, flex row-reverse displays 1→5 left-to-right */
.star-rating {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    gap: 6px;
    padding: 4px 0;
}
.star-rating input[type="radio"] {
    display: none !important;
    visibility: hidden;
    width: 0;
    height: 0;
    position: absolute;
}
.star-rating label {
    font-size: 36px !important;
    color: #d1d5db !important;
    cursor: pointer !important;
    -webkit-transition: color 0.12s ease, -webkit-transform 0.1s ease;
    transition: color 0.12s ease, transform 0.1s ease;
    line-height: 1;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* When a radio is checked, colour IT and all labels that come BEFORE it (i.e., higher numbers in reversed flex) */
.star-rating input[type="radio"]:checked ~ label { color: #f59e0b !important; }
/* Hover: colour this label and all siblings that follow in DOM (higher numbers = lower stars visually) */
.star-rating label:hover,
.star-rating label:hover ~ label { color: #f59e0b !important; }
/* Scale on hover */
.star-rating label:hover { -webkit-transform: scale(1.15); transform: scale(1.15); }

/* MUNICIPALITY */
.municipality-badge{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;background:linear-gradient(135deg,var(--secondary),#0a6657);color:#fff;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600;}

/* FOOTER */
.cfms-footer{background:linear-gradient(135deg,var(--primary-dark),#071a30);color:rgba(255,255,255,0.65);padding:24px 0;font-size:13px;margin-top:48px;}
.cfms-footer a{color:rgba(255,255,255,0.65);text-decoration:none;-webkit-transition:color var(--transition);transition:color var(--transition);}
.cfms-footer a:hover{color:#fff;}
.footer-brand{font-size:15px;font-weight:600;color:#fff;}
.footer-tagline{font-size:12px;opacity:.55;margin-top:3px;}

/* AUTH */
.auth-wrapper{min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 60%,var(--primary-light) 100%);padding:20px;position:relative;}
.auth-wrapper::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(255,255,255,0.07) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,255,255,0.05) 0%,transparent 40%);}
.auth-card{background:#fff;border-radius:20px;-webkit-box-shadow:0 20px 70px rgba(0,0,0,0.25);box-shadow:0 20px 70px rgba(0,0,0,0.25);width:100%;max-width:450px;overflow:hidden;position:relative;z-index:1;}
.auth-header{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;padding:32px 30px;text-align:center;position:relative;}
.auth-header img{height:60px;margin-bottom:14px;}
.auth-header h2{font-family:'Outfit',sans-serif;font-size:22px;font-weight:800;margin:0;letter-spacing:-0.3px;}
.auth-header p{margin:5px 0 0;opacity:.7;font-size:13px;}
.auth-body{padding:32px 30px;}
.auth-divider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:12px;margin:20px 0;color:var(--text-muted);font-size:12px;}
.auth-divider::before,.auth-divider::after{content:'';-webkit-box-flex:1;-ms-flex:1;flex:1;height:1px;background:var(--border);}

/* CHARTS */
.chart-container{position:relative;height:280px;}
.progress{height:8px;background:var(--bg);border-radius:4px;overflow:hidden;}
.progress-bar{border-radius:4px;-webkit-transition:width 0.6s ease;transition:width 0.6s ease;}

/* HOLISTIC VIEW (CS/GOV) */
.holistic-tabs .nav-tabs{border-bottom:2px solid var(--border);}
.holistic-tabs .nav-link{border:none;border-bottom:3px solid transparent;color:var(--text-muted);padding:10px 20px;font-weight:600;font-size:13px;border-radius:0;margin-bottom:-2px;-webkit-transition:all var(--transition);transition:all var(--transition);}
.holistic-tabs .nav-link.active{color:var(--primary);border-bottom-color:var(--primary);background:transparent;}
.holistic-tabs .nav-link:hover{color:var(--primary);background:rgba(15,76,129,0.04);}
.activity-feed{max-height:400px;overflow-y:auto;}
.activity-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.activity-item:last-child{border-bottom:none;}
.activity-dot{width:36px;height:36px;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:13px;-ms-flex-negative:0;flex-shrink:0;}
.activity-info{-webkit-box-flex:1;-ms-flex:1;flex:1;}
.activity-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;}
.activity-meta{font-size:11.5px;color:var(--text-muted);}
.kpi-box{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;border-radius:var(--radius);padding:20px;text-align:center;position:relative;overflow:hidden;}
.kpi-box::after{content:'';position:absolute;bottom:-20px;right:-20px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,0.08);}
.kpi-number{font-family:'Outfit',sans-serif;font-size:36px;font-weight:800;line-height:1;}
.kpi-label{font-size:12px;opacity:.8;margin-top:4px;text-transform:uppercase;letter-spacing:0.5px;}

/* MISC */
.priority-indicator{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px;}
.priority-low{background:var(--success);}
.priority-medium{background:var(--warning);}
.priority-high{background:var(--danger);}
.priority-critical{background:#1e293b;}
.text-truncate-2{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.attachment-preview{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-xs);padding:5px 12px;font-size:12px;color:var(--primary);text-decoration:none;margin:3px;}
.attachment-preview:hover{background:#dbeafe;color:var(--primary-dark);text-decoration:none;}

/* DataTables */
.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select{border:1.5px solid var(--border)!important;border-radius:var(--radius-xs)!important;padding:6px 10px!important;font-size:13px!important;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important;border-radius:var(--radius-xs)!important;}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{background:var(--bg)!important;border-color:var(--border)!important;color:var(--primary)!important;}

/* Select2 */
.select2-container .select2-selection--single{height:40px;border:1.5px solid var(--border);border-radius:var(--radius-xs);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:40px;padding:0 13px;color:var(--text);font-size:14px;}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:40px;}

/* Toast */
.cfms-toast{position:fixed;bottom:24px;right:24px;background:#1e293b;color:#fff;padding:12px 20px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;z-index:9999;-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;max-width:300px;-webkit-box-shadow:0 4px 20px rgba(0,0,0,0.2);box-shadow:0 4px 20px rgba(0,0,0,0.2);}
.cfms-toast.show{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;}

/* Sidebar toggle */
.sidebar-toggle-btn{display:none;background:transparent;border:none;color:#fff;font-size:20px;padding:6px 8px;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:var(--radius-xs);-webkit-transition:background var(--transition);transition:background var(--transition);}
.sidebar-toggle-btn:hover{background:rgba(255,255,255,0.12);}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:899;}
.sidebar-overlay.active{display:block;}

/* Dropdown fix */
.dropdown-menu{border:1px solid var(--border);border-radius:var(--radius-sm);-webkit-box-shadow:var(--shadow-lg);box-shadow:var(--shadow-lg);padding:6px 0;font-size:13.5px;}
.dropdown-item{padding:8px 18px;color:var(--text);-webkit-transition:background var(--transition);transition:background var(--transition);}
.dropdown-item:hover{background:var(--bg);color:var(--primary);}
.dropdown-header{font-size:12px;font-weight:700;color:var(--text-muted);padding:8px 18px;text-transform:uppercase;letter-spacing:0.5px;}
.user-dropdown-header{background:var(--bg);border-radius:var(--radius-sm);margin:4px 8px;padding:10px 12px;}

/* Gap utility for older browsers */
.d-flex.gap-2{gap:8px;}
.d-flex.gap-3{gap:12px;}
.d-flex.gap-1{gap:4px;}

/* Custom scrollbar for cards */
.cfms-card .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;}

@media (max-width:991px){
    .cfms-sidebar{-webkit-transform:translateX(-100%);transform:translateX(-100%);z-index:1040;}
    .cfms-sidebar.open{-webkit-transform:translateX(0);transform:translateX(0);}
    .cfms-main{margin-left:0!important;}
    .sidebar-toggle-btn{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;}
    /* Mobile: collapse nav links into dropdown */
    .cfms-navbar .navbar-collapse{
        display:none!important;
        position:absolute;top:var(--navbar-height);left:0;right:0;
        background:var(--primary-dark);
        -webkit-box-orient:vertical;-webkit-box-direction:normal;
        -ms-flex-direction:column;flex-direction:column;
        padding:8px 16px 16px;
        -webkit-box-shadow:0 8px 24px rgba(0,0,0,.25);
        box-shadow:0 8px 24px rgba(0,0,0,.25);
        z-index:1049;
    }
    .cfms-navbar .navbar-collapse.show{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;}
    .cfms-navbar .navbar-nav{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;}
    .cfms-navbar .nav-link{padding:10px 14px!important;border-radius:8px;}
}
@media (max-width:768px){
    .cfms-main-content{padding:16px;}
    .stat-card{padding:14px;}
    .stat-info h3{font-size:22px;}
    .page-header{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:10px;}
    .public-hero h1{font-size:22px;}
    .cfms-card-header{-ms-flex-wrap:wrap;flex-wrap:wrap;}
    .kpi-number{font-size:28px;}
}
@media print{
    .cfms-navbar,.cfms-sidebar,.cfms-footer,.btn,.filter-bar,.sidebar-overlay{display:none!important;}
    .cfms-main{margin-left:0!important;}
    body{background:#fff!important;}
    .cfms-card{-webkit-box-shadow:none!important;box-shadow:none!important;border:1px solid #ddd!important;}
}

/* ===== NOTIFICATION SYSTEM ===== */
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: #f8fafc !important; }

.notif-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    color: var(--text);
    text-decoration: none;
    -webkit-transition: background var(--transition);
    transition: background var(--transition);
    border-bottom: 1px solid var(--border);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg); color: var(--text); text-decoration: none; }

/* Real-time pulse on new unread badge */
@-webkit-keyframes notif-pulse {
    0%   { -webkit-transform: scale(1);   transform: scale(1); }
    50%  { -webkit-transform: scale(1.2); transform: scale(1.2); }
    100% { -webkit-transform: scale(1);   transform: scale(1); }
}
@keyframes notif-pulse {
    0%   { -webkit-transform: scale(1);   transform: scale(1); }
    50%  { -webkit-transform: scale(1.2); transform: scale(1.2); }
    100% { -webkit-transform: scale(1);   transform: scale(1); }
}

.notif-badge {
    -webkit-animation: notif-pulse 2s infinite;
    animation: notif-pulse 2s infinite;
}

/* Notification type dots in dropdown */
.notif-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 7px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/* Unread notification highlight in full page */
.notif-unread-indicator {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/* Notification count in sidebar links */
.sidebar-link .badge.ml-auto {
    margin-left: auto;
    font-size: 9px;
    padding: 2px 6px;
}

/* Email sent indicator */
.email-sent-badge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
}

.sms-sent-badge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
}

/* ===== LANDING PAGE ===== */
/* Stats strip */
.stats-strip {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: #fff;
    border-radius: var(--radius);
    padding: 32px 0;
}
.stat-pill h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 36px;
    font-weight: 800;
    margin: 0;
    line-height: 1;
}
.stat-pill p {
    font-size: 12px;
    opacity: .75;
    margin: 5px 0 0;
    text-transform: uppercase;
    letter-spacing: .6px;
}

/* Action cards */
.action-card {
    border-top-width: 4px;
    border-top-style: solid;
    -webkit-transition: -webkit-transform 0.22s ease, -webkit-box-shadow 0.22s ease;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.action-card:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: 0 12px 36px rgba(0,0,0,0.12);
    box-shadow: 0 12px 36px rgba(0,0,0,0.12);
}
.action-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 28px;
}

/* How-it-works steps */
.step-icon-wrap {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 26px;
    -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.13);
    box-shadow: 0 4px 16px rgba(0,0,0,0.13);
    position: relative;
}
.step-num {
    position: absolute;
    bottom: -10px;
    right: -6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    border: 2px solid #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Municipality categories */
.muni-cat-link { text-decoration: none; color: inherit; display: block; }
.muni-cat-link:hover { text-decoration: none; color: inherit; }
.muni-cat-link:hover .muni-cat-icon { -webkit-transform: translateY(-3px); transform: translateY(-3px); }
.muni-cat-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 20px;
    -webkit-transition: -webkit-transform 0.18s ease;
    transition: transform 0.18s ease;
}

.section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: -.3px;
}

@media (max-width: 767px) {
    .action-icon-wrap { width: 58px; height: 58px; font-size: 22px; }
    .step-icon-wrap   { width: 56px; height: 56px; font-size: 20px; }
    .stat-pill h2     { font-size: 26px; }
    .stats-strip      { padding: 24px 0; }
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL LOGO BLEED FIX — applied LAST to win all specificity
   ═══════════════════════════════════════════════════════════ */

/* 1. The root problem: Bootstrap sets img { max-width:100% } which makes
      an unconstrained <img> inside a wide flex parent stretch to fill.
      Force all logo images to a max-height and auto width. */
.cfms-navbar img,
.cfms-navbar .navbar-brand img,
nav.land-nav img,
.public-hero img.hero-logo {
    height: 34px !important;
    width: auto !important;
    max-width: none !important;
    -o-object-fit: contain;
    object-fit: contain;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: inline-block;
}

/* Hero logo is slightly larger */
.public-hero img.hero-logo,
.land-hero img {
    height: 80px !important;
    display: block;
    margin: 0 auto 16px;
}

/* Footer: text only, no img at all — but guard in case one appears */
.cfms-footer img {
    height: 22px !important;
    width: auto !important;
    max-width: none !important;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    vertical-align: middle;
    display: inline-block;
}

/* 2. Sidebar header logo guard */
.sidebar-header img { height: 28px !important; width: auto !important; max-width: none !important; }

/* 3. Auth card logo guard */
.auth-header img { height: 56px !important; width: auto !important; max-width: none !important; }

/* 4. Navbar brand: always a single flex row, never wraps or grows logo */
.cfms-navbar .navbar-brand,
nav.land-nav .navbar-brand {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    overflow: hidden;
    max-width: 260px;
}

/* 5. cfms-main clips anything that tries to overflow (like a logo or chart) */
.cfms-main,
.cfms-layout,
.cfms-public-main {
    overflow-x: hidden;
}

/* 6. Public hero is always clipped */
.public-hero { overflow: hidden; }

/* 7. Ensure the page-wrapper never causes horizontal scroll */
body.cfms-body { overflow-x: hidden; }

/* ===== FILE UPLOAD ZONE ===== */
.upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 28px 20px;
    text-align: center;
    background: #fafbfc;
    cursor: pointer;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.upload-zone:hover, .upload-zone.drag-over {
    border-color: var(--primary);
    background: #eff6ff;
}
.upload-input { display: none; }

.file-chip {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    margin: 3px;
    color: var(--text);
}

/* ===== ATTACHMENT THUMBNAILS ===== */
.attach-thumb {
    -webkit-transition: -webkit-transform .18s, -webkit-box-shadow .18s;
    transition: transform .18s, box-shadow .18s;
}
.attach-thumb:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
}
.thumb-overlay {
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
}

/* ===== FORM FIELD VISIBILITY — CROSS-BROWSER SAFE ===== */

/* Text inputs and textarea — safe to use appearance:none */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="search"],
textarea {
    color: #1e293b !important;
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: var(--radius-xs) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    width: 100%;
    display: block;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input:focus, textarea:focus {
    border-color: var(--primary) !important;
    -webkit-box-shadow: 0 0 0 3px rgba(26,94,42,0.15) !important;
    box-shadow: 0 0 0 3px rgba(26,94,42,0.15) !important;
    outline: none !important;
    background-color: #fff !important;
    color: #1e293b !important;
}

/* SELECT — never use appearance:none; preserve native arrow + text rendering */
select,
select.form-control,
select.form-control-sm {
    color: #1e293b !important;
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: var(--radius-xs) !important;
    padding: 9px 36px 9px 13px !important;  /* right padding for arrow */
    font-size: 14px !important;
    line-height: 1.5 !important;
    width: 100% !important;
    display: block !important;
    /* Keep native select appearance — DO NOT set appearance:none on selects */
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    cursor: pointer;
    background-image: none !important; /* remove SVG arrow override */
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
select:focus,
select.form-control:focus {
    border-color: var(--primary) !important;
    -webkit-box-shadow: 0 0 0 3px rgba(26,94,42,0.15) !important;
    box-shadow: 0 0 0 3px rgba(26,94,42,0.15) !important;
    outline: none !important;
    color: #1e293b !important;
    background-color: #fff !important;
}
select option,
select.form-control option {
    color: #1e293b !important;
    background-color: #ffffff !important;
    font-size: 14px;
    padding: 8px 12px;
}
select option:disabled,
select option[value=""] {
    color: #94a3b8 !important;
}

/* .form-control generic (non-select) */
.form-control:not(select),
.form-control-sm:not(select) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Placeholders */
input::placeholder,
textarea::placeholder  { color: #94a3b8 !important; opacity: 1 !important; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #94a3b8 !important; }
input::-moz-placeholder, textarea::-moz-placeholder { color: #94a3b8 !important; opacity: 1; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #94a3b8 !important; }

/* Labels */
.form-label, label { color: #1e293b !important; font-weight: 600; font-size: 13px; margin-bottom: 6px; display: block; }

/* Input group addons */
.input-group-text { background: #f8fafc !important; border: 1.5px solid #cbd5e1 !important; color: #475569 !important; }

/* Input group layout — select next to prepend/append */
.input-group > select,
.input-group > select.form-control {
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0 !important;
    border-left: none !important;
}

/* Nyeri County gradient navbar */
.cfms-navbar { background: linear-gradient(135deg, #0d3d18 0%, #1a5e2a 60%, #2d8a42 100%) !important; }
.land-nav    { background: linear-gradient(135deg, #0d3d18 0%, #1a5e2a 60%, #2d8a42 100%) !important; }
.public-hero { background: linear-gradient(135deg, #0d3d18 0%, #1a5e2a 50%, #2d8a42 100%) !important; }
.auth-header { background: linear-gradient(135deg, #0d3d18, #1a5e2a) !important; }
.cfms-footer { background: linear-gradient(135deg, #0d3d18, #071a10) !important; }
.sidebar-role-badge { background: linear-gradient(135deg, #1a5e2a, #2d8a42) !important; }
.btn-cfms-primary { background: linear-gradient(135deg, #2d8a42, #1a5e2a) !important; -webkit-box-shadow: 0 2px 8px rgba(26,94,42,.3) !important; box-shadow: 0 2px 8px rgba(26,94,42,.3) !important; }
.btn-cfms-primary:hover { background: linear-gradient(135deg, #1a5e2a, #0d3d18) !important; }
.btn-cfms-secondary { color: var(--primary) !important; border-color: var(--primary) !important; }
.btn-cfms-secondary:hover { background: var(--primary) !important; color: #fff !important; }
.btn-primary { background: var(--primary) !important; border-color: var(--primary) !important; }
.btn-primary:hover { background: var(--primary-dark) !important; }
.kpi-box { background: linear-gradient(135deg, #0d3d18, #1a5e2a) !important; }

/* Clickable stat cards */
.stat-card-link { text-decoration: none !important; color: inherit !important; display: block; }
.stat-card-link:hover .stat-card { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-box-shadow: 0 8px 24px rgba(0,0,0,.14); box-shadow: 0 8px 24px rgba(0,0,0,.14); cursor: pointer; }
.stat-card-link .stat-card { -webkit-transition: all .22s ease; transition: all .22s ease; }
.stat-card.blue::before   { background: linear-gradient(90deg,#2d8a42,#4ade80); }
.stat-card.orange::before { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
.stat-card.red::before    { background: linear-gradient(90deg,#ef4444,#f87171); }
.stat-card.green::before  { background: linear-gradient(90deg,#1a5e2a,#2d8a42); }
.stat-card.teal::before   { background: linear-gradient(90deg,#8B1a1a,#c0392b); }
.stat-card.purple::before { background: linear-gradient(90deg,#6d28d9,#8b5cf6); }

/* ===== MOBILE-FIRST RESPONSIVE FIXES ===== */
@media (max-width: 767px) {
    :root { --navbar-height: 56px; }

    .cfms-main-content { padding: 16px 12px 32px; }
    .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .page-header .d-flex { flex-wrap: wrap; }
    .stat-card { padding: 14px 12px; }
    .stat-info h3 { font-size: 22px; }
    .filter-bar form { flex-direction: column; }
    .filter-bar .form-control,
    .filter-bar select,
    .filter-bar input { width: 100% !important; max-width:100% !important; }
    .cfms-table thead { display: none; }
    .cfms-table tr { display: block; border-bottom: 2px solid var(--border); padding: 12px 0; }
    .cfms-table td { display: flex; justify-content: space-between; align-items: center; padding: 4px 12px; border: none; }
    .cfms-table td::before { content: attr(data-label); font-weight: 600; font-size: 12px; color: var(--text-muted); margin-right: 8px; text-transform: uppercase; letter-spacing:.3px; flex-shrink:0; }
    .auth-card { margin: 16px; }
    .modal-dialog { margin: 8px; }
    .public-form-wrapper { padding: 0 8px; }
    .cfms-card-body { padding: 14px; }
    .btn-cfms-primary, .btn-cfms-secondary { padding: 10px 18px; font-size: 13px; }
    .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }
}

@media (max-width: 480px) {
    .cfms-main-content { padding: 12px 8px 24px; }
    .public-hero { padding: 60px 0 40px !important; }
    .public-hero h1 { font-size: 20px !important; }
    .cfms-navbar { padding: 0 12px; }
    .brand-text { font-size: 15px; }
    .stat-card { flex-direction: column; text-align: center; }
    .stat-icon { margin: 0 auto 8px; }
}

/* ===== CROSS-BROWSER BUTTON FIX ===== */
.btn-cfms-primary, .btn-cfms-secondary {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 10px 22px;
    -webkit-transition: all .2s;
    transition: all .2s;
    text-decoration: none !important;
    white-space: nowrap;
}
.btn-cfms-secondary {
    background: transparent !important;
    border: 1.5px solid var(--primary) !important;
    color: var(--primary) !important;
}
.btn-cfms-secondary:hover { background: var(--primary) !important; color: #fff !important; }

/* ===== TABLE RESPONSIVE TEXT ===== */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== FILTER BAR ===== */
.filter-bar {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 20px;
    -webkit-box-shadow: var(--shadow);
    box-shadow: var(--shadow);
}
.filter-bar-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.filter-bar form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.filter-bar .form-control { font-size: 13px !important; padding: 7px 10px !important; }

/* ===== TOAST NOTIFICATION ===== */
.cfms-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    -webkit-box-shadow: 0 4px 16px rgba(0,0,0,.2);
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    z-index: 9999;
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
.cfms-toast.show { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }

/* ===== form-control-sm explicit override ===== */
.form-control-sm {
    color: #1e293b !important;
    background-color: #ffffff !important;
    font-size: 13px !important;
}
select.form-control-sm {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* ===== BOOTSTRAP MODAL Z-INDEX FIX ===== */
/* Ensure modals always appear above navbar (z-1030), sidebar (z-900) */
.modal         { z-index: 1055 !important; }
.modal-backdrop{ z-index: 1050 !important; }
.modal-dialog  { z-index: 1060 !important; }
/* Allow modals to escape overflow:hidden containers */
body.modal-open { overflow: hidden !important; }