/*
 * It is advised not to edit the smartadmin_production.css
 * as this will override any changes you make in the 
 * later versions of this theme. 
 * 
 * We advise that you use use this CSS to override 
 * SmartAdmin styles. 
 * 
 * Rename the stylesheet to whatever your liking so it will stay
 * unique to you with each update of SmartAdmin.
 */

/*
 * INDEX
 * 
 * - HTML
 * - BODY
 * - CUSTOM STYLES
 */

::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

/* Use the platform UI font for Workbench text. Icon and code fonts keep
   their own explicit font families. */
:root {
  --frx-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body,
button,
input,
select,
textarea,
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--frx-font-sans) !important;
  letter-spacing: 0.5px;
}

/* The max width is dependant on the container (more info below) */
.popover {
  max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

/* Open table Action menus to the left and align them with the caret button. */
td[data-title="'Actions'"] .btn-group > .dropdown-menu {
  right: 0;
  left: auto;
}

:root {
  --app-rail-w: 56px;
}

/* Keep body locked; allow widget content to scroll instead */
.main-body {
  overflow: hidden;
  font-family: var(--frx-font-sans) !important;
}

div[role="content"] {
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Indent left-panel child items across all sections */
#left-panel .nav-section-body nav > ul > li > a,
#left-panel .nav-section-body nav > ul > li > .menu-item-parent,
#left-panel .nav-section-body nav > ul > li > *:first-child {
  padding-left: 28px;
}

#left-panel .nav-section-body li > a[title="Studio Active Sessions"] {
  display: flex;
  align-items: center;
  gap: 6px;
}

#left-panel
  .nav-section-body
  li
  > a[title="Studio Active Sessions"]
  .menu-item-parent {
  display: block;
  line-height: 1.25;
}

@media (max-width: 979px) {
  #left-panel {
    left: calc(var(--app-rail-w) - 50px);
  }

  #main {
    margin-left: calc(170px + var(--app-rail-w));
    width: auto !important;
  }

  #content {
    width: calc(100% - 50px);
  }

  body.hidden-menu #left-panel {
    left: calc(var(--app-rail-w) - 170px);
  }

  body.hidden-menu #main {
    margin-left: var(--app-rail-w);
    left: 0;
  }
}

/* Narrow SmartMessageBox width and tidy button alignment */
.MessageBoxMiddle {
  width: 40%;
  left: 30%;
}
.MessageBoxButtonSection {
  text-align: right;
  margin-top: 4px;
}
.MessageBoxButtonSection button {
  float: none;
  margin-left: 6px;
  margin-right: 0;
}

/* Professional SmartMessageBox styling */
.MessageBoxContainer {
  width: 480px;
  margin: 0 auto;
  background: #ffffff;
  color: #111827;
  font-family: var(--frx-font-sans) !important;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  border: 1px solid #e5e7eb;
  padding: 18px 20px;
}
.MessageBoxMiddle {
  width: 100%;
  left: 0;
}
.MessageBoxMiddle .MsgTitle {
  color: #111827;
  font-family: var(--frx-font-sans) !important;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: left !important;
  display: block;
  width: 100%;
  margin-bottom: 20px;
}
.MessageBoxMiddle .pText {
  color: #4b5563;
  font-family: var(--frx-font-sans) !important;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  margin-top: 10px;
}
.MessageBoxButtonSection {
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid #eef2f7;
  text-align: right;
  padding-bottom: 25px;
}
.MessageBoxButtonSection button {
  font-family: var(--frx-font-sans) !important;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 400 !important;
  float: none;
  border: 1px solid #e6e6e6;
}
.MessageBoxButtonSection button:hover,
.MessageBoxButtonSection button:focus,
.MessageBoxButtonSection .btn:hover,
.MessageBoxButtonSection .btn:focus,
.MessageBoxButtonSection .btn-default:hover,
.MessageBoxButtonSection .btn-default:focus,
.MessageBoxButtonSection .btn-danger:hover,
.MessageBoxButtonSection .btn-danger:focus {
  background-color: #f5f5f5;
  border-color: #d4d4d4;
  color: #333;
  background-image: none;
}

.MessageBoxButtonSection .btn-danger {
  background-color: #fff;
  border-color: #e6e6e6;
  color: #333;
}

.modal-header {
  height: 40px !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
}
.modal-header .modal-title {
  font-size: 14px !important;
}

/* Use the Workbench primary action colour for the sign-in command. */
.wb-login-submit {
  background-color: rgb(25, 85, 88) !important;
  border-color: rgb(20, 68, 70) !important;
  color: #fff !important;
}

.wb-login-submit:hover,
.wb-login-submit:focus {
  background-color: rgb(20, 68, 70) !important;
  border-color: rgb(16, 56, 58) !important;
  color: #fff !important;
}

.wb-login-submit:active {
  background-color: rgb(16, 56, 58) !important;
  border-color: rgb(16, 56, 58) !important;
}

/* Match native choice controls to the Workbench primary theme color. */
#formUploader input[type="checkbox"],
#formUploader input[type="radio"] {
  accent-color: #195558;
}

/* Left-panel nested children: lighter background + indentation + hover */
#left-panel .nav-section-body > li > ul > li > a,
#left-panel .nav-section-body li > ul > li > a {
  background-color: #6f9496 !important; /* lighter than aside #4b787a */
  padding-left: 48px !important;
}

#left-panel .nav-section-body li > ul > li > ul > li > a {
  background-color: #6f9496 !important;
  padding-left: 60px !important;
}

#left-panel .nav-section-body > li > ul > li > a:hover,
#left-panel .nav-section-body li > ul > li > a:hover,
#left-panel .nav-section-body li > ul > li > ul > li > a:hover {
  background-color: rgba(240, 200, 140, 1) !important;
}

/* Parent items hover color */
#left-panel .nav-section-body > li > a:hover,
#left-panel .nav-section-body li > a:hover {
  background-color: rgba(240, 200, 140, 1) !important;
}

/* Collapse/Expand menu button hover color */
#left-panel .nav-section-header .panel-collapse:hover,
#left-panel .nav-section-header .panel-collapse:focus {
  background-color: rgba(240, 200, 140, 1) !important;
}

/* Selected (active) left-panel item: 10% darker than hover (240,200,140 -> #D8B47E) */
#left-panel .nav-section-body > li.active > a,
#left-panel .nav-section-body li.active > a,
#left-panel .nav-section-body > li.active > a:hover,
#left-panel .nav-section-body li.active > a:hover {
  background-color: #d8b47e !important;
}

/* No extra child indentation for Recent Projects only (without navGroup id hook) */
#left-panel .nav-section-body li > a:has(.path-detail),
#left-panel .nav-section-body li > a[title="No recent projects"] {
  padding-left: 35px !important;
}