/* ==========================================================================
   TrailQ
   Your Hiking Intelligence

   Main Stylesheet
   Architecture Version : 2.0

   This stylesheet defines the visual appearance of TrailQ.

   Architecture

       1. Base
       2. Layout
       3. Application Header
       4. Ribbon
       5. Workspace
       6. Views
       7. Dialogs
       8. Utilities

   Design Principles

       • Component-oriented
       • Theme-driven
       • Responsive
       • Consistent spacing
       • Minimal visual noise

========================================================================== */========================================================================= */

*{box-sizing:border-box;}
html,body{
margin:0;padding:0;width:100%;height:100%;
overflow:hidden;
font-family:var(--font-family);
background:var(--color-background);
color:var(--color-text);
}

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

#ribbon{
height:var(--ribbon-height);
display:flex;
background:var(--color-surface);
border-bottom:1px solid var(--color-border);
}

.ribbonGroup{
display:flex;
flex-direction:column;
padding:var(--spacing-sm) var(--spacing-md);
border-right:1px solid var(--color-border);
min-width:140px;
}

#viewTabs{border-bottom:1px solid var(--color-border);}

#dialogLayer{position:fixed;inset:0;pointer-events:none;}

.hidden{display:none!important;}

/* the hidden attribute always hides, also over display rules of components */
[hidden]{display:none !important;}