* { box-sizing: border-box; }

body {
  font-family: "MS Sans Serif", Tahoma, sans-serif;
  font-size: 12px;
  background: #808080;
  margin: 0;
  padding: 24px;
  color: #000;
}

.win-window {
  max-width: 980px;
  margin: 0 auto;
  border: 2px solid #000;
  background: #C0C0C0;
}

.win-titlebar {
  background: #000080;
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  padding: 4px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.win-brand { display: flex; align-items: center; gap: 8px; }
.win-logo-small { height: 22px; width: auto; }
.win-user-info { font-weight: normal; font-size: 12px; padding-right: 4px; }

.win-window-body { padding: 16px; background: #C0C0C0; }

.win-masthead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 2px solid #808080;
}
.win-logo-large { height: 52px; width: auto; }
.win-masthead-company { font-size: 18px; font-weight: bold; color: #000080; }
.win-masthead-title { font-size: 13px; color: #444; }

.win-summary-row { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.win-summary-box {
  background: #fff;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  padding: 10px 14px;
  flex: 1;
  min-width: 220px;
}

.win-menubar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background: #C0C0C0;
  border-bottom: 2px solid #808080;
  padding: 4px 6px;
  margin: -16px -16px 14px -16px;
}
.win-menubar-left, .win-menubar-right { display: flex; flex-wrap: wrap; align-items: center; }

.win-dropdown { position: relative; }
.win-dropdown-toggle {
  font-family: "MS Sans Serif", Tahoma, sans-serif;
  font-size: 12px;
  padding: 3px 10px;
  background: #C0C0C0;
  border: 2px solid;
  border-color: #FFFFFF #808080 #808080 #FFFFFF;
  cursor: pointer;
}
.win-dropdown-toggle:active { border-color: #808080 #FFFFFF #FFFFFF #808080; }
.win-dropdown-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 2px;
  background: #C0C0C0;
  border: 2px solid;
  border-color: #FFFFFF #808080 #808080 #FFFFFF;
  min-width: 170px;
  z-index: 10;
}
.win-dropdown-menu.win-dropdown-open { display: flex; }
.win-dropdown-menu a {
  display: block;
  padding: 6px 10px;
  text-decoration: none;
  color: #000;
  font-size: 12px;
  border-bottom: 1px solid #ACA899;
}
.win-dropdown-menu a:last-child { border-bottom: none; }
.win-dropdown-menu a:hover { background: #000080; color: #fff; }

.win-password-row { display: flex; gap: 4px; }
.win-password-row input { flex: 1; }
.win-menubar a {
  display: inline-block;
  padding: 3px 10px;
  margin-right: 2px;
  text-decoration: none;
  color: #000;
  border: 1px solid transparent;
  font-size: 12px;
}
.win-menubar a:hover { border: 1px solid; border-color: #fff #808080 #808080 #fff; }

button, input[type=submit] {
  font-family: "MS Sans Serif", Tahoma, sans-serif;
  font-size: 12px;
  padding: 4px 14px;
  background: #C0C0C0;
  border: 2px solid;
  border-color: #FFFFFF #808080 #808080 #FFFFFF;
  border-radius: 0;
  cursor: pointer;
}
button:active, input[type=submit]:active {
  border-color: #808080 #FFFFFF #FFFFFF #808080;
}

input[type=text], input[type=password], input[type=number], input[type=date], select, textarea {
  font-family: "MS Sans Serif", Tahoma, sans-serif;
  font-size: 12px;
  padding: 3px 5px;
  border: 2px solid;
  border-color: #808080 #FFFFFF #FFFFFF #808080;
  background: #fff;
  border-radius: 0;
}
input:focus, select:focus, textarea:focus { outline: 1px dotted #000; }
input[readonly] { background: #DFDFDF; color: #444; }

table { border-collapse: collapse; width: 100%; border: 2px solid; border-color: #808080 #fff #fff #808080; background: #fff; }
th {
  background: #C0C0C0;
  border: 1px solid #808080;
  padding: 5px 7px;
  text-align: left;
  font-weight: bold;
  white-space: nowrap;
}
th a { color: #000; text-decoration: none; }
td { border: 1px solid #C0C0C0; padding: 5px 7px; }
tr:nth-child(even) td { background: #F0F0F0; }
tr:hover td { background: #000080; color: #fff; }
tr:hover td a { color: #fff; }

.deleted-row td { color: #777; font-style: italic; background: #E8E8E8; }
.deleted-row:hover td { background: #000080; color: #fff; font-style: normal; }

.status-badge {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid;
  border-radius: 0;
  font-size: 11px;
  font-weight: bold;
}
.status-active, .status-repaired, .status-reactivated, .status-available { background: #D5F5C0; color: #1B5E20; border-color: #7DBE5A; }
.status-damaged { background: #FBD3D3; color: #8B0000; border-color: #C46A6A; }
.status-under_repair { background: #FCE7B2; color: #7A4E00; border-color: #C99B3E; }
.status-retired { background: #DCDCDC; color: #444; border-color: #A0A0A0; }
.status-added, .status-in_use, .status-issued { background: #CFE2F3; color: #0B3D91; border-color: #6D9BC3; }
.status-recalled, .status-returned, .status-transferred { background: #E5D4F0; color: #4A0072; border-color: #A97DC0; }
.status-note { background: #EFEFEF; color: #555; border-color: #BBB; }
.status-edited { background: #FFF3C4; color: #7A5B00; border-color: #D4B15C; }
.status-quantity_changed { background: #D4E6F7; color: #17457A; border-color: #7DA7D9; }
.status-deleted { background: #F0C0C0; color: #6B0000; border-color: #B36A6A; }

.flashes { list-style: none; padding: 6px 10px; margin: 0 0 14px 0; background: #FFFFE1; border: 2px solid; border-color: #808080 #fff #fff #808080; color: #000; }

.timeline { list-style: none; padding: 0; }
.timeline li { border-left: 3px solid #808080; padding: 4px 0 10px 12px; margin-left: 4px; background: #fff; margin-bottom: 4px; }

.win-banner-danger { background: #FFC0C0; border: 2px solid; border-color: #808080 #fff #fff #808080; padding: 8px; margin-bottom: 14px; color: #800000; font-weight: bold; }

.win-statusbar { border-top: 2px solid #808080; margin: 14px -16px -16px -16px; padding: 4px 8px; font-size: 11px; color: #000; background: #C0C0C0; }

form { display: flex; flex-direction: column; max-width: 380px; gap: 8px; }
label { font-weight: normal; }
h2, h3 { font-weight: bold; color: #000080; }

.win-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  max-width: 760px;
}
.win-field { display: flex; flex-direction: column; gap: 2px; }
.win-field-full { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; }
.win-form-actions { display: flex; gap: 8px; margin-top: 4px; }
.win-form-grid .win-form-actions { grid-column: 1 / -1; }

.win-btn-link {
  display: inline-block;
  font-family: "MS Sans Serif", Tahoma, sans-serif;
  font-size: 12px;
  padding: 4px 14px;
  background: #C0C0C0;
  border: 2px solid;
  border-color: #FFFFFF #808080 #808080 #FFFFFF;
  text-decoration: none;
  color: #000;
  text-align: center;
}
.win-btn-link:active { border-color: #808080 #FFFFFF #FFFFFF #808080; }