/* CSS VARIABLES (tweak these) */
  :root{
    --topbar-height: 40px;        /* topbar total height */
    --sidebar-width: 220px;       /* expanded sidebar width */
    --sidebar-mini-width: 10px;   /* "minimal" sidebar width if you prefer */
    --topbar-z: 1000;
    --brand: #2185d0;             /* brand accent color (modify) */
    --content-padding: 20px;
      
    --bg: #fff;
    --font: #0f1720;
    --link: #0f1720;
      
    --frame-bg: #0f1720;
    --frame-font: #fff;
    --frame-link: #0f1720;
      
    --sidebar-bg: rgb(27, 28, 29); /**/
    --sidebar-font: #ddd;
    --sidebar-link: rgba(255,255,255,.1);
    --sidebar-inactive: rgba(125,125,125,.1);
      
    --primary-color: #4a8dff; /* was #3574ff */
    --primary-hover: #3578e5;

    --secondary-color: #9fb5d6;
    --secondary-hover: #9fb5d6;
    
    --tersiary-color: #545454;
    --tersiary-hover: #545454;
    --tersiary-text: #f4f4f4;
    
    --topbar-height: 50px; 
  }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;

}

body {
   // padding-top: 50px;
   // display: flex;
  // flex-direction: column;
   // min-height: 100vh;
}



/* Make the whole layout stretch vertically */
.wrapper {
    min-height: 100%;
    flex: 1; /* Make pusher expand */
    display: flex;
    flex-direction: column;
}


/* Mobile Pusher      
   ============================== */
.pusher {
    transition: margin-left 240ms ease;
    /* default margin-left matches sidebar width */
    margin-left: calc(var(--sidebar-width) + 20px);
    margin-right: 20px;
    padding-top: calc(var(--topbar-height) + 30px);
    min-height:99vh;
     box-sizing:border-box;
     min-height:99vh;
    flex: 1; /* Make pusher expand */
    display: flex; /* Make pusher expand */
    flex-direction: column; /* Make pusher expand */
    
}
/* semantic override */ 
.pusher > .ui.grid
{
   // min-height:99vh;
   // flex: 1 1 auto;
   // display: flex;
   // flex-direction: column;
   // vertical-align: text-top;
}
.pusher > .ui.grid > .ui.container.main-content
{
   // min-height:52vh;
    
   // flex: 0 1 auto;
   // display: flex;
  //  flex-direction: column;
   // vertical-align: text-top;
}
.pusher.hidden {
    transition: margin-left 240ms ease;
    /* default margin-left matches sidebar width */
    margin-left: 20px;
}

/* main      
   ============================== */
.main-content {
    flex: 0 1 auto;  /*1 0 auto; Main section expands to fill available space */
    display: flex;
    flex-direction: column;
    min-height:80vh;
    
    max-width:1200px;
    margin:0 auto 20px;
    padding: var(--content-padding);
   // height: 100%;
    box-sizing:border-box;
    outline: 0px solid rgba(100,100,100,.3); 
    box-shadow: 8px  #ccc;
    box-shadow: 0px 0px 5px rgba(100,100,100,.3);
}

/* Footer      
   ============================== */
.foot-content { 
    flex-shrink: 0; /* Footer sits at the bottom when not enough content */
    margin-top: 20px; 
    display: flex;
    flex-direction: column;flex: 0 1 auto; 
}
 .foot-content.segment .column.extra {
    border-width: 0;
    color: #888;
    font-size: 0.85rem;
     box-shadow: none !important;
}
/*
.wrapper { outline: 5px solid red; border-style: inset }
.pusher { outline: 5px solid purple; }
//.pusher > .ui.grid{ outline: 1px solid green; }
.pusher > .ui.grid > .ui.container.main-content { outline: 1px solid coral; }

.main-content { outline: 5px solid green; }
.foot-content { outline: 5px solid YELLOW; }
*/
/* Topbar      
   ============================== */
.admin-topbar {
    position:fixed;
    top:0;
    left:0;
    right:0;
    flex-shrink: 0; /* Topbar stays natural height */
    height:var(--topbar-height);
    line-height:var(--topbar-height);
    background:var(--frame-bg);
    color:var(--frame-font);
    box-shadow:0 1px 0 rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display:flex;
    align-items:center;
    padding:0 12px;
    z-index:var(--topbar-z);
}

.admin-topbar .item .circular.image {
    padding: 0;
    margin: 0;
    width: 40px;
}
.admin-topbar .item .circular img {
    max-height: 40px;
    padding: 0;
    margin: 0;
    background: #ddd;
}
.admin-topbar .item .circular.mini.status {
    font-size: .44285714rem;
    margin-top: -20px;
    margin-left: -5px;
}

.admin-topbar .logo img {
    max-width: 200px;
}

/* Sidebar      
   ============================== */
.ui.visible.left.sidebar ~ .fixed, .ui.visible.left.sidebar ~ .pusher {
    transform: translate3d(0,0,0);
}

.ui.vertical.menu.admin-sidebar {
    position:fixed;
    top:var(--topbar-height);
    left:0;
    bottom:0;
    width:var(--sidebar-width);
    background:var(--sidebar-bg );
    color:var(--sidebar-font );
    overflow:auto;
    padding: 12px 6px;
    box-sizing:border-box;
    transition: width 240ms ease, transform 240ms ease;
    z-index: var(--topbar-z - 1);
    /* we'll use a variable to compute pusher offset */
    margin-right: 0;
    max-height: calc(100% - var(--topbar-height )) !important; 
    height: calc(100% - - var(--topbar-height )) !important; 
    transform: translateX(0px);
}
.ui.vertical.menu.admin-sidebar hr {
    width: 85%;
    background:var(--sidebar-link );
    color:var(--sidebar-link );
}
.ui.vertical.menu.admin-sidebar .item {
    padding-left:20px;
}
.ui.vertical.menu.admin-sidebar .header.item {
    padding-left:10px;
}
.ui.vertical.menu.admin-sidebar.hidden{
    visibility: collapse;
    width:16px;
    background: #fff;
    padding-left:0;
    padding-right:0;
    overflow:hidden;
    transition: width 240ms ease, transform 240ms ease;
    transform: translateX(-8px);
  }



/* Sidebar      
   ============================== */
.sidebar-toggle {
    cursor: pointer;
}


.brand-logo {
    font-size: 0.9em;
    font-weight: bold;
    color:var(--brand);
}



/*
.debugbar-toggle {
    background: #2185d0;
    color: white;
    padding: 6px 10px;
    cursor: pointer;
    display: inline-block;
}

.debugbar.collapsed .debugbar-toggle {
    border-radius: 6px 6px 0 0;
}

.debugbar:not(.collapsed) .debugbar-toggle {
    border-radius: 0;
}

.debugbar-inner {
    padding: 0;
}


#debugBar.fixed.top {
    z-index: 9999;
}

#debugBar.fixed.bottom {
    bottom: 0;
    z-index: 9999;
}
*/


#debugPanels {
    background: #1b1c1d !important; /* semantic dark */
    color: white;
}



@media (max-width:600px){
    :root { --sidebar-width: 0px; } /* ensure collapse on tiny screens */
    .sidebar{ display:none; }        /* hide completely on tiny */
  }

/* MOBILE: Sidebar becomes overlay + icon-only collapsed mode */
@media(max-width: 768px) {
    .admin-sidebar {
        width: 0px !important;
        visibility: visible;
        transform: translate3d(0,0,0);
    }
    .admin-sidebar .item:not(:first-child) {
        //opacity: 0;
        //pointer-events: none;
    }    
    .admin-sidebar .item {
        opacity: 0;
        pointer-events: none;
    }    
    .sidebar-menu-toggle {
       // display: none !important;
    }
    .pusher {
        transform: translate3d(0,0,0);
        margin-left: 0px;
    }
    .main-content {
        //margin-left: 15rem;

    }

}

/* admin-modules.css - minimal enhancements for module panels */
.module-card { border-radius: 6px; box-shadow: 0 1px 0 rgba(34,36,38,.15); }
.module-card .module-card-header { display:flex; justify-content:space-between; align-items:center; }
.module-card .module-card-header .header { font-size:1.05em; margin-bottom:0; }
.module-card .module-card-header .module-version { font-size:0.8em; color:#999; margin-left:8px; }
.module-card .module-actions { min-width:240px; text-align:right; }
.status-badge { font-weight:700; padding:0.4em 0.6em; border-radius:999px; }
.module-deps .dep-item { padding:0.35em 0; }
.module-deps .dep-status { font-size:0.85em; color:#666; }
.module-settings-accordion .title { font-weight:700; }
.module-settings-form .field { margin-bottom: 0.8em; }
.save-status { font-size:0.9em; color:#666; vertical-align:middle; }
.ui.checkbox .box { margin-right:0.4em; }
.module-col { margin-bottom: 1.1rem; }


/* Maveric basic html */
nav { display: block; clear: both;  }
nav.pagination { font-size: 1em !important;  background: rgba(0,0,0,.03);  padding: .78571429em 1.14285714em !important; min-height: 40px; margin: 10px 0; 
 border-radius: 4px ; border-style: solid;
border-width: 1px; border-color: rgba(34, 36, 38, 0.15);
}
nav.pagination .label { float: left; }
nav.pagination .pages { float: right;  padding: 0px ; text-align: right; }
nav.pagination a { margin: 0 5px; padding: 2px 5px; color: rgba(34, 36, 38, 0.85); background-color: #fff; border-radius: 4px ; border-style: solid;
border-width: 1px; border-color: rgba(34, 36, 38, 0.15);}
nav.pagination a.active { text-decoration: underline; font-weight: 600; background: rgba(0,0,0,.03);  !important; }

table { clear: both; text-align: left; }
table a { color: var( --primary-color);  }
table td.actions a { color: var( --primary-color); padding: 0 2px; font-size: 0.88rem; }

form { background: var(--bg); line-height: 32px; }
form label { display: inline-block; padding: 0 5px; min-width: 240px;
    margin-top:15px; margin-right: 2rem; font-weight: 600; } 
form input, form select, form textarea, form checkbox, 
form radio, form button { padding: 0 5px;  border-color: #eee;  } 
form input.readonly, form input:focus .readonly,
form select.readonly,
form textarea.readonly, 
form checkbox.readonly, 
form radio.readonly, 
form button.readonly
{ border: 0;  background: var(--bg);   }


.ui.cards .card .content .meta ul { margin-left: 0; padding: 0; list-style-type: none;  }
.ui.cards .card .meta ul li {  padding: 0 5px;  margin-left: 5px;  }
.ui.cards .card .meta ul li.header { color: rgba(0,0,0,0.5); padding: 0; font-weight: 600; !important}


.ui .progress li {  list-style-type: square;  list-style-position: inside; margin-left: 0px; background: #fff; }

ul.tab-menu { margin: 0; padding: 0;  font-size: 1em !important; background: rgba(0,0,0,.03)}
ul.tab-menu li { display: inline-flex;  margin: 0 15px 0 15px; }
ul.tab-menu a { font-weight: 600;  padding: .78571429em 1.14285714em !important; }
ul.tab-menu li.active a{ font-weight: 700 !important; color: #000; background: rgba(0,0,0,.05); }

.ui.message {  padding: 10px 20px;}
.foot-content{  }