:root{
    --primary:#087f5b;
    --primary-dark:#066b4d;
    --page:#f4f7f6;
    --surface:#ffffff;
    --soft:#f8f9fa;
    --text:#1f2937;
    --muted:#6b7280;
    --border:#e5e7eb;
    --shadow:0 2px 10px rgba(0,0,0,.06);
}
html.dark{
    --page:#0f1720;
    --surface:#17212b;
    --soft:#1d2935;
    --text:#edf2f7;
    --muted:#aab6c3;
    --border:#334252;
    --shadow:0 3px 14px rgba(0,0,0,.30);
}
*{box-sizing:border-box}
html{background:var(--page)}
html,body{background:var(--page)!important;color:var(--text)!important}
body{transition:background-color .2s,color .2s}

/* Common cards/containers used throughout the system */
.container,.card,.panel,.box,.content,.main,.wrapper,.form-container,
.table-container,.table-wrap,.modal-content,.section,.invoice,.invoice-box,
.purchase-box,.topbar,.page-title,.month-card,.info,.summary,.stat-card,
.stats-card,.form-box,.report-box,.search-box,.content-box{
    background-color:var(--surface)!important;
    color:var(--text)!important;
    border-color:var(--border)!important;
}
h1,h2,h3,h4,h5,h6,p,label,span,small,td,th,li{
    color:inherit;
}
.muted,.text-muted,.subtitle,.description{color:var(--muted)!important}

input,select,textarea{
    background:var(--surface)!important;
    color:var(--text)!important;
    border-color:var(--border)!important;
}
input::placeholder,textarea::placeholder{color:var(--muted)!important}
table{border-color:var(--border)!important}
table th,table td{border-color:var(--border)!important}
tr:nth-child(even){background:var(--soft)!important}
tr:nth-child(odd){background:var(--surface)!important}
thead th{color:#fff!important}

/* Preserve colored action buttons */
button,.btn,a.button,.button{transition:filter .15s,opacity .15s}
button:hover,.btn:hover,a.button:hover,.button:hover{filter:brightness(.96)}

a{color:var(--primary)}
html.dark a:not(.btn):not(.button):not([class*="btn"]){color:#67d7ad}

/* Generic dark-mode fixes for common inline white/light blocks */
html.dark [style*="background: white"],
html.dark [style*="background:white"],
html.dark [style*="background: #fff"],
html.dark [style*="background:#fff"],
html.dark [style*="background-color: white"],
html.dark [style*="background-color:white"],
html.dark [style*="background-color: #fff"],
html.dark [style*="background-color:#fff"]{
    background-color:var(--surface)!important;
}
html.dark [style*="color: #333"],
html.dark [style*="color:#333"],
html.dark [style*="color: #666"],
html.dark [style*="color:#666"],
html.dark [style*="color: #555"],
html.dark [style*="color:#555"]{
    color:var(--text)!important;
}

/* Make wide tables usable on phones */
.table-responsive,.table-wrap,.table-container{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
@media(max-width:700px){
    body{padding:10px!important}
    .container,.card,.panel,.box,.content,.main,.wrapper{
        width:100%!important;
        max-width:100%!important;
        padding:12px!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }
    h1{font-size:24px!important}
    h2{font-size:20px!important}
    h3{font-size:18px!important}
    .top-buttons,.actions,.button-row,.btn-row{
        display:flex!important;
        flex-wrap:wrap!important;
        gap:7px!important;
    }
    .top-buttons a,.actions a,.button-row a,.btn-row a,
    .top-buttons button,.actions button,.button-row button,.btn-row button{
        max-width:100%;
    }
    .search-box{flex-wrap:wrap!important}
    .search-box input{min-width:0!important;width:100%!important}
    table{font-size:12px!important}
    th,td{padding:7px 6px!important}
    .table-container table,.table-wrap table{min-width:650px}
    img{max-width:100%;height:auto}
    input,select,textarea,button{max-width:100%}
}

/* Floating theme button */
.theme-toggle{
    position:fixed!important;
    right:16px!important;
    bottom:16px!important;
    width:48px!important;
    height:48px!important;
    border:0!important;
    border-radius:50%!important;
    background:var(--primary)!important;
    color:#fff!important;
    box-shadow:0 4px 14px rgba(0,0,0,.25)!important;
    cursor:pointer!important;
    z-index:99999!important;
    font-size:20px!important;
    padding:0!important;
}
.theme-toggle:hover{background:var(--primary-dark)!important}
@media(max-width:700px){
    .theme-toggle{right:12px!important;bottom:12px!important;width:46px!important;height:46px!important}
}