/* Employee portal — auto layout by device + orientation
   html.layout-phone | layout-tablet | layout-desktop
   html.orient-portrait | orient-landscape
   html.dev-iphone | dev-ipad | dev-laptop | dev-android | dev-touch
*/
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.dev-touch button,
html.dev-touch .tile,
html.dev-touch .sp-btn,
html.dev-touch input,
html.dev-touch select {
  touch-action: manipulation;
}

/* Safe-area padding for notched iPhone / iPad */
html.layout-phone,
html.dev-iphone,
html.dev-ipad {
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   LOGIN
   ============================================================ */
html.layout-phone body.login.brand-jtr .jtr-header-inner,
html.layout-phone body.login.brand-rmp .rmp-header-inner {
  height: 56px;
  padding: 0 12px;
  padding-left: max(12px, var(--safe-l, 0px));
  padding-right: max(12px, var(--safe-r, 0px));
}
html.layout-phone body.login.brand-jtr .jtr-header-logo,
html.layout-phone body.login.brand-rmp .rmp-header-logo {
  height: 32px;
}
html.layout-phone body.login.brand-jtr .jtr-header-nav a + a,
html.layout-phone body.login.brand-jtr .jtr-header-title {
  display: none;
}
html.layout-phone body.login.brand-jtr .jtr-hero,
html.layout-phone body.login.brand-rmp .rmp-hero {
  padding: 1.25rem 12px 1.5rem;
  min-height: calc(100dvh - 56px - 120px);
  align-items: flex-start;
}
html.layout-phone body.login.brand-jtr .jtr-hero-copy,
html.layout-phone.orient-portrait body.login.brand-jtr .jtr-hero-copy {
  display: none !important;
}
html.layout-phone body.login.brand-jtr #form-container,
html.layout-phone body.login.brand-jtr #form-container.loading {
  width: 100% !important;
  max-width: 100% !important;
}
html.layout-phone body.login.brand-jtr #form-container #content {
  padding: 1.35rem 1.1rem 1.2rem !important;
}
html.layout-phone body.login.brand-jtr #form-container input[type="text"],
html.layout-phone body.login.brand-jtr #form-container input[type="password"],
html.layout-phone body.login.brand-jtr #form-container #submitbutton {
  height: 48px !important;
  font-size: 16px !important; /* iOS zoom-prevent */
}
html.layout-phone body.login.brand-jtr .jtr-footer-bar {
  padding-bottom: max(0.85rem, var(--safe-b, 0px));
}

/* iPhone landscape login — low chrome, form first */
html.layout-phone.orient-landscape body.login.brand-jtr .jtr-header-inner {
  height: 44px;
}
html.layout-phone.orient-landscape body.login.brand-jtr .jtr-hero {
  padding: 0.6rem 12px 0.8rem;
  min-height: calc(100dvh - 44px - 72px);
  align-items: center;
}
html.layout-phone.orient-landscape body.login.brand-jtr .jtr-footer-inner {
  padding: 0.4rem 12px;
}
html.layout-phone.orient-landscape body.login.brand-jtr .jtr-footer-bar {
  display: none;
}

/* iPad login */
html.layout-tablet body.login.brand-jtr .jtr-hero {
  padding: 2rem 1.5rem;
}
html.layout-tablet.orient-landscape body.login.brand-jtr .jtr-hero-inner,
html.layout-desktop body.login.brand-jtr .jtr-hero-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  width: 100%;
  max-width: 1000px;
}
html.layout-tablet.orient-landscape body.login.brand-jtr .jtr-hero-copy {
  display: block;
}
html.layout-tablet.orient-portrait body.login.brand-jtr .jtr-hero-copy {
  display: none;
}

/* ============================================================
   DASHBOARD (workspace.php)
   ============================================================ */
html.layout-phone .sp-nav {
  height: 52px;
  padding: 0 10px;
  padding-left: max(10px, var(--safe-l, 0px));
  padding-right: max(10px, var(--safe-r, 0px));
  padding-top: var(--safe-t, 0px);
}
html.layout-phone .sp-nav .who,
html.layout-phone .sp-nav .brand-name span,
html.layout-phone .mode-select {
  display: none !important;
}
html.layout-phone .sp-nav .brand img { height: 28px; }
html.layout-phone .sp-shell {
  padding: 12px 12px calc(var(--taskbar-h) + 18px + var(--safe-b, 0px));
}
html.layout-phone .sp-hero { margin-bottom: 10px; }
html.layout-phone .sp-hero h1 { font-size: 1.2rem; }
html.layout-phone .dash-main {
  grid-template-columns: 1fr !important;
  gap: 10px;
}
html.layout-phone .apps-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
html.layout-tablet.orient-portrait .dash-main {
  grid-template-columns: 1fr !important;
}
html.layout-tablet.orient-landscape .dash-main {
  grid-template-columns: 300px minmax(0, 1fr);
}
html.layout-phone .tile {
  width: auto;
  min-height: 84px;
  padding: 8px 2px;
}
html.layout-phone .tile .icon-wrap,
html.layout-phone .tile .icon-wrap svg {
  width: 44px;
  height: 44px;
}
html.layout-phone .widgets {
  grid-template-columns: 1fr !important;
}
html.layout-phone .phone-embed { height: 320px !important; min-height: 320px !important; max-height: 320px !important; }
html.layout-phone #taskbar {
  height: calc(52px + var(--safe-b, 0px));
  padding: 0 10px var(--safe-b, 0px);
}
html.layout-phone .tb-app { min-height: 40px; padding: 0 12px; }
html.layout-phone .app-window {
  min-width: 0 !important;
  min-height: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  border-radius: 0 !important;
}

/* Phone landscape dashboard — denser chrome, two-up widgets if space */
html.layout-phone.orient-landscape .sp-hero { display: none; }
html.layout-phone.orient-landscape .apps-row {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
html.layout-phone.orient-landscape .tile { min-height: 72px; }
html.layout-phone.orient-landscape .widgets {
  grid-template-columns: 1fr 1fr !important;
}
html.layout-phone.orient-landscape .phone-card { grid-column: 1 / -1; }
html.layout-phone.orient-landscape .phone-embed { height: min(85vh, 420px); }
html.layout-phone.orient-landscape .sp-shell {
  padding-top: 8px;
}

/* iPad dashboard */
html.layout-tablet .sp-shell { max-width: 100%; padding: 16px 18px calc(var(--taskbar-h) + 20px); }
html.layout-tablet .tile { width: 88px; min-height: 96px; }
html.layout-tablet.orient-portrait .widgets { grid-template-columns: 1fr; }
html.layout-tablet.orient-landscape .widgets { grid-template-columns: 1.1fr 1fr; }
html.layout-tablet .phone-embed { height: 360px !important; min-height: 360px !important; max-height: 360px !important; }
html.layout-tablet .sp-btn, html.layout-tablet .tile { min-height: 44px; }

/* Desktop stays as authored */
html.layout-desktop .phone-embed,
html .phone-embed {
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;
  flex: none !important;
}

/* ============================================================
   DESK PHONE PAGE
   ============================================================ */
html.layout-phone .page-copy h1 { font-size: 1.35rem; }
html.layout-phone .desk { padding: 12px 8px 20px; }
html.layout-phone .stage { flex-direction: column; gap: 12px; }
html.layout-phone .phone { width: 100%; border-radius: 20px; padding: 10px; }
html.layout-phone .face { grid-template-columns: 64px 1fr 64px; gap: 6px; }
html.layout-phone .fkey { font-size: 8px; min-height: 40px; padding: 5px 2px; }
html.layout-phone .lcd { min-height: 160px; }
html.layout-phone .lcd-party { font-size: 16px; }
html.layout-phone .pad button { padding: 8px 0 6px; }
html.layout-phone .pad .d { font-size: 18px; }
html.layout-phone .big { min-height: 58px; font-size: 11px; }
html.layout-phone .notes-dock {
  width: 100%;
  min-height: 240px;
  max-height: 48vh;
}
html.layout-phone .jtr-header-title { display: none; }
html.layout-phone .jtr-header-inner {
  height: 52px;
  padding-left: max(12px, var(--safe-l, 0px));
  padding-right: max(12px, var(--safe-r, 0px));
}

html.layout-phone.orient-landscape .page-copy { display: none; }
html.layout-phone.orient-landscape .stage {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
}
html.layout-phone.orient-landscape .phone { flex: 1.15; }
html.layout-phone.orient-landscape .notes-dock {
  flex: 0.95;
  max-height: none;
  min-height: 0;
  width: min(380px, 42vw);
}
html.layout-phone.orient-landscape .desk { padding: 8px; }
html.layout-phone.orient-landscape .lower { grid-template-columns: 1fr 180px; }
html.layout-phone.orient-landscape .jtr-footer { display: none; }

html.layout-tablet .stage { gap: 14px; }
html.layout-tablet.orient-portrait .stage { flex-direction: column; }
html.layout-tablet.orient-portrait .notes-dock { width: 100%; max-height: 42vh; }
html.layout-tablet.orient-landscape .stage { flex-direction: row; flex-wrap: nowrap; }
html.layout-tablet.orient-landscape .notes-dock { width: min(400px, 36vw); }

html.embed.layout-phone .notes-dock { max-height: none; min-height: 0; align-self: stretch; }
html.embed .notes-dock { max-height: none; min-height: 0; align-self: stretch; height: auto; }

/* ============================================================
   GROMMUNIO WEB (mail / calendar / contacts)
   ============================================================ */
html.layout-phone #jtr-web-brandbar {
  height: 36px;
  padding: 0 10px;
  padding-left: max(10px, var(--safe-l, 0px));
  padding-right: max(10px, var(--safe-r, 0px));
}
html.layout-phone #jtr-web-brandbar a.jtr-web-brandbar-logo img { height: 24px; }
html.layout-phone #jtr-web-brandbar .jtr-web-brandbar-tag { display: none; }
html.layout-phone body.zarafa-webclient.jtr-has-brandbar.x-viewport,
html.layout-phone body.zarafa-webclient.jtr-has-brandbar .x-viewport {
  top: 36px !important;
}
html.layout-phone #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct {
  overflow-x: auto !important;
  white-space: nowrap;
}

/* ============================================================
   GUACAMOLE / REMOTE DESKTOP
   ============================================================ */
html.layout-phone .display,
html.layout-phone .client-view,
html.layout-tablet .display {
  height: 100dvh;
}
html.layout-phone .menu,
html.layout-phone #guac-menu {
  max-width: 100vw;
}
html.dev-touch .ew-mobile-bar {
  padding-bottom: var(--safe-b, 0px);
}

html.layout-phone.orient-landscape .ew-mobile-bar {
  font-size: 12px;
}