/*

main   - то что в интерфейсе основном, основные элементы
common - переиспользуемые

tools  - конкретные редакторы
views  - виды (колонки, карты и т.п.)
mods   - модификаторы сторонних модулей

Префиксы:
 A_ - общее, переиспользуемое, приложение
 I_ - Index - главная страница, всякие регистрации и т.п.

*/

body,INPUT, TEXTAREA, SELECT
{
  font-weight: 300;
}

DIV, BODY, TR, TD, INPUT, TEXTAREA, SELECT
{
  font-family: "Roboto", sans-serif;
  font-size: var(--fsz);;
  
}

BODY
{
  overflow: hidden;
}

B
{
  font-weight:600;
}

INPUT, TEXTAREA, SELECT
{
  border:1px solid #AAA;
  border-radius:2px;
}

textarea {
    white-space: pre-wrap; /* Сохраняет пробелы и переносы строк */
}



#mx_cont
{
  position: fixed;
  width:100%;
  height:100%;
  left:0px;
  top:0px; 
  display:flex;
  flex-direction: column;
  min-height:0;
  overflow:hidden;
}




#mx_debug
{
  background:#EEEEEE;
  border-top:1px solid #CCC;
} 

#mx_debug_btns
{
  background:#555555;
  color:white;
}

#mx_debug_btns .A_BTNS_CONT {display:flex;gap:15px;padding:3px;font-size:12px;}


#mx_bin
{
  z-index:101;
  background:rgba(255,255,255,0.8);
  border-radius:5px;
  text-align:center;
  box-shadow: var(--shadow);  
  display:none;
  bottom: 10px;
  width:48px;height:48px;
  left: 50%;
  transform: translateX(-50%);
  padding:5px;
}

#mx_bin IMG
{
  width:100%;
  height:100%;
}

.A_DEBUG_WND 
{
  overflow-y:scroll;height:178px;max-height:178px;flex-grow:1;background:#EEE;
  min-width:100px;
  font-size:12px;
  font-family: 'JetBrains Mono', monospace;
}
.A_DEBUG_W {min-width:5px;background:#AAA;cursor:ew-resize;}
.leaflet-attribution-flag {display:none;opacity:0;}





/************ Misc Common *******************/

/*Серая иконка и текст, при наведении подсвечивается*/
DIV.A_GREY_HL       {color: #222;}
DIV.A_GREY_HL:hover {color: #000;}

DIV.A_GREY_HL       IMG {opacity:0.5;}
DIV.A_GREY_HL:hover IMG {opacity:0.8;}



/* *********** Панель сверху *************** */

#mx_tpanel
{
  z-index:10;
  position:absolute;
  left:0px;
  top:-1px;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  xbackground:white;
}



DIV.DIR_TITLE
{
  font-weight:400;
  display:flex;
  gap:10px;
  align-items:center;
}

DIV.DIR_TITLE IMG, DIV.DIR_TITLE SVG
{
  width:20px;
  height:20px;
}



DIV.DIR_PAN1
{
  display:flex;
  gap:10px;
  padding:0px 5px 0px 5px;
  xborder-bottom:1px solid #CCC;
  background:white;
  border-radius:0 0 5px 5px;
  box-shadow: 0 4px 6px -6px rgba(0,0,0,0.4);
}

DIV.DIR_PAN1_HL        {xpadding:4px;background: var(--yellow);;}



/* *********** Панель слева*************** */


DIV.AL_TOP_TITLE
{
  padding:8px 0 8px 2px;
}



DIV.AL_BODY
{
  padding: 5px;
}

DIV.AL_TITLE
{
  text-align:center;
  border-bottom:1px solid #CCC;
  margin:10px 0 10px 0;
}


/* *********** Строка состояния *************** */

#mx_statbar
{
  border-top:1px solid #CCC;
  background:#EEE;
  display:flex;
}


/* *********** Панель уведомлений*************** */
DIV.A_NOTIFY_CONT
{
  z-index:10;
  position:fixed;
  xbackground:red;  
}

DIV.A_NOTIFY_ONE
{
  background:white;
  border-radius: 5px;
  margin-bottom:10px;
  padding:3px;
  opacity:0.97;
  box-shadow: var(--shadow);
}


/*Mem Styles Common*/

DIV.AM_ITEM_TINY {font-size:12px;}

DIV.AM_ITEM_TINY IMG
{
  width:14px;
  height:14px;
}

DIV.AM_MORE
{
  display:flex;
  gap:6px 20px;
  flex-wrap:wrap;
  margin-top:10px;
}



DIV.AM_CHECKBOX DIV.Z_TABLE_CHECK
{
  width:  22px;
  height: 22px;
}

DIV.AM_CHECKBOX_TINY DIV.Z_TABLE_CHECK
{
  width:  16px;
  height: 16px;
}



DIV.AM_ICON_TINY {font-size:0px;}
DIV.AM_ICON_TINY IMG
{
  width:16px; 
  height:16px;
  opacity:0.7;
}

/* Mobile-only overrides */

#a_is_mobile
{
  opacity:0;
  font-size:0px;
}

#mx_mlay
{
  xbackground: red;
}
#mx_mmain
{
  xbackground: green;
}

#mx_mtops
{
  z-index: 1;
  position: fixed;     /* Фиксируем элемент */
  top: 0;           /* Прикрепляем к нижнему краю */
  left: 0;             /* Растягиваем по ширине */
  right: 0;
  width:100%;
}

#mx_mtop
{
  xbackground-color: white;
  xborder-bottom: 1px solid #CCC;  
  text-align: center;
}

#mx_mbot
{
  z-index: 1;
  display: flex;
  justify-content: space-around;
  background-color: white;
  border-top: 1px solid #CCC;

  position: fixed;     /* Фиксируем элемент */
  bottom: 0;           /* Прикрепляем к нижнему краю */
  left: 0;             /* Растягиваем по ширине */
  right: 0;
  width:100%;

}


.M_BTN_MAIN
{
  margin-left:auto;
  margin-right: auto;
  width:95%;
}

.M_BOT_BTN
{
  text-align: center;
  font-size:12px;
  padding: 5px 0 2px 0;
  color:#AAA;
  flex: 1;
  gap:2px;
  
}
.M_BOT_BTN IMG
{
  width:22px;
  height:22px;
  opacity:0.6;
}
.M_BOT_BTN_SEL IMG
{
  opacity:1;
}
.M_BOT_BTN_SEL
{
  color:#000;
}

.M_LPAN
{
  padding:10px;
}

.M_DIR_LIST
{
  background: white;
  border-radius: 5px;
  margin:5px;
  padding: 5px;
}

.M_REC_CONT
{
  padding: 5px;
}

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

.M_RECTOP_DIR
{
  white-space: nowrap;
  padding: 3px 5px 3px 5px;
}

.M_RECTOP_DIR .A_LIST_ITEM {gap:5px;}
.M_RECTOP_DIR .A_LIST_ICON svg
{
  width:24px;height: 24px;
}


.M_RECTOP_BTNS
{
  padding-right: 5px;
}

DIV.M_POPUP_TITLE
{
  border-radius: 0;
}
DIV.M_POPUP_BODY
{
  border-radius: 0;
}


@media only screen and (max-width: 611px)
{
  /* Add mobile styles here */

 :root { --fsz: 15px;  }
  
  DIV.A_LIST_ITEM {padding-top:4px;padding-bottom: 4px;}
  DIV.V_STUB_LIST {padding:2px 6px 2px 4px;}
  
  DIV.DIR_PAN1
  {
    margin-top:8px;
    border-radius: 5px;
  }
  DIV.ZX_POPUP_MENU_ITEM {font-size: 16px;padding-top:3px;padding-bottom: 3px;}
  
  #mx_debug_btns {background: #222299;}

  #mx_cont       {display: block;height:auto;position: static;}

  body {xxmin-height: 100vh;background: white;background-attachment: fixed;}
}