/* ============================================================================================================================
   rk_pc.css - prilagoditev aplikacije Room keeping za večji zaslon (PC)
   Nalaga se ZA rk.css in forms.css (glej index.php); rk.css in forms.css ostaneta nespremenjena.
   Izgled (barve, ikone, kartice sob in zahtevkov) je enak kot na telefonu, spremeni se samo razporeditev:
     - meni je navpična vrstica na levi, ODJAVA je zadnja postavka na dnu menija; v zgornji pasici sta indikator nalaganja in napis
     - sobe in zahtevki so razporejeni v več stolpcev, vsaka kartica ima širino telefona
     - tabele (zasedenost, statistika, ...) uporabijo vso širino
   Pod 700 px širine se ne uporabi nobeno pravilo iz te datoteke: prikaz je enak kot na telefonu (rk.css).
   ============================================================================================================================ */

@media screen and (min-width: 701px) {

  html {
    max-width: none;
  }

  /* prostor za zgornjo pasico (48 px) in levi meni (220 px) */
  body {
    background: #ffffff;
  }

  body:has(> .menu) {
    padding: 48px 0 0 220px;             /* samo na straneh z menijem (ne na prijavi) */
  }

  /* ---- zgornja pasica: samo naslov (levo) in ODJAVA (skrajno desno) ---------------------------------------------------- */
  body:has(> .menu)::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: #333333;
    border-bottom: 1px solid #cccccc;
    z-index: 99;
  }

  /* ---- levi meni ----------------------------------------------------------------------------------------------------- */
  .menu {
    position: fixed;
    top: 48px;
    left: 0;
    bottom: 0;
    width: 220px;
    max-width: none;
    padding: 8px 0 0 0;
    border-radius: 0;
    border-bottom: none;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    font-size: 1.1em;
  }

  .menu br { display: none; }

  .menu li {
    display: flex !important;            /* inline style display:none iz index.php se na PC prepiše */
    align-items: center;
    top: 0;
    font-size: 0.85em;
    padding: 0 16px 0 12px;
    min-height: 44px;
    border-bottom: 1px solid #444444;
    border-left: 4px solid transparent;
    cursor: pointer;
    box-sizing: border-box;
    white-space: normal;
  }

  .menu li:hover { background: #4a4a4a; }

  .menu li.active {
    background: #444444;
    border-left-color: #bfff3e;
  }

  /* naslov v zgornji pasici (rk.js vanj dopiše izbrano postavko) */
  #MenuLabel {
    position: fixed;
    top: 0;
    left: 0;
    float: none !important;
    height: 48px;
    max-width: calc(100% - 20px);
    padding: 0 16px 0 52px;              /* 52 px: prostor za indikator nalaganja pred napisom */
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #bbbbbb;
    z-index: 101;
  }

  /* ODJAVA: zadnja postavka levega menija, čisto na dnu zaslona (pri dolgem meniju ostane vidna ob spodnjem robu) */
  .menu li[ida='Odjava'] {
    margin-top: auto;
    position: sticky;
    top: auto;
    bottom: 0;
    background: #333333;
    border-top: 1px solid #555555;
    border-bottom: none;
    z-index: 1;
  }

  .menu li[ida='Odjava']:hover { background: #4a4a4a; }

  /* indikator nalaganja: v zgornji pasici pred napisom "Room keeping - ..." */
  .menu .dt {
    position: fixed;
    top: 11px;
    right: auto;
    bottom: auto;
    left: 16px;
    width: 26px;
    height: 26px;
    z-index: 102;
  }

  #dummy { display: none; }

  /* ---- vsebina -------------------------------------------------------------------------------------------------------- */
  #content {
    max-width: 1800px;
    margin: 0;                           /* vsebina je poravnana levo, tik ob meniju (ni centrirana) */
    padding: 12px 20px 40px 20px;
    box-sizing: border-box;
  }

  /* polja v obrazcih ostanejo vsaj približno tako široka kot na telefonu, ne čez cel zaslon */
  .form .select, .form .text-input, .form .textarea, .form .button {
    max-width: 560px;
  }

  /* forms.css ima za .button margin-left:auto (na telefonu je gumb 100 % širok, zato brez učinka); pri omejeni širini bi ga potisnilo desno */
  .form .button {
    margin-left: 0;
  }

  /* razmik pod filtrskimi polji zgoraj na straneh (npr. "Izberi datum"), da vsebina (tabela ...) ni tik pod poljem;
     vrstice z lastnim inline razmikom (npr. HD filtri) ostanejo, kot so */
  #content > form.form > div:has(> .select),
  #content > form.form > div:has(> .text-input) {
    margin-bottom: 10px;
  }

  #content > form.form > .button {
    margin-bottom: 10px;
  }

  /* ---- sobe: kartice v več stolpcih ---------------------------------------------------------------------------------- */
  #content:has(> .grid-rooms) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 6px 12px;
    align-items: start;                  /* razširjena soba ne razteguje sosednjih kartic */
  }

  #content:has(> .grid-rooms) > #ShowRoomForm {
    grid-column: 1 / -1;
    margin: 0;                           /* auto robovi bi v mreži skrčili obrazec na širino vsebine */
  }

  #content:has(> .grid-rooms) > .grid-rooms[room='0'] {
    display: none;                       /* prazen "dummy" prostor na koncu seznama (na telefonu je rezerva za pomikanje) */
  }

  .grid-rooms {
    cursor: pointer;
  }

  .grid-rooms:hover {
    filter: brightness(0.97);
  }

  /* ---- zahtevki (HD / RK): kartice v več stolpcih -------------------------------------------------------------------- */
  #content > form.form:has(> .grid-cases) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
    gap: 10px 14px;
    align-items: start;
    margin: 12px 0 0 0;
  }

  #content > form.form:has(> .grid-cases) > .grid-cases {
    margin-bottom: 0 !important;
  }

  /* ---- tabele --------------------------------------------------------------------------------------------------------- */
  .shw td, .shw th {
    padding: 3px 8px;
  }

  .shw tr:hover { background-color: #e6edf0; }

  /* HTML tabele (v kodi width='100%') na širokem zaslonu niso čez cel zaslon; tabela z veliko stolpci se kljub temu razširi, kolikor potrebuje vsebina */
  table.shw {
    max-width: 900px;
  }

  /* ---- prijava -------------------------------------------------------------------------------------------------------- */
  #login_form {
    margin-top: 60px;
  }
}