/**
* INVOICER - SHARED STYLESHEET
*
* Consolidated styles for consistent UX across the entire application.
* Designed for elderly tradespeople - large fonts,clear buttons,simple layout.
*
* Brand Colors:
* - Dark Green (Primary):#2d5016
* - Gold (Accent):#fbbf24
* - Light Green (Background):#f0f7ed
* - Footer Dark:#2d5016
*/

/* ============================================
CSS VARIABLES
============================================ */
:root{

--color-primary:#2d5016;
--color-primary-hover:#234010;
--color-primary-dark:#2d5016;
--color-primary-light:#3d6821;
--color-primary-darker:#1a3a0a;
--color-gold:#fbbf24;
--color-gold-hover:#f59e0b;
--color-gold-dark:#d97706;


--color-bg-light:#f0f7ed;
--color-bg-green:#f0fdf4;
--color-bg-green-light:#dcfce7;
--color-bg-grey:#f9fafb;
--color-bg-grey-light:#f5f5f5;
--color-white:#ffffff;


--color-text:#333;
--color-text-dark:#1f2937;
--color-text-light:#666;
--color-text-lighter:#999;
--color-text-muted:#6b7280;


--color-border:#ccc;
--color-border-light:#e5e7eb;
--color-border-lighter:#f0f0f0;


--color-success:#10b981;
--color-success-bg:#d1fae5;
--color-success-dark:#065f46;
--color-warning:#fbbf24;
--color-warning-bg:#fef3c7;
--color-warning-dark:#92400e;
--color-error:#ef4444;
--color-error-bg:#fee2e2;
--color-error-dark:#991b1b;
--color-error-brown:#7c2d12;
--color-info:#3b82f6;
--color-info-bg:#dbeafe;
--color-info-dark:#1e40af;


--color-disabled:#9ca3af;
--color-success-hover:#059669;
--color-danger-hover:#b91c1c;
--color-btn-secondary-hover:#4b5563;
--color-success-text:#047857;
--color-success-bright:#22c55e;
--color-success-text-dark:#166534;


--color-bg-amber-light:#fffbeb;
--color-bg-blue-light:#eff6ff;
--color-bg-red-light:#fef2f2;
--color-bg-green-50:#ecfdf5;


--color-border-medium:#d1d5db;
--color-bg-grey-100:#f3f4f6;
--color-text-green-dark:#064e3b;
--color-viewed:#7c3aed;
--color-viewed-bg:#ede9fe;
--color-indigo:#6366f1;


--color-footer-dark:#2d5016;


--font-size-base:18px;
--font-size-small:16px;
--font-size-smaller:16px;
--font-size-medium:20px;
--font-size-large:22px;
--font-size-xlarge:24px;
--font-size-h1:48px;
--font-size-h2:36px;
--font-size-h3:24px;
--font-size-h4:20px;


--spacing-xs:8px;
--spacing-sm:12px;
--spacing-md:20px;
--spacing-lg:30px;
--spacing-xl:40px;
--spacing-2xl:60px;
--spacing-3xl:80px;


--touch-target-min:48px;


--border-radius:8px;
--border-radius-sm:6px;
--border-radius-lg:12px;
--border-radius-full:50%;


--shadow-sm:0 2px 4px rgba(0,0,0,0.08);
--shadow-md:0 2px 8px rgba(0,0,0,0.1);
--shadow-lg:0 4px 12px rgba(0,0,0,0.08);
--shadow-xl:0 4px 20px rgba(0,0,0,0.1);
--shadow-2xl:0 8px 24px rgba(0,0,0,0.15);


--transition-fast:0.2s ease;
--transition-normal:0.3s ease;
}

/* ============================================
RESET AND BASE STYLES
============================================ */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
font-size:var(--font-size-base);
line-height:1.7;
color:var(--color-text);
background:var(--color-white);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

/* ============================================
TYPOGRAPHY
============================================ */
h1{
font-size:var(--font-size-h1);
line-height:1.2;
margin-bottom:var(--spacing-md);
font-weight:700;
color:var(--color-text-dark);
}

h2{
font-size:var(--font-size-h2);
line-height:1.3;
margin-bottom:var(--spacing-md);
font-weight:700;
color:var(--color-primary);
}

h3{
font-size:var(--font-size-h3);
line-height:1.4;
margin-bottom:var(--spacing-sm);
font-weight:600;
color:var(--color-primary);
}

h4{
font-size:var(--font-size-h4);
line-height:1.5;
margin-bottom:var(--spacing-sm);
font-weight:600;
}

p{
margin-bottom:var(--spacing-md);
font-size:var(--font-size-base);
}

small{
font-size:var(--font-size-small);
color:var(--color-text-light);
}

strong{
font-weight:600;
color:var(--color-text-dark);
}

a{
color:var(--color-primary);
text-decoration:none;
transition:color var(--transition-fast);
}

a:hover{
color:var(--color-primary-light);
text-decoration:underline;
}

ul,ol{
margin-left:30px;
margin-bottom:var(--spacing-md);
}

li{
margin-bottom:10px;
}


@media (max-width:768px){
h1{
font-size:36px;
}

h2{
font-size:32px;
}

h3{
font-size:22px;
}

p{
font-size:var(--font-size-base);
}
}

/* ============================================
LAYOUT
============================================ */
.container{
max-width:1200px;
margin:0 auto;
padding:0 var(--spacing-md);
}

section{
padding:var(--spacing-3xl) var(--spacing-md);
}

.section-light{
background:var(--color-white);
}

.section-green{
background:var(--color-bg-green);
}

.section-grey{
background:var(--color-bg-grey);
}

@media (max-width:768px){
section{
padding:var(--spacing-2xl) var(--spacing-md);
}
}

/* ============================================
BUTTONS
============================================ */
.btn{
padding:20px 40px;
font-size:var(--font-size-large);
font-weight:600;
text-decoration:none;
border-radius:var(--border-radius);
border:none;
cursor:pointer;
min-height:var(--touch-target-min);
transition:background-color var(--transition-normal),box-shadow var(--transition-normal);
font-family:inherit;

background:var(--color-gold);
color:var(--color-primary);

display:inline-flex;
align-items:center;
justify-content:center;
line-height:1;
vertical-align:middle;

box-sizing:border-box;
}

.btn:hover{
background:var(--color-gold-hover);
color:var(--color-primary);
box-shadow:var(--shadow-lg);
text-decoration:none;
}

.btn-primary{
background:var(--color-gold);
color:var(--color-primary);
}

.btn-primary:hover{
background:var(--color-gold-hover);
color:var(--color-primary);
box-shadow:var(--shadow-md);
text-decoration:none;
}

.btn-secondary{
background:transparent;
color:var(--color-primary);
border:2px solid var(--color-border);
}

.btn-secondary:hover{
background:var(--color-bg-light);
color:var(--color-primary);
text-decoration:none;
}

.btn-outline{
background:transparent;
color:var(--color-white);
border:2px solid var(--color-white);
}

.btn-outline:hover{
background:var(--color-white);
color:var(--color-primary);
text-decoration:none;
}

.btn-primary-white{
background:var(--color-white);
color:var(--color-primary);
font-weight:700;
}

.btn-primary-white:hover{
background:var(--color-bg-grey);
color:var(--color-primary);
text-decoration:none;
}

.btn-success{
background:var(--color-success);
color:var(--color-white);
}

.btn-success:hover{
background:var(--color-success-dark);
color:var(--color-white);
text-decoration:none;
}

.btn-danger{
background:var(--color-error);
color:var(--color-white);
}

.btn-danger:hover{
background:var(--color-error-dark);
color:var(--color-white);
text-decoration:none;
}

.btn-info{
background:var(--color-info);
color:var(--color-white);
}

.btn-info:hover{
background:var(--color-info-dark);
color:var(--color-white);
text-decoration:none;
}

.btn-warning{
background:var(--color-warning);
color:var(--color-primary);
}

.btn-warning:hover{
background:var(--color-warning-dark);
color:var(--color-white);
text-decoration:none;
}


.btn-gradient{
background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%);
color:var(--color-white);
}

.btn-gradient:hover{
background:linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary) 100%);
color:var(--color-white);
box-shadow:var(--shadow-md);
text-decoration:none;
}


.btn-gold-gradient{
background:linear-gradient(135deg,var(--color-gold) 0%,var(--color-gold-dark) 100%);
color:var(--color-primary);
font-weight:700;
}

.btn-gold-gradient:hover{
background:linear-gradient(135deg,var(--color-gold-hover) 0%,var(--color-gold) 100%);
color:var(--color-primary);
box-shadow:var(--shadow-md);
text-decoration:none;
}

.btn-small{
padding:0 24px;
font-size:var(--font-size-base);
min-width:140px;
height:48px;
min-height:48px;
line-height:48px;
}

/* Inline forms wrapping buttons - prevent height/alignment mismatch
when <form> buttons sit next to <a> buttons in the same row.
Only target forms that contain JUST a button (no inputs/form-groups) */
form:has(> .btn):not(:has(input,.form-group,textarea,select)){
display:inline-flex;
margin:0;
padding:0;
vertical-align:middle;
}

.btn:disabled,
.btn[disabled]{
background:var(--color-disabled);
cursor:not-allowed;
opacity:0.6;
}

.btn:disabled:hover,
.btn[disabled]:hover{
transform:none;
box-shadow:none;
}


@media (max-width:768px){
.btn{
padding:16px 30px;
font-size:var(--font-size-medium);
display:flex;
align-items:center;
justify-content:center;
width:100%;
margin-bottom:var(--spacing-sm);
}

.btn-small{
padding:0 20px;
font-size:var(--font-size-small);
height:48px;
min-height:48px;
line-height:48px;
}
}

/* ============================================
SEND BUTTON WRAPPER & STATUS BADGES
Used on invoice/quote view pages
============================================ */
.send-btn-wrapper{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
}

.send-status{
padding:6px 14px;
border-radius:8px;
font-size:16px;
font-weight:600;
white-space:nowrap;
text-align:center;
}

.send-status.sent{
background:var(--color-success);
color:white;
}

.send-status.not-sent{
background:var(--color-warning-bg);
color:var(--color-warning-dark);
border:1px solid var(--color-warning);
}

@media (max-width:768px){
.send-btn-wrapper{
width:100%;
}

.send-btn-wrapper .btn{
width:100%;
}
}

/* ============================================
FORMS
============================================ */
.form-group{
margin-bottom:var(--spacing-lg);
}

.form-label{
display:block;
font-size:var(--font-size-base);
font-weight:600;
margin-bottom:var(--spacing-xs);
color:var(--color-text-dark);
}

.form-control{
width:100%;
padding:12px 16px;
font-size:var(--font-size-base);
border:2px solid var(--color-border);
border-radius:var(--border-radius);
min-height:var(--touch-target-min);
font-family:inherit;
transition:border-color var(--transition-normal);
}

.form-control:focus{
outline:none;
border-color:var(--color-primary);
box-shadow:0 0 0 3px rgba(45,80,22,0.1);
}

select.form-control{
appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 12px center;
padding-right:40px;
}

textarea.form-control{
min-height:120px;
resize:vertical;
line-height:1.5;
}

.form-text{
font-size:var(--font-size-small);
color:var(--color-text-light);
margin-top:var(--spacing-xs);
display:block;
}

.form-check{
display:flex;
align-items:center;
gap:var(--spacing-sm);
margin-bottom:var(--spacing-md);
}

.form-check input[type="checkbox"],
.form-check input[type="radio"]{
width:24px;
height:24px;
cursor:pointer;
}

.form-check label{
font-size:var(--font-size-base);
cursor:pointer;
margin-bottom:0;
}


@media (max-width:768px){
input[type="date"]{
max-width:100%;
min-width:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
}

/* ============================================
CARDS
============================================ */
.card{
background:var(--color-white);
border-radius:var(--border-radius-lg);
padding:var(--spacing-lg);
margin-bottom:var(--spacing-lg);
box-shadow:var(--shadow-md);
}


.card-success{
border-left:5px solid var(--color-success);
background:linear-gradient(to right,var(--color-success-bg) 0%,var(--color-white) 20%);
}

.card-warning{
border-left:5px solid var(--color-warning);
background:linear-gradient(to right,var(--color-warning-bg) 0%,var(--color-white) 20%);
}

.card-info{
border-left:5px solid var(--color-info);
background:linear-gradient(to right,var(--color-info-bg) 0%,var(--color-white) 20%);
}

.card-primary{
border-left:5px solid var(--color-primary);
background:linear-gradient(to right,var(--color-bg-light) 0%,var(--color-white) 20%);
}

.feature-card{
background:var(--color-white);
padding:var(--spacing-xl);
border-radius:var(--border-radius-lg);
box-shadow:var(--shadow-lg);
text-align:center;
transition:transform var(--transition-normal);
}

.feature-card:hover{
transform:translateY(-5px);
box-shadow:var(--shadow-xl);
}

.feature-icon{
font-size:48px;
margin-bottom:var(--spacing-md);
}

.stat-card{
background:var(--color-white);
padding:var(--spacing-lg);
border-radius:var(--border-radius-lg);
box-shadow:var(--shadow-md);
text-align:center;
}

.stat-number{
font-size:48px;
font-weight:700;
color:var(--color-primary);
margin-bottom:10px;
}

.stat-label{
font-size:var(--font-size-base);
color:var(--color-text-light);
}

/* ============================================
GRIDS
============================================ */
.features-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:40px;
margin-top:50px;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:var(--spacing-md);
margin-bottom:var(--spacing-xl);
}

@media (max-width:768px){
.features-grid,
.stats-grid{
grid-template-columns:1fr;
gap:var(--spacing-lg);
}
}

/* ============================================
ALERTS & NOTICES
============================================ */
.alert{
padding:20px 25px;
border-radius:var(--border-radius-lg);
margin-bottom:var(--spacing-md);
font-size:var(--font-size-base);
font-weight:500;
}

.alert-success{
background:var(--color-success-bg);
border:3px solid var(--color-success);
color:var(--color-success-dark);
}

.alert-error{
background:var(--color-error-bg);
border:3px solid var(--color-error);
color:var(--color-error-dark);
}

.alert-warning{
background:var(--color-warning-bg);
border:3px solid var(--color-warning);
color:var(--color-warning-dark);
}

.alert-info{
background:var(--color-info-bg);
border:3px solid var(--color-info);
color:var(--color-info-dark);
}

.highlight-box{
background:var(--color-bg-green);
padding:var(--spacing-md);
border-radius:var(--border-radius);
border-left:4px solid var(--color-primary);
margin:25px 0;
}

/* ============================================
TABLES
============================================ */
.data-table{
width:100%;
border-collapse:collapse;
background:var(--color-white);
font-size:var(--font-size-base);
}

.data-table th{
background:var(--color-bg-grey);
padding:12px;
text-align:left;
font-weight:600;
color:var(--color-primary);
border-bottom:2px solid var(--color-border-light);
}

.data-table td{
padding:12px;
border-bottom:1px solid var(--color-border-light);
}

.data-table tr:hover{
background:var(--color-bg-grey);
}

/* ============================================
HERO SECTION
============================================ */
.hero{
background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%);
color:white;
padding:var(--spacing-3xl) var(--spacing-md);
text-align:center;
min-height:600px;
display:flex;
align-items:center;
justify-content:center;
}

.hero-content{
max-width:800px;
margin:0 auto;
}

.hero h1{
font-size:56px;
margin-bottom:var(--spacing-lg);
color:white;
}

.hero p{
font-size:var(--font-size-xlarge);
margin-bottom:var(--spacing-xl);
opacity:0.95;
}

@media (max-width:768px){
.hero h1{
font-size:42px;
}

.hero p{
font-size:var(--font-size-medium);
}
}

/* ============================================
PRICING CARDS
============================================ */
.pricing-cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:var(--spacing-lg);
margin-top:50px;
max-width:800px;
margin-left:auto;
margin-right:auto;
}

.pricing-card{
background:var(--color-white);
padding:50px 30px;
border-radius:var(--border-radius-lg);
box-shadow:var(--shadow-lg);
text-align:center;
border:3px solid transparent;
transition:all var(--transition-normal);
}

.pricing-card:hover{
border-color:var(--color-primary);
transform:translateY(-5px);
}

.pricing-card.featured{
border-color:var(--color-gold);
box-shadow:0 8px 24px rgba(251,191,36,0.3);
}

.price{
font-size:56px;
font-weight:700;
color:var(--color-primary);
margin:var(--spacing-md) 0;
}

.price-term{
font-size:var(--font-size-base);
color:var(--color-text-light);
margin-bottom:var(--spacing-lg);
}

.save-badge{
background:var(--color-gold);
color:var(--color-primary);
padding:8px 16px;
border-radius:20px;
font-size:var(--font-size-small);
font-weight:600;
display:inline-block;
margin-bottom:var(--spacing-md);
}

@media (max-width:768px){
.pricing-cards{
grid-template-columns:1fr;
}
}

/* ============================================
TESTIMONIALS
============================================ */
.testimonial{
background:var(--color-white);
padding:var(--spacing-xl);
border-radius:var(--border-radius-lg);
box-shadow:var(--shadow-lg);
margin:var(--spacing-lg) auto;
max-width:800px;
}

.testimonial-text{
font-size:var(--font-size-large);
font-style:italic;
margin-bottom:var(--spacing-md);
color:var(--color-text);
}

.testimonial-author{
font-weight:600;
color:var(--color-primary);
font-size:var(--font-size-base);
}

.testimonial-role{
color:var(--color-text-light);
font-size:var(--font-size-small);
}

/* ============================================
CTA SECTION
============================================ */
.cta-section{
background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%);
color:white;
text-align:center;
padding:100px var(--spacing-md);
}

.cta-section h2{
color:white;
font-size:var(--font-size-h1);
margin-bottom:var(--spacing-lg);
}

.cta-section p{
font-size:var(--font-size-xlarge);
margin-bottom:var(--spacing-xl);
}

@media (max-width:768px){
.cta-section{
padding:var(--spacing-2xl) var(--spacing-md);
}

.cta-section h2{
font-size:36px;
}
}

/* ============================================
PAGE COMPONENTS (Common across Dashboard,Clients,Invoices,etc.)
============================================ */


.page-header{
background:linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary) 100%);
color:white;
padding:40px 20px;
box-shadow:var(--shadow-md);
}

.page-header-content{
max-width:1400px;
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:20px;
}

.page-header h1{
font-size:48px;
font-weight:700;
margin:0;
color:white;
}

.page-subtitle{
font-size:var(--font-size-medium);
opacity:0.9;
margin-top:5px;
}


.header{
background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%);
color:white;
padding:25px 20px;
box-shadow:var(--shadow-md);
}

.header-content{
max-width:1200px;
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:center;
}


.public-header{
text-align:center;
margin-bottom:var(--spacing-xl);
padding:var(--spacing-lg) 0;
}

.public-header .logo{
max-width:180px;
height:auto;
margin:0 auto var(--spacing-md);
filter:drop-shadow(0 8px 24px rgba(0,0,0,0.3));
}

.public-header .brand-subtitle{
font-size:var(--font-size-base);
color:var(--color-text-light);
margin-bottom:var(--spacing-md);
font-weight:500;
}

.public-header h1{
font-size:42px;
color:var(--color-primary);
margin-bottom:var(--spacing-md);
}

.public-header .subtitle{
font-size:var(--font-size-medium);
color:var(--color-text-light);
margin-bottom:var(--spacing-sm);
}

.public-header .last-updated{
font-size:var(--font-size-small);
color:var(--color-text-light);
font-style:italic;
}

@media (max-width:768px){
.public-header h1{
font-size:32px;
}
}

.logo{
font-size:28px;
font-weight:700;
}

.user-info{
text-align:right;
font-size:var(--font-size-base);
}

.user-info a{
color:var(--color-gold);
text-decoration:none;
font-weight:600;
}

.user-info a:hover{
text-decoration:underline;
}


.back-link{
display:inline-block;
color:white;
text-decoration:none;
font-size:var(--font-size-medium);
padding:12px 24px;
background:rgba(255,255,255,0.2);
border-radius:var(--border-radius);
transition:all var(--transition-normal);
}

.back-link:hover{
background:rgba(255,255,255,0.3);
color:white;
transform:translateX(-5px);
text-decoration:none !important;
}


.welcome{
background:white;
padding:40px;
border-radius:var(--border-radius-lg);
margin-bottom:var(--spacing-lg);
box-shadow:var(--shadow-md);
}


.trial-notice{
background:var(--color-warning-bg);
border:3px solid var(--color-warning);
color:var(--color-warning-dark);
padding:25px;
border-radius:var(--border-radius-lg);
margin-top:var(--spacing-md);
font-size:var(--font-size-medium);
font-weight:600;
}

.plan-details{
background:linear-gradient(135deg,var(--color-bg-green) 0%,var(--color-bg-green-light) 100%);
border:2px solid var(--color-success);
color:var(--color-text-green-dark);
padding:20px 25px;
border-radius:var(--border-radius-lg);
margin-top:var(--spacing-md);
font-size:var(--font-size-base);
display:flex;
justify-content:space-between;
align-items:center;
}

.profile-incomplete{
background:var(--color-bg-red-light);
border:2px solid var(--color-error);
color:var(--color-error-dark);
padding:25px;
border-radius:var(--border-radius-lg);
margin-bottom:var(--spacing-lg);
}


.list-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:var(--spacing-lg);
flex-wrap:wrap;
gap:var(--spacing-md);
}


.add-button{
display:inline-block;
background:var(--color-success);
color:white;
padding:18px 36px;
font-size:var(--font-size-large);
font-weight:700;
text-decoration:none;
border-radius:var(--border-radius);
transition:all var(--transition-normal);
min-height:var(--touch-target-min);
}

.add-button:hover{
background:var(--color-success-dark);
transform:translateY(-2px);
box-shadow:var(--shadow-lg);
text-decoration:none;
}


.filters{
background:white;
padding:var(--spacing-md);
border-radius:var(--border-radius-lg);
margin-bottom:var(--spacing-md);
box-shadow:var(--shadow-sm);
}

.filter-row{
display:flex;
gap:15px;
flex-wrap:wrap;
align-items:flex-end;
}

.filter-group{
flex:1;
min-width:200px;
}

.filter-group label{
display:block;
font-weight:600;
margin-bottom:var(--spacing-xs);
font-size:var(--font-size-base);
}

.filter-group input,
.filter-group select{
width:100%;
padding:12px;
font-size:var(--font-size-base);
border:2px solid var(--color-border);
border-radius:var(--border-radius);
min-height:var(--touch-target-min);
}

.filter-group button{
padding:12px 24px;
font-size:var(--font-size-base);
min-height:var(--touch-target-min);
}


.empty-state{
text-align:center;
padding:60px var(--spacing-md);
color:var(--color-text-light);
}

.empty-state-icon{
font-size:64px;
margin-bottom:var(--spacing-md);
opacity:0.5;
}

.empty-state h3{
font-size:var(--font-size-h2);
color:var(--color-text);
margin-bottom:var(--spacing-sm);
}

.empty-state p{
font-size:var(--font-size-large);
margin-bottom:var(--spacing-lg);
}


.quick-stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:var(--spacing-md);
margin-bottom:var(--spacing-xl);
}

.stat-box{
background:white;
padding:var(--spacing-lg);
border-radius:var(--border-radius-lg);
box-shadow:var(--shadow-md);
text-align:center;
}

.stat-number{
font-size:48px;
font-weight:700;
color:var(--color-primary);
margin-bottom:10px;
}

.stat-label{
font-size:var(--font-size-base);
color:var(--color-text-light);
}


.section-divider{
border:0;
height:1px;
background:var(--color-border-light);
margin:var(--spacing-2xl) 0;
}


@media (max-width:768px){
.page-header h1{
font-size:36px;
}

.page-header-content{
flex-direction:column;
align-items:flex-start;
}

.list-header{
flex-direction:column;
align-items:stretch;
}

.add-button{
width:100%;
text-align:center;
}

.filter-row{
flex-direction:column;
}

.filter-group{
width:100%;
}
}

/* ============================================
BACK TO TOP BUTTON
============================================ */
.back-to-top{
position:fixed;
bottom:30px;
right:30px;
background:var(--color-primary);
color:white;
width:60px;
height:60px;
border-radius:var(--border-radius-full);
display:none;
align-items:center;
justify-content:center;
font-size:28px;
text-decoration:none;
box-shadow:var(--shadow-lg);
transition:all var(--transition-normal);
z-index:1000;
}

.back-to-top:hover{
background:var(--color-primary-light);
color:white !important;
transform:translateY(-3px);
box-shadow:0 6px 16px rgba(0,0,0,0.4);
text-decoration:none;
}

.back-to-top.show{
display:flex;
}

@media (max-width:768px){
.back-to-top{
width:50px;
height:50px;
font-size:24px;
bottom:20px;
right:20px;
}
}

/* ============================================
LOGO STYLING
============================================ */
.logo-img{
max-width:180px;
height:auto;
filter:drop-shadow(0 8px 24px rgba(0,0,0,0.3));
}

.logo-img-nav{
height:40px;
width:auto;
filter:drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

.logo-text{
font-size:var(--font-size-large);
font-weight:700;
color:var(--color-primary);
}

/* ============================================
NAVIGATION
============================================ */
.main-nav{
background:var(--color-white);
border-bottom:1px solid var(--color-border);
padding:var(--spacing-md) 0;
}

.nav-container{
max-width:1200px;
margin:0 auto;
padding:0 var(--spacing-md);
display:flex;
align-items:center;
justify-content:space-between;
}

.nav-logo{
display:flex;
align-items:center;
gap:var(--spacing-sm);
text-decoration:none;
}

.nav-links{
display:flex;
gap:var(--spacing-md);
align-items:center;
}

.nav-links a{
color:var(--color-text);
text-decoration:none;
font-weight:600;
padding:var(--spacing-sm);
transition:color var(--transition-fast);
}

.nav-links a:hover{
color:var(--color-primary);
text-decoration:none;
}

/* ============================================
FOOTER
============================================ */
footer{
background:var(--color-footer-dark);
color:white;
padding:60px 20px 30px;
margin-top:var(--spacing-xl);
text-align:center;
}


.cta-section + footer,
main:has(> .cta-section:last-child) + footer{
margin-top:0;
}

/* Reset .container inside footer - many pages style .container with
background:white for content cards,which bleeds into the footer */
footer .container{
background:transparent;
box-shadow:none;
border-radius:0;
padding:0 var(--spacing-md);
max-width:1200px;
}

footer .footer-title{
font-size:var(--font-size-medium);
margin-bottom:10px;
color:white !important;
}

footer .footer-title strong{
color:white !important;
}

footer .footer-subtitle{
font-size:var(--font-size-small);
margin-bottom:var(--spacing-md);
color:white !important;
}

footer .footer-links{
margin-bottom:var(--spacing-lg);
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px 30px;
}

footer .footer-links a{
color:var(--color-gold) !important;
text-decoration:none;
white-space:nowrap;
outline:none !important;
}

footer .footer-links a:hover{
color:var(--color-gold) !important;
text-decoration:underline;
}

footer .footer-links a:focus{
outline:none !important;
}

footer .footer-links a:active{
outline:none !important;
}

footer .footer-copyright{
font-size:var(--font-size-smaller);
color:var(--color-text-lighter) !important;
margin-top:var(--spacing-lg);
}

@media (max-width:768px){
footer .footer-links{
gap:8px 20px;
}
}

/* ============================================
UTILITY CLASSES
============================================ */
.text-center{
text-align:center;
}

.text-left{
text-align:left;
}

.text-right{
text-align:right;
}

.text-primary{
color:var(--color-primary);
}

.text-gold{
color:var(--color-gold);
}

.text-success{
color:var(--color-success);
}

.text-error{
color:var(--color-error);
}

.text-muted{
color:var(--color-text-light);
}

.bg-light{
background:var(--color-bg-light);
}

.bg-green{
background:var(--color-bg-green);
}

.bg-white{
background:var(--color-white);
}

.mb-0{
margin-bottom:0;
}

.mb-sm{
margin-bottom:var(--spacing-sm);
}

.mb-md{
margin-bottom:var(--spacing-md);
}

.mb-lg{
margin-bottom:var(--spacing-lg);
}

.mt-sm{
margin-top:var(--spacing-sm);
}

.mt-md{
margin-top:var(--spacing-md);
}

.mt-lg{
margin-top:var(--spacing-lg);
}

.d-none{
display:none;
}

.d-block{
display:block;
}

.d-flex{
display:flex;
}

.d-inline{
display:inline;
}

.d-inline-block{
display:inline-block;
}


.text-grey{
color:var(--color-text-light);
}

.text-dark{
color:var(--color-text-dark);
}


.bg-grey{
background:var(--color-bg-grey);
}

.bg-success{
background:var(--color-success);
}


.bg-gradient-green{
background:linear-gradient(135deg,var(--color-bg-light) 0%,var(--color-bg-green) 100%);
}

.bg-gradient-gold{
background:linear-gradient(135deg,var(--color-bg-amber-light) 0%,var(--color-warning-bg) 100%);
}

.bg-gradient-blue{
background:linear-gradient(135deg,var(--color-bg-blue-light) 0%,var(--color-info-bg) 100%);
}


.border-left-gold{
border-left:4px solid var(--color-gold);
}

.border-left-blue{
border-left:4px solid var(--color-info);
}

.border-top-gold{
border-top:3px solid var(--color-gold);
}

.border-top-green{
border-top:3px solid var(--color-primary);
}


.fw-normal{
font-weight:400;
}

.fw-medium{
font-weight:500;
}

.fw-semibold{
font-weight:600;
}

.fw-bold{
font-weight:700;
}


.fs-small{
font-size:var(--font-size-small);
}

.fs-base{
font-size:var(--font-size-base);
}

.fs-medium{
font-size:var(--font-size-medium);
}

.fs-large{
font-size:var(--font-size-large);
}

.fs-h3{
font-size:var(--font-size-h3);
}


.m-0{
margin:0;
}

.mb-0{
margin-bottom:0;
}

.mb-xs{
margin-bottom:var(--spacing-xs);
}

.mt-0{
margin-top:0;
}

.mt-xs{
margin-top:var(--spacing-xs);
}

.mt-xl{
margin-top:var(--spacing-xl);
}

.mt-2xl{
margin-top:var(--spacing-2xl);
}

.ml-auto{
margin-left:auto;
}

.mr-auto{
margin-right:auto;
}

.mx-auto{
margin-left:auto;
margin-right:auto;
}


.p-0{
padding:0;
}

.p-sm{
padding:var(--spacing-sm);
}

.p-md{
padding:var(--spacing-md);
}

.p-lg{
padding:var(--spacing-lg);
}


.flex-row{
display:flex;
flex-direction:row;
}

.flex-column{
display:flex;
flex-direction:column;
}

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

.align-center{
align-items:center;
}

.align-start{
align-items:flex-start;
}

.align-end{
align-items:flex-end;
}

.justify-center{
justify-content:center;
}

.justify-between{
justify-content:space-between;
}

.justify-start{
justify-content:flex-start;
}

.justify-end{
justify-content:flex-end;
}

.flex-center{
display:flex;
align-items:center;
justify-content:center;
}

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


.gap-xs{
gap:var(--spacing-xs);
}

.gap-sm{
gap:var(--spacing-sm);
}

.gap-md{
gap:var(--spacing-md);
}

.gap-lg{
gap:var(--spacing-lg);
}


.border{
border:2px solid var(--color-border);
}

.border-bottom{
border-bottom:1px solid var(--color-border-light);
}

.border-bottom-thick{
border-bottom:2px solid var(--color-border-light);
}

.border-left-primary{
border-left:4px solid var(--color-primary);
}

.border-left-success{
border-left:5px solid var(--color-success);
}

.border-radius{
border-radius:var(--border-radius);
}

.border-radius-lg{
border-radius:var(--border-radius-lg);
}


.w-full{
width:100%;
}

.w-auto{
width:auto;
}

.max-w-250{
max-width:250px;
}


.shadow-sm{
box-shadow:var(--shadow-sm);
}

.shadow-md{
box-shadow:var(--shadow-md);
}

.shadow-lg{
box-shadow:var(--shadow-lg);
}


.badge{
display:inline-block;
padding:4px 12px;
border-radius:6px;
font-size:var(--font-size-small);
font-weight:600;
line-height:1.2;
}

.badge-success{
background:var(--color-success);
color:white;
}

.badge-warning{
background:var(--color-warning);
color:var(--color-warning-dark);
}

.badge-error{
background:var(--color-error);
color:white;
}

.badge-info{
background:var(--color-info);
color:white;
}

.badge-grey{
background:var(--color-bg-grey);
color:var(--color-text);
}


.cursor-pointer{
cursor:pointer;
}


.container-narrow{
max-width:900px;
margin:0 auto;
padding:0 var(--spacing-md);
}

.container-wide{
max-width:1400px;
margin:0 auto;
padding:0 var(--spacing-md);
}

/* ============================================
ACCESSIBILITY
============================================ */

.btn:focus-visible{
outline:2px solid var(--color-primary);
outline-offset:2px;
}


.btn:focus:not(:focus-visible){
outline:none;
}

a:focus-visible{
outline:2px solid var(--color-primary);
outline-offset:1px;
}


a:focus:not(:focus-visible){
outline:none;
}

input:focus,
select:focus,
textarea:focus{
outline:none;
border-color:var(--color-primary);
box-shadow:0 0 0 3px rgba(45,80,22,0.1);
}

.skip-link{
position:absolute;
top:-40px;
left:0;
background:var(--color-primary);
color:white;
padding:8px;
text-decoration:none;
z-index:100;
}

.skip-link:focus{
top:0;
}

/* ============================================
PRINT STYLES
============================================ */
@media print{
.back-to-top,
.main-nav,
footer{
display:none;
}

body{
font-size:12pt;
}

h1{
font-size:24pt;
}

h2{
font-size:18pt;
}
}


.btn:hover,
button:hover,
.action-btn:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover{
color:inherit;
text-decoration:none;
}