/* Garden's IVMS Theme v9
   Typography fix: Oswald only for post-login header navigation buttons.
   All other UI text/buttons use Roboto or Roboto Condensed.
*/

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto:wght@300;400;500;700;900&family=Roboto+Condensed:wght@300;400;500;600;700&display=swap');

:root {
  --gardens-primary: #0f3c64;
  --gardens-primary-light: #1d5f96;
  --gardens-primary-dark: #082844;
  --gardens-primary-soft: rgba(15, 60, 100, .10);
  --gardens-bg: #f4f7fb;
  --gardens-panel: #ffffff;
  --gardens-text: #243447;
  --gardens-muted: #64748b;
  --gardens-border: #d9e2ec;
}

html, body, #app,
input, button, select, textarea,
.ivu-layout, .ivu-menu, .ivu-table, .ivu-modal, .ivu-form,
.ivu-input, .ivu-select, .ivu-btn, .ivu-dropdown, .ivu-page,
.ivu-date-picker, .ivu-input-number,
.ivu-menu-item, .ivu-btn, .ivu-btn-primary, .ivu-btn-default, .ivu-btn-text,
.serverName, .serverTitle, .status, .detail,
.ivu-modal-header-inner, .ivu-table th, .ivu-table td {
  font-family: Roboto, "Segoe UI", Arial, sans-serif !important;
}

/* Condensed text for internal UI labels/titles without using Oswald outside header navigation */
.logo-name, .serverTitle, .ivu-modal-header-inner, .ivu-table th,
.ivu-page, .ivu-dropdown-menu, .ivu-select-dropdown {
  font-family: "Roboto Condensed", Roboto, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: .15px;
}

/* Oswald is restricted to the top header navigation buttons only */
.header2 .tab-title {
  font-family: Oswald, "Roboto Condensed", Roboto, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: .35px;
}

/* =========================================================
   LOGIN / HOME — real component hash: data-v-1b5b7cb3
   ========================================================= */
.background-img[data-v-1b5b7cb3] {
  width: 100% !important;
  height: 100vh !important;
  min-height: 730px !important;
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(8,40,68,.88) 0%, rgba(15,60,100,.60) 44%, rgba(8,40,68,.78) 100%),
    url('/static/image/backgroundNoLogo.jpg') center center / cover no-repeat !important;
}

.background-img[data-v-1b5b7cb3] .Carousel[data-v-1b5b7cb3] {
  display: none !important;
}

/* Hide original bus/legacy logo on login only */
.background-img[data-v-1b5b7cb3] .logo[data-v-1b5b7cb3] {
  display: none !important;
}

/* Garden's logo on login only — +30% compared to v5 */
.background-img[data-v-1b5b7cb3]::before {
  content: "";
  position: absolute;
  top: 42px;
  left: 56px;
  z-index: 3;
  width: 300px;
  height: 112px;
  background: url('/static/image/LogoWhite.png') left center / contain no-repeat;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
  pointer-events: none;
}

.background-img[data-v-1b5b7cb3] .dropdown[data-v-1b5b7cb3] {
  position: absolute !important;
  top: 60px !important;
  left: auto !important;
  right: 62px !important;
  z-index: 5 !important;
  font-family: Roboto, "Segoe UI", Arial, sans-serif !important;
  font-size: 14px !important;
}

.background-img[data-v-1b5b7cb3] .dropdown[data-v-1b5b7cb3] button,
.background-img[data-v-1b5b7cb3] .dropdown[data-v-1b5b7cb3] .ivu-btn {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.34) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  backdrop-filter: blur(8px);
}

.sofawareName[data-v-1b5b7cb3] {
  position: absolute !important;
  top: 250px !important;
  left: 7.2% !important;
  z-index: 2 !important;
  max-width: 620px !important;
}

.sofawareName .name[data-v-1b5b7cb3] {
  width: 620px !important;
  max-width: 620px !important;
  font-family: "Roboto Condensed", Roboto, "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(34px, 3.2vw, 50px) !important;
  line-height: 1.08 !important;
  letter-spacing: .015em !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: 0 12px 40px rgba(0,0,0,.42) !important;
}

.sofawareName .title[data-v-1b5b7cb3],
.sofawareName .slogan[data-v-1b5b7cb3] {
  display: none !important;
}

.background-img[data-v-1b5b7cb3] .loginContainer[data-v-1b5b7cb3] {
  width: 390px !important;
  height: auto !important;
  min-height: 392px !important;
  position: absolute !important;
  top: 154px !important;
  right: 8.2% !important;
  z-index: 4 !important;
  padding: 34px 36px 36px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 22px 70px rgba(2,6,23,.30) !important;
  overflow: visible !important;
}

.background-img[data-v-1b5b7cb3] .loginContainer .title[data-v-1b5b7cb3] {
  margin: 0 0 18px !important;
  color: var(--gardens-primary) !important;
  font-family: "Roboto Condensed", Roboto, "Segoe UI", Arial, sans-serif !important;
  font-size: 31px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}

.background-img[data-v-1b5b7cb3] .loginContainer .title[data-v-1b5b7cb3]::after {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--gardens-primary-light);
}

.background-img[data-v-1b5b7cb3] .loginContainer .account[data-v-1b5b7cb3] {
  width: 100% !important;
  height: 46px !important;
  margin-top: 17px !important;
  clear: both !important;
  display: flex !important;
  align-items: stretch !important;
}

.background-img[data-v-1b5b7cb3] .loginContainer .account .account-title[data-v-1b5b7cb3],
.background-img[data-v-1b5b7cb3] .loginContainer .account .password-title[data-v-1b5b7cb3] {
  float: none !important;
  flex: 0 0 50px !important;
  width: 50px !important;
  height: 46px !important;
  border-radius: 12px 0 0 12px !important;
  background-color: var(--gardens-primary) !important;
}

.background-img[data-v-1b5b7cb3] .cus-input[data-v-1b5b7cb3] {
  float: none !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 46px !important;
  border: 1px solid #dbe2ea !important;
  border-left: 0 !important;
  border-radius: 0 12px 12px 0 !important;
  padding-left: 16px !important;
  font-family: Roboto, "Segoe UI", Arial, sans-serif !important;
  font-size: 14px !important;
  color: var(--gardens-text) !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.background-img[data-v-1b5b7cb3] .cus-input[data-v-1b5b7cb3]:focus,
.background-img[data-v-1b5b7cb3] .loginContainer .code .id-code[data-v-1b5b7cb3]:focus {
  border-color: var(--gardens-primary-light) !important;
  box-shadow: 0 0 0 2px rgba(15,60,100,.14) !important;
}

.background-img[data-v-1b5b7cb3] .loginContainer .code[data-v-1b5b7cb3] {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin-top: 18px !important;
  margin-bottom: 20px !important;
  clear: both !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: visible !important;
}

.background-img[data-v-1b5b7cb3] .loginContainer .code .id-code[data-v-1b5b7cb3] {
  float: none !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  box-sizing: border-box !important;
  border: 1px solid #dbe2ea !important;
  border-radius: 12px !important;
  padding-left: 16px !important;
}

.background-img[data-v-1b5b7cb3] .loginContainer .code .code-img[data-v-1b5b7cb3] {
  float: none !important;
  flex: 0 0 96px !important;
  width: 96px !important;
  max-width: 96px !important;
  height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  object-fit: contain !important;
  display: block !important;
  border: 1px solid #dbe2ea !important;
  border-radius: 10px !important;
  background: #fff !important;
}

.background-img[data-v-1b5b7cb3] .loginContainer .login-btn[data-v-1b5b7cb3] {
  display: block !important;
  clear: both !important;
  width: 100% !important;
  height: 48px !important;
  margin-top: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--gardens-primary), var(--gardens-primary-light)) !important;
  color: #fff !important;
  font-family: "Roboto Condensed", Roboto, "Segoe UI", Arial, sans-serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  line-height: 48px !important;
  text-align: center !important;
  box-shadow: 0 12px 26px rgba(15,60,100,.28) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.background-img[data-v-1b5b7cb3] .loginContainer .login-btn[data-v-1b5b7cb3]:hover {
  filter: brightness(1.08);
}

/* Remove Android/iOS/Windows/Player strip from login only */
.tools[data-v-1b5b7cb3],
.copyright[data-v-1b5b7cb3],
.copyright2[data-v-1b5b7cb3] {
  display: none !important;
}

@media (max-width: 1050px) {
  .background-img[data-v-1b5b7cb3]::before {
    top: 28px;
    left: 32px;
    width: 247px;
    height: 92px;
  }

  .sofawareName[data-v-1b5b7cb3] {
    top: 130px !important;
    left: 36px !important;
    max-width: calc(100vw - 72px) !important;
  }

  .sofawareName .name[data-v-1b5b7cb3] {
    width: auto !important;
    max-width: calc(100vw - 72px) !important;
    font-size: clamp(30px, 6vw, 42px) !important;
  }

  .background-img[data-v-1b5b7cb3] .loginContainer[data-v-1b5b7cb3] {
    top: auto !important;
    right: 50% !important;
    bottom: 38px !important;
    transform: translateX(50%) !important;
    width: min(390px, calc(100vw - 44px)) !important;
    padding: 28px !important;
  }
}

/* =========================================================
   POST-LOGIN HEADER — confirmed DOM: .header2, .logo-icon,
   .logo-name, .tab, .tab-item, .tabBgc, .tab-title, .userInfo
   ========================================================= */
.header2 {
  background: var(--gardens-primary) !important;
  border-bottom: 1px solid var(--gardens-primary-dark) !important;
  box-shadow: 0 2px 10px rgba(8, 40, 68, .20) !important;
}

.header2 .logo-icon,
.header2 .logo-icon img {
  background: transparent !important;
}

/* System logo: replace only, do not enlarge internally */
.header2 .logo-icon img {
  content: url('/static/image/LogoWhite.png') !important;
  width: auto !important;
  height: 42px !important;
  max-width: 150px !important;
  object-fit: contain !important;
}

.header2 .logo-name {
  color: #ffffff !important;
  font-size: 19px !important;
  line-height: 1.1 !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}

.header2 .tab-title {
  font-family: Oswald, "Roboto Condensed", Roboto, "Segoe UI", Arial, sans-serif !important;
  color: rgba(255,255,255,.86) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.header2 .tab-item {
  transition: background .16s ease, color .16s ease, box-shadow .16s ease !important;
}

.header2 .tab-item:hover {
  background: rgba(255,255,255,.08) !important;
}

.header2 .tab-item:hover .tab-title {
  color: #ffffff !important;
}

.header2 .tabBgc {
  background: rgba(255,255,255,.14) !important;
  box-shadow: inset 0 -3px 0 var(--gardens-primary-light) !important;
}

.header2 .tabBgc .tab-title {
  color: #ffffff !important;
}

.header2 .userInfo,
.header2 .account {
  color: #ffffff !important;
  font-family: Roboto, "Segoe UI", Arial, sans-serif !important;
}

/* Dropdowns */
.ivu-dropdown-menu,
.ivu-select-dropdown {
  font-family: Roboto, "Segoe UI", Arial, sans-serif !important;
}

.ivu-dropdown-item:hover,
.ivu-select-item:hover {
  background: var(--gardens-primary-soft) !important;
  color: var(--gardens-primary) !important;
}

/* =========================================================
   SIDEBAR / MENU — confirmed DOM: .ivu-menu-light, .serverName,
   .ivu-menu-item-selected, .serverBottom
   ========================================================= */
.ivu-menu-light {
  background: #ffffff !important;
}

.sider-base-style,
.ivu-layout-sider {
  background: #ffffff !important;
  border-right: 1px solid var(--gardens-border) !important;
}

.ivu-menu-item,
.serverName {
  color: var(--gardens-text) !important;
  font-family: Roboto, "Segoe UI", Arial, sans-serif !important;
}

.ivu-menu-item:hover {
  background: var(--gardens-primary-soft) !important;
}

.ivu-menu-item:hover .serverName {
  color: var(--gardens-primary) !important;
}

.ivu-menu-item-selected,
.ivu-menu-item-active,
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
  background: rgba(15,60,100,.13) !important;
  color: var(--gardens-primary) !important;
  border-right-color: var(--gardens-primary) !important;
}

.ivu-menu-item-selected .serverName,
.ivu-menu-item-active .serverName {
  color: var(--gardens-primary) !important;
  font-weight: 700 !important;
}

/* =========================================================
   BUTTONS / FORMS — no yellow, CMS blue
   ========================================================= */
/* All action buttons: Roboto Condensed, never Oswald */
.ivu-btn,
.ivu-btn span,
.background-img[data-v-1b5b7cb3] .loginContainer .login-btn[data-v-1b5b7cb3] {
  font-family: "Roboto Condensed", Roboto, "Segoe UI", Arial, sans-serif !important;
}

.ivu-btn-primary {
  background: var(--gardens-primary) !important;
  border-color: var(--gardens-primary) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}

.ivu-btn-primary:hover,
.ivu-btn-primary:active {
  background: var(--gardens-primary-light) !important;
  border-color: var(--gardens-primary-light) !important;
  color: #ffffff !important;
}

.ivu-btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(15,60,100,.22) !important;
}

.ivu-input:focus,
.ivu-select-visible .ivu-select-selection,
.ivu-input-number-focused,
.ivu-date-picker-focused input {
  border-color: var(--gardens-primary-light) !important;
  box-shadow: 0 0 0 2px rgba(15,60,100,.16) !important;
}

.ivu-checkbox-checked .ivu-checkbox-inner {
  background-color: var(--gardens-primary) !important;
  border-color: var(--gardens-primary) !important;
}

.ivu-page-item-active {
  border-color: var(--gardens-primary) !important;
}

.ivu-page-item-active a,
.ivu-page-item:hover a {
  color: var(--gardens-primary) !important;
}

/* =========================================================
   CONTENT POLISH — safe visual-only touches
   ========================================================= */
body:not(:has(.background-img[data-v-1b5b7cb3])) {
  background: var(--gardens-bg) !important;
}

.content-margin-height,
.ivu-layout {
  background: var(--gardens-bg) !important;
}

.serverItem {
  background: #ffffff !important;
  border: 1px solid var(--gardens-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(15,60,100,.08) !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.serverItem:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(15,60,100,.35) !important;
  box-shadow: 0 8px 20px rgba(15,60,100,.12) !important;
}

.serverTitle {
  color: var(--gardens-primary) !important;
  font-weight: 600 !important;
}

.status {
  color: var(--gardens-muted) !important;
}

.detail a,
a {
  color: var(--gardens-primary) !important;
}

.detail a:hover,
a:hover {
  color: var(--gardens-primary-light) !important;
}

.ivu-table th {
  background: #eef4f9 !important;
  color: var(--gardens-primary) !important;
  font-weight: 600 !important;
}

.ivu-table td {
  color: var(--gardens-text) !important;
}

.ivu-modal-header {
  background: #f7fafc !important;
  border-bottom-color: var(--gardens-border) !important;
}

.ivu-modal-header-inner {
  color: var(--gardens-primary) !important;
  font-weight: 600 !important;
}

/* Footer Garden's - Login */

.gardens-login-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    height: 36px;

    background: #ffffff;
    border-top: 1px solid rgba(15,60,100,.15);

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #64748b;

    z-index: 9999;
}

.gardens-login-footer a {
    color: #0f3c64;
    text-decoration: none;
    font-weight: 500;
    margin-left: 4px;
}

.gardens-login-footer a:hover {
    text-decoration: underline;
}