/**


 * css/main.css


 * Core design tokens, typography, layouts, and view-state baselines


 */





:root {


    --bg: #050506;


    --card: #0f0f10;


    --muted: #9aa0a6;


    --accent: #00c2a8;


    --danger: #ff6b6b;


    --success: #2dd4bf;


    --gap: 12px;


    --tab-height: 72px; /* Set to cleanly accommodate larger touch targets */


}





html, body { 


    height: 100%; 


    background: var(--bg); 


    margin: 0; 


}





body {


    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;


    color: #fff;


    -webkit-font-smoothing: antialiased;


    -webkit-text-size-adjust: 100%;


    /* Prevents bottom nav from clipping content near screen boundary or home indicator */


    padding-bottom: calc(var(--tab-height) + env(safe-area-inset-bottom));


}





.app {


    max-width: 980px;


    margin: 0 auto;


    padding: calc(env(safe-area-inset-top) + 12px) 12px 12px;


    display: flex;


    flex-direction: column;


    gap: var(--gap);


}





.card {


    background: var(--card);


    border-radius: 12px;


    padding: 12px;


    box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;


}





/* Sticky Top Dashboard HUD Summary */


.summary-bar {


    position: sticky;


    top: env(safe-area-inset-top);


    z-index: 40;


    display: flex;


    justify-content: space-between;


    gap: 12px;


    background: linear-gradient(180deg, rgba(15,15,16,0.95), rgba(11,11,12,0.95));


    padding: 12px;


    border-radius: 12px;


    backdrop-filter: blur(10px);


    border: 1px solid rgba(255,255,255,0.04);


}





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


.summary-kpis { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }





.kpi {


    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);


    padding: 8px 10px;


    border-radius: 8px;


    min-width: 110px;


    border: 1px solid rgba(255,255,255,0.02);


}


.kpi b { display: block; font-size: 1.05rem; margin-top: 2px; }





/* Global UI Form Controls & Data Elements */


.pill { padding: 6px 10px; border-radius: 999px; background: #121214; color: var(--muted); font-size: 13px; border: 1px solid rgba(255,255,255,0.04); }


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


.small { font-size: 13px; }





.ghost {


    background: transparent;


    border: 1px solid rgba(255,255,255,0.08);


    padding: 8px 12px;


    border-radius: 8px;


    color: var(--muted);


    font-size: 13px;


    cursor: pointer;


}


.ghost:active { background: rgba(255,255,255,0.05); }





.save-btn {


    background: var(--accent);


    color: #02120f;


    padding: 10px 14px;


    border-radius: 10px;


    font-weight: 700;


    border: none;


    font-size: 14px;


    cursor: pointer;


}





/* In-View Sub-tab Controllers */


.tabs { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; }


.tab { padding: 8px 14px; border-radius: 8px; color: var(--muted); font-weight: 600; cursor: pointer; font-size: 13px; white-space: nowrap; background: transparent; border: none; }


.tab.active { background: #121214; color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,0.05); }





/* Timecard Rows layout */


.tc-row {


    display: flex;


    gap: 8px;


    align-items: center;


    padding: 10px 8px;


    border-radius: 8px;


    margin-bottom: 8px;


    background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);


    border: 1px solid rgba(255,255,255,0.02);


}


.tc-date { width: 110px; min-width: 110px; }


.tc-inputs { display: flex; gap: 8px; align-items: center; flex: 1; justify-content: flex-end; flex-wrap: wrap; }


.tc-select { background: #0b0b0c; border: 1px solid #1a1a1b; color: #fff; padding: 8px; border-radius: 8px; min-width: 72px; text-align: right; font-size: 13px; }


.input-num { background: #0b0b0c; border: 1px solid #1a1a1b; padding: 8px; border-radius: 8px; color: #fff; width: 120px; text-align: right; font-size: 13px; box-sizing: border-box; }





/* Monthly Matrix Calendar Grid layout */


.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }


.cal-cell { background: #0b0b0c; padding: 8px; border-radius: 8px; min-height: 56px; cursor: pointer; font-size: 13px; border: 1px solid rgba(255,255,255,0.02); }


.cal-cell .num { font-weight: 700; }


.cal-cell .gross { font-size: 0.8rem; color: var(--muted); }





.math-line { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,0.06); font-size: 13px; }


[x-cloak] { display: none !important; }