:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: #0d111a;
  color: #e8edf7;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --bg: #0d111a;
  --surface: #151b27;
  --surface-raised: #1a2230;
  --line: #283244;
  --muted: #8b96aa;
  --blue: #38bdf8;
  --blue-strong: #168bd2;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(ellipse at 80% -20%, #172e4b 0, transparent 36%), var(--bg); }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
.app-shell, .form-page { min-height: 100vh; }

.topbar { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 12px 32px; border-bottom: 1px solid rgba(118, 140, 174, .15); background: rgba(13, 17, 26, .84); backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 220px; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #38bdf8, #1679c2); color: #062238; font-size: 22px; font-weight: 850; box-shadow: 0 6px 18px #0785ca33; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; letter-spacing: .02em; }
.brand small { margin-top: 3px; color: #8290a8; font-size: 9px; font-weight: 750; letter-spacing: .16em; }
.global-search { width: min(520px, 45vw); height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: #121823; color: var(--muted); }
.global-search > span { font-size: 22px; line-height: 1; }
.global-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #eef4ff; font-size: 13px; }
.global-search input::placeholder { color: #778299; }
.clear-search { color: var(--blue); font-size: 11px; text-decoration: none; white-space: nowrap; }
.account-menu { display: flex; align-items: center; gap: 10px; }
.account-avatar { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #276899; border-radius: 50%; background: #12304a; color: #80d5ff; font-weight: 750; }
.account-copy strong, .account-copy small { display: block; }
.account-copy strong { max-width: 145px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.logout-link { margin-left: 10px; padding-left: 15px; border-left: 1px solid var(--line); color: #a9b4c7; font-size: 12px; text-decoration: none; }
.logout-link:hover { color: #fff; }

.workspace { max-width: 1700px; min-height: calc(100vh - 74px); display: grid; grid-template-columns: 260px minmax(0, 1fr); margin: 0 auto; }
.sidebar { display: flex; flex-direction: column; min-height: calc(100vh - 74px); padding: 26px 16px 18px; border-right: 1px solid rgba(118, 140, 174, .14); background: rgba(17, 23, 34, .65); }
.sidebar-title { display: flex; align-items: center; justify-content: space-between; margin: 0 9px 12px; color: #7f8ba1; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.folder-total { min-width: 22px; padding: 3px 6px; border-radius: 6px; background: #202a3a; color: #b7c5da; font-size: 10px; text-align: center; letter-spacing: 0; }
.folder-link { min-height: 38px; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid transparent; border-radius: 7px; color: #b4bfd1; font-size: 12px; text-decoration: none; transition: background .15s ease, color .15s ease; }
.folder-link:hover { background: #1a2534; color: #eef6ff; }
.folder-link.selected { border-color: #1e5076; background: linear-gradient(90deg, #14344f, #132638); color: #82d8ff; }
.folder-icon { width: 17px; color: #6e9bb9; font-size: 14px; text-align: center; }
.folder-icon-root { color: #d5dbe5; }
.folder-icon-child { color: #8e9aad; font-size: 12px; }
.folder-icon.is-open { color: #fff; }
.folder-admin-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 12px; }
.folder-menu-action { min-height: 32px; padding: 5px 7px; border: 1px solid #303b4e; border-radius: 6px; background: #171e2a; color: #c5cfde; font-family: inherit; font-size: 10px; font-weight: 650; cursor: pointer; }
.folder-menu-action:hover { border-color: #596579; background: #202a39; color: #fff; }
.folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-count { min-width: 20px; color: #78869c; font-size: 10px; text-align: right; }
.folder-children { margin-left: 13px; padding-left: 7px; border-left: 1px solid #29384b; }
.new-folder { margin-top: 30px; padding-top: 18px; border-top: 1px solid #263143; }
.new-folder input, .new-folder select { width: 100%; min-height: 35px; margin-bottom: 8px; padding: 7px 9px; border: 1px solid #303b4e; border-radius: 6px; outline: none; background: #111722; color: #e8edf7; font-size: 11px; }
.new-folder input:focus, .new-folder select:focus { border-color: #2387bd; }
.sidebar-foot { margin-top: auto; padding: 20px 9px 0; color: #657289; font-size: 10px; line-height: 1.7; }
.sidebar-foot strong { color: #8e9bb1; }

.main-content { min-width: 0; padding: 32px clamp(20px, 3vw, 48px) 22px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.eyebrow { color: #56b8ea; font-size: 9px; font-weight: 850; letter-spacing: .15em; }
.page-heading h1, .form-intro h1 { margin: 7px 0 5px; color: #f1f5fc; font-size: clamp(23px, 2.3vw, 30px); letter-spacing: -.04em; }
.page-heading p, .form-intro p { margin: 0; color: #8692a7; font-size: 12px; }
.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: linear-gradient(120deg, #1588c6, #1469aa); color: #f2fbff; box-shadow: 0 5px 18px #087cb522; }
.button-primary:hover { background: linear-gradient(120deg, #20a0e3, #167ac1); }
.button-muted { border-color: #303c50; background: #1a2230; color: #bdc9db; }
.button-muted:hover { border-color: #46627e; background: #202b3b; }
.button-full { width: 100%; min-height: 34px; font-size: 11px; }
.button-small { min-height: 34px; margin-top: 15px; font-size: 11px; }
.flash-message { margin: -9px 0 18px; padding: 11px 14px; border: 1px solid #21623f; border-radius: 8px; background: #123121; color: #95e9b3; font-size: 12px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 16px; }
.stat-card { min-height: 98px; display: flex; align-items: center; gap: 14px; padding: 17px; border: 1px solid #273246; border-radius: 10px; background: linear-gradient(145deg, #182130, #141a26); box-shadow: 0 12px 24px #00000010; }
.stat-icon { width: 38px; height: 38px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 9px; font-size: 17px; }
.stat-icon.blue { background: #12344c; color: #4ec8ff; }
.stat-icon.violet { background: #292344; color: #b49bff; }
.stat-icon.green { background: #14382e; color: #66ddb0; }
.stat-icon.amber { background: #3a3020; color: #f1bf68; }
.stat-label, .stat-card small { display: block; color: #8b97ab; font-size: 10px; }
.stat-card strong { display: inline-block; margin: 4px 7px 2px 0; color: #f1f5fc; font-size: 24px; line-height: 1; }
.stat-card small { display: inline-block; font-size: 9px; }

.panel { margin-bottom: 16px; overflow: hidden; border: 1px solid #273246; border-radius: 10px; background: #151b27; box-shadow: 0 10px 26px #00000012; }
.panel-heading { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 20px; border-bottom: 1px solid #252f40; }
.panel-heading h2 { margin: 5px 0 0; color: #e7edf7; font-size: 14px; letter-spacing: -.01em; }
.panel-note, .result-count { color: #8290a5; font-size: 10px; }
.category-chart { display: grid; gap: 12px; padding: 17px 20px 20px; }
.chart-row { display: grid; grid-template-columns: minmax(110px, 210px) minmax(50px, 1fr) 32px; align-items: center; gap: 12px; }
.chart-label { overflow: hidden; color: #aab6c9; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.chart-track { height: 9px; overflow: hidden; border-radius: 10px; background: #222c3b; }
.chart-bar { min-width: 2px; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #1487ca, #45c5e9); box-shadow: 0 0 12px #138ec833; }
.chart-value { color: #dce7f5; font-size: 10px; text-align: right; }
.empty-chart { padding: 25px; color: var(--muted); font-size: 12px; text-align: center; }

.equipment-heading { min-height: 70px; }
.table-wrap { width: 100%; overflow-x: auto; }
.equipment-table { width: 100%; min-width: 920px; border-collapse: collapse; }
.equipment-table th { padding: 11px 13px; background: #182130; color: #7f8da4; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.equipment-table td { padding: 12px 13px; border-top: 1px solid #232d3c; color: #b9c4d5; font-size: 10px; vertical-align: middle; }
.equipment-table tbody tr:hover { background: #192232; }
.equipment-name { display: block; color: #e0e9f5; font-size: 11px; }
.equipment-maker, .table-subline { display: block; margin-top: 4px; color: #7f8da3; font-size: 9px; }
.category-chip { display: inline-block; max-width: 180px; overflow: hidden; padding: 4px 7px; border: 1px solid #293a4c; border-radius: 5px; background: #1b2938; color: #8dbfe0; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.equipment-table code { padding: 3px 5px; border-radius: 4px; background: #101722; color: #87d8ad; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; white-space: nowrap; }
.observations { max-width: 190px; color: #8793a6 !important; line-height: 1.45; }
.password-field { display: flex; align-items: center; gap: 3px; }
.password-input { width: 90px; min-width: 0; padding: 4px 5px; border: 1px solid #2b374a; border-radius: 4px; outline: 0; background: #101722; color: #d5deeb; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.icon-button { width: 26px; height: 25px; display: inline-grid; place-items: center; padding: 0; border: 1px solid #344055; border-radius: 5px; background: #202a39; color: #9eacc0; font-size: 12px; text-decoration: none; cursor: pointer; }
.icon-button:hover { border-color: #4f7696; background: #26394b; color: #d8f2ff; }
.row-actions { display: flex; align-items: center; gap: 5px; }
.row-actions form { display: inline-flex; margin: 0; }
.delete-action:hover { border-color: #86464c; background: #45252e; color: #ff9a9e; }
.muted { color: #657287; }
.empty-row { height: 205px; text-align: center !important; }
.empty-row > * { display: block; margin-right: auto; margin-left: auto; }
.empty-icon { margin-bottom: 10px; color: #52708e; font-size: 26px; }
.empty-row strong { color: #d2dbea; font-size: 12px; }
.empty-row small { margin-top: 6px; color: #7e8ba0; font-size: 10px; }
.page-footer { padding: 8px 0 3px; color: #5f6c80; font-size: 9px; text-align: right; }
.page-footer span { padding: 0 4px; color: #354357; }

.form-page .topbar { max-width: 1500px; margin: 0 auto; }
.form-main { width: min(850px, calc(100% - 40px)); margin: 42px auto; }
.form-intro { margin-bottom: 20px; }
.form-panel { padding: 24px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 20px; }
.field { min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 7px; color: #b8c4d6; font-size: 11px; font-weight: 650; }
.field label span { color: #55c7f4; }
.input { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid #303c50; border-radius: 7px; outline: none; background: #101722; color: #edf3fa; font-size: 12px; }
.input:focus { border-color: #279bd1; box-shadow: 0 0 0 3px #1686bd22; }
.input::placeholder { color: #647187; }
.textarea { min-height: 90px; resize: vertical; }
.field-help { display: block; margin-top: 6px; color: #7f8da3; font-size: 10px; }
.field-error { display: block; margin-top: 6px; color: #ff9b9e; font-size: 10px; }
.form-actions { display: flex; justify-content: end; gap: 9px; margin-top: 23px; padding-top: 18px; border-top: 1px solid #273246; }

.login-wrapper { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(390px, 100%); padding: 34px; border: 1px solid #2a374b; border-radius: 14px; background: linear-gradient(145deg, #1a2433, #141a26); box-shadow: 0 24px 70px #0008; }
.login-card .logo { color: #5acaff; font-size: 20px; font-weight: 850; letter-spacing: .07em; }
.logo-sub { margin: 6px 0 25px; color: #8794a9; font-size: 11px; }
.login-card .field { margin: 15px 0; }
.login-card .btn { width: 100%; margin-top: 7px; }
.login-card .footer-note { margin-top: 18px; color: #68768c; font-size: 10px; text-align: center; }
.login-card .error { margin-top: 12px; color: #ff9b9e; font-size: 11px; text-align: center; }

@media (max-width: 1080px) {
  .workspace { grid-template-columns: 225px minmax(0, 1fr); }
  .sidebar { padding-right: 12px; padding-left: 12px; }
  .main-content { padding-right: 20px; padding-left: 20px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .topbar { min-height: 65px; flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .brand { flex: 1 1 auto; }
  .global-search { order: 3; width: 100%; max-width: none; }
  .account-menu { gap: 7px; }
  .account-avatar { width: 30px; height: 30px; }
  .account-copy strong { max-width: 95px; }
  .logout-link { margin-left: 4px; padding-left: 8px; }
  .workspace { display: block; }
  .sidebar { min-height: 0; padding: 15px 14px; border-right: 0; border-bottom: 1px solid #273246; }
  .sidebar nav { max-height: 190px; overflow: auto; }
  .folder-link { min-height: 34px; }
  .new-folder { margin-top: 12px; padding-top: 12px; }
  .sidebar-foot { display: none; }
  .main-content { padding: 23px 14px 18px; }
  .page-heading { align-items: start; flex-direction: column; gap: 15px; }
  .page-heading .button { width: 100%; }
  .stat-grid { gap: 9px; }
  .stat-card { min-height: 83px; gap: 9px; padding: 11px; }
  .stat-icon { width: 32px; height: 32px; }
  .stat-card strong { font-size: 21px; }
  .stat-card small { display: block; margin-top: 2px; }
  .panel-heading { padding-right: 14px; padding-left: 14px; }
  .category-chart { padding-right: 14px; padding-left: 14px; }
  .chart-row { grid-template-columns: minmax(90px, 38%) minmax(30px, 1fr) 25px; gap: 8px; }
  .table-wrap { overflow: visible; }
  .equipment-table { min-width: 0; display: block; }
  .equipment-table thead { display: none; }
  .equipment-table tbody, .equipment-table tr, .equipment-table td { width: 100%; display: block; }
  .equipment-table tr { padding: 9px 13px; border-top: 1px solid #273246; }
  .equipment-table td { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px; padding: 7px 0; border: 0; font-size: 10px; overflow-wrap: anywhere; }
  .equipment-table td::before { content: attr(data-label); color: #76849b; font-size: 9px; font-weight: 750; text-transform: uppercase; }
  .equipment-table .empty-row { display: block; height: auto; padding: 26px 8px; }
  .equipment-table .empty-row::before { display: none; }
  .row-actions { justify-content: start; }
  .form-main { width: calc(100% - 28px); margin: 26px auto; }
  .form-panel { padding: 17px; }
}

@media (max-width: 480px) {
  .account-copy { display: none; }
  .account-menu { margin-left: auto; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { align-items: flex-start; flex-direction: column; gap: 6px; }
  .stat-card strong { margin-top: 5px; }
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .field-wide { grid-column: auto; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .button { width: 100%; }
}

.credential-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.credential-heading > div { display: grid; gap: 5px; }
.credential-row { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(160px, 1fr) minmax(160px, 1fr) 34px; align-items: end; gap: 12px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--line, #d8d8d8); border-radius: 10px; }
.credential-row .field { min-width: 0; }
.credential-row input[type="hidden"] { display: none; }
.ip-row { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(200px, 1.2fr) 34px; align-items: end; gap: 12px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--line, #d8d8d8); border-radius: 10px; }
.ip-row .field { min-width: 0; }
.remove-credential { margin-bottom: 2px; font-size: 20px; }
.credential-display { display: grid; gap: 8px; }
.credential-display > div { display: grid; gap: 3px; }
.credential-display small, .password-field > small { color: var(--muted, #707070); font-size: 11px; }
.password-field { margin-bottom: 6px; }
@media (max-width: 760px) { .credential-row { grid-template-columns: 1fr 1fr; } .credential-row .field:nth-child(3) { grid-column: 1 / 2; } .remove-credential { justify-self: end; } }

/* Monochrome inventory theme */
:root { color-scheme: light; background: #fff; color: #111; --bg: #fff; --surface: #fff; --surface-raised: #f5f5f5; --line: #dedede; --muted: #666; --blue: #222; --blue-strong: #111; }
body { background: #fff; color: #111; }
.topbar, .sidebar { background: #fff; border-color: #e5e5e5; }
.topbar { backdrop-filter: none; }
.brand-mark { background: #111; color: #fff; box-shadow: none; }
.brand small, .sidebar-title, .sidebar-foot, .sidebar-foot strong, .account-copy small, .page-heading p, .form-intro p { color: #666; }
.global-search, .new-folder input, .new-folder select { background: #fafafa; color: #111; border-color: #d8d8d8; }
.global-search input, .page-heading h1, .form-intro h1 { color: #111; }
.global-search input::placeholder { color: #888; }
.clear-search, .eyebrow, .folder-icon { color: #333; }
.account-avatar { border-color: #bbb; background: #f3f3f3; color: #111; }
.folder-total, .button-muted, .icon-button { border-color: #d8d8d8; background: #f5f5f5; color: #333; }
.folder-link { color: #444; }
.folder-link:hover, .folder-link.selected, .icon-button:hover, .button-muted:hover { border-color: #bbb; background: #eee; color: #111; }
.folder-link.selected { border-color: #aaa; background: #eee; }
.folder-children, .new-folder, .panel-heading, .form-actions { border-color: #e3e3e3; }
.button-primary, .button-primary:hover { background: #111; color: #fff; box-shadow: none; }
.flash-message { border-color: #ccc; background: #f5f5f5; color: #222; }
.panel { border-color: #e1e1e1; background: #fff; box-shadow: 0 3px 12px #00000008; }
.panel-heading h2, .equipment-name, .empty-row strong { color: #111; }
.panel-note, .result-count, .equipment-maker, .table-subline, .observations { color: #666 !important; }
.equipment-table th { background: #f5f5f5; color: #555; }
.equipment-table td { border-color: #e8e8e8; color: #333; }
.equipment-table tbody tr:hover { background: #fafafa; }
.category-chip { border-color: #ddd; background: #f5f5f5; color: #333; }
.equipment-table code { background: #f3f3f3; color: #111; }
.password-input, .input { border-color: #d3d3d3; background: #fff; color: #111; }
.input:focus, .new-folder input:focus, .new-folder select:focus { border-color: #555; box-shadow: 0 0 0 3px #00000010; }
.input::placeholder { color: #888; }
.field label { color: #333; }
.field-help, .muted, .empty-row small, .page-footer { color: #666; }
.field-error { color: #8b1c1c; }
.login-card { border-color: #ddd; background: #fff; box-shadow: 0 12px 38px #00000012; }
.login-card .logo { color: #111; }
.folder-permissions { min-width: 0; margin: 0; padding: 14px; border: 1px solid #ddd; border-radius: 8px; }
.folder-permissions legend { padding: 0 6px; font-size: 12px; font-weight: 700; }
.folder-permissions p { margin: 0 0 12px; color: #666; font-size: 11px; }
.permission-option { display: flex !important; align-items: center; gap: 8px; min-height: 32px; margin: 0 !important; border-top: 1px solid #eee; font-weight: 450 !important; }
.permission-option input { accent-color: #111; }
.admin-main { width: min(980px, calc(100% - 40px)); }
.users-table { min-width: 650px; }
.users-table .category-chip { margin: 2px; }
.inventory-tools { display: flex; align-items: center; gap: 15px; }
.view-switcher { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid #ddd; border-radius: 8px; background: #f7f7f7; }
.view-switcher a { padding: 6px 9px; border-radius: 6px; color: #555; font-size: 11px; text-decoration: none; }
.view-switcher a:hover { color: #111; background: #eee; }
.view-switcher a.active { background: #111; color: #fff; }
.equipment-grid.view-list { display: flex; flex-direction: column; gap: 9px; }
.view-list .equipment-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.view-list .equipment-card-open { display: grid; grid-template-columns: 125px minmax(0, 1fr); align-items: center; }
.view-list .card-photo { width: 125px; height: 96px; aspect-ratio: auto; }
.view-list .card-main { grid-template-columns: minmax(150px, 1.4fr) minmax(120px, 1fr) repeat(3, minmax(85px, 1fr)); align-items: center; gap: 9px 12px; }
.view-list .card-main .equipment-name { font-size: 13px; }
.view-list .card-actions { flex-direction: column; }
.detail-addresses dd { display: grid; gap: 7px; }
.detail-addresses dd > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.detail-addresses dd strong { min-width: 75px; color: #555; font-size: 10px; }
.detail-addresses dd code { overflow-wrap: anywhere; white-space: normal; }

/* Readable NOC typography */
:root { font-size: 15px; }
body { line-height: 1.55; }
.global-search input { font-size: 14px; }
.account-copy strong { font-size: 13px; }
.sidebar-title, .new-folder input, .new-folder select { font-size: 11px; }
.folder-link { font-size: 13px; }
.folder-count { font-size: 11px; }
.eyebrow { font-size: 10px; letter-spacing: .1em; }
.button { font-size: 13px; }
.page-heading p, .form-intro p { font-size: 13px; }
.panel-heading h2 { font-size: 16px; }
.result-count { font-size: 11px; }
.card-main .equipment-name { font-size: 14px; line-height: 1.35; }
.card-meta { font-size: 12px; line-height: 1.4; }
.category-chip { font-size: 10px; }
.field label { font-size: 12px; }
.input { font-size: 13px; }
.field-help { font-size: 11px; line-height: 1.45; }
.detail-grid dd, .detail-notes p { font-size: 13px; line-height: 1.55; }
.detail-credential { font-size: 12px; }
.detail-credential > strong { font-size: 13px; }

.sidebar-toggle { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; }
.heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 9px; }
.heading-actions .button { width: auto !important; }
.collapse-glyph { margin-left: auto; font-size: 18px; transition: transform .2s ease; }
.sidebar-collapsed .collapse-glyph { transform: rotate(180deg); }
.folder-item { display: flex; align-items: center; gap: 2px; }
.folder-item .folder-link { flex: 1; min-width: 0; }
.folder-item-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; opacity: .72; }
.folder-item-actions form { margin: 0; }
.folder-item-action { width: 24px; height: 26px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #aab5c5; font-family: inherit; font-size: 14px; cursor: pointer; }
.folder-item-action:hover { border-color: #435066; background: #232c3b; color: #fff; }
.folder-delete-action:hover { border-color: #814747; background: #442a2a; color: #ffdada; }
.folder-link.is-dragging { opacity: .4; }
.folder-link.drop-target { border-color: #111; background: #e8e8e8; color: #111; box-shadow: inset 0 0 0 1px #111; }
.folder-link[draggable="true"] { cursor: grab; }
.folder-link[draggable="true"]:active { cursor: grabbing; }
.equipment-card[draggable="true"] { cursor: grab; }
.equipment-card[draggable="true"]:active { cursor: grabbing; }
.equipment-card.is-dragging { opacity: .48; }
.folder-expander { width: 25px; height: 28px; border: 0; border-radius: 5px; background: transparent; color: #444; cursor: pointer; }
.folder-expander:hover { background: #eee; }
.folder-expander[aria-expanded="false"] { transform: rotate(-90deg); }
.folder-children[hidden] { display: none; }
.workspace.sidebar-collapsed { grid-template-columns: 64px minmax(0, 1fr); }
.sidebar-collapsed .sidebar { padding-right: 8px; padding-left: 8px; }
.sidebar-collapsed .sidebar-title { justify-content: center; margin-right: 0; margin-left: 0; }
.sidebar-collapsed .sidebar-title > span:not(.collapse-glyph), .sidebar-collapsed .folder-name, .sidebar-collapsed .folder-count, .sidebar-collapsed .folder-expander, .sidebar-collapsed .folder-children, .sidebar-collapsed .new-folder, .sidebar-collapsed .sidebar-foot { display: none; }
.sidebar-collapsed .folder-link { justify-content: center; padding-right: 4px; padding-left: 4px; }
.sidebar-collapsed .folder-icon { width: auto; font-size: 17px; }
.equipment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; padding: 18px; }
.equipment-card { min-width: 0; overflow: hidden; border: 1px solid #e1e1e1; border-radius: 10px; background: #fff; transition: box-shadow .18s ease, transform .18s ease; }
.equipment-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px #00000012; }
.equipment-card-open { width: 100%; display: block; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.card-photo { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #f2f2f2; }
.card-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.card-main { display: grid; gap: 8px; padding: 13px 14px 15px; }
.card-main .equipment-name { overflow-wrap: anywhere; font-size: 13px; }
.card-main .category-chip { width: fit-content; max-width: 100%; }
.card-meta { overflow: hidden; color: #666; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.card-actions { display: flex; justify-content: end; gap: 6px; padding: 0 13px 12px; }
.card-actions form { margin: 0; }
.card-footer { display: flex; align-items: end; justify-content: space-between; gap: 8px; padding: 0 12px 11px; }
.card-copy-list { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.card-copy-account { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 5px; border: 1px solid #eee; border-radius: 6px; }
.card-copy-account small { flex-basis: 100%; color: #666; font-size: 10px; line-height: 1.25; }
.copy-chip { padding: 4px 6px; border: 1px solid #ddd; border-radius: 5px; background: #f5f5f5; color: #333; font-family: inherit; font-size: 10px; cursor: pointer; }
.copy-chip:hover { border-color: #aaa; background: #eee; color: #111; }
.card-footer .card-actions { flex: 0 0 auto; padding: 0; }
.view-list .card-footer { flex-direction: column; align-items: end; padding: 8px; }
.view-list .card-copy-list { justify-content: end; }
.empty-cards { display: grid; justify-items: center; gap: 8px; padding: 45px 15px; text-align: center; }
.empty-cards strong { color: #111; font-size: 14px; }
.empty-cards small { color: #666; font-size: 12px; }
.detail-modal { position: fixed; width: min(900px, calc(100vw - 32px)); max-width: none; max-height: min(90dvh, 900px); padding: 0; overflow: auto; border: 1px solid #ddd; border-radius: 14px; background: #fff; color: #111; box-shadow: 0 24px 90px #0005; }
.detail-modal::backdrop { background: #0008; backdrop-filter: blur(2px); }
.modal-close { position: sticky; z-index: 2; top: 10px; float: right; width: 36px; height: 36px; margin: 10px 10px -46px 0; border: 1px solid #ddd; border-radius: 50%; background: #fff; color: #111; font-size: 23px; cursor: pointer; }
.modal-body { min-height: 180px; }
.modal-loading, .modal-error { padding: 40px; color: #555; text-align: center; }
.equipment-detail { display: grid; grid-template-columns: minmax(190px, .72fr) minmax(0, 1.5fr); min-height: 370px; }
.detail-cover { min-height: 100%; overflow: hidden; background: #f2f2f2; }
.detail-cover img { position: sticky; top: 0; width: 100%; max-height: 82dvh; display: block; object-fit: cover; transform: scale(1.08); }
.detail-content { padding: 27px; }
.detail-title-row { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-right: 30px; }
.detail-title-row h2 { margin: 7px 0 16px; overflow-wrap: anywhere; font-size: 22px; }
.detail-host-copy { display: flex; align-items: flex-start; gap: 6px; }
.detail-host-copy h2 { min-width: 0; }
.detail-category-copy { display: flex; align-items: center; gap: 5px; }
.detail-copy-button { width: 25px; height: 25px; display: inline-grid; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid #ddd; border-radius: 6px; background: #fafafa; color: #444; font-family: inherit; font-size: 13px; cursor: pointer; }
.detail-copy-button:hover { border-color: #aaa; background: #eee; color: #111; }
.detail-copy-field { min-width: 0; display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.detail-copy-field > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.detail-copy-field code { overflow-wrap: anywhere; }
.detail-copy-field[role="button"] { cursor: copy; border-radius: 4px; }
.detail-copy-field[role="button"]:hover { background: #f0f0f0; }
.detail-copy-field[role="button"]:focus-visible { outline: 2px solid #333; outline-offset: 2px; }
.detail-copy-icon { flex: 0 0 auto; color: #777; font-size: 12px; }
.detail-note-copy { display: flex; align-items: flex-start; gap: 8px; }
.detail-note-copy p { flex: 1 1 auto; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: 0; }
.detail-grid > div { min-width: 0; padding: 10px; border: 1px solid #eee; border-radius: 7px; }
.detail-grid dt { margin-bottom: 5px; color: #666; font-size: 10px; text-transform: uppercase; }
.detail-grid dd { margin: 0; overflow-wrap: anywhere; font-size: 12px; }
.detail-grid a { color: #222; }
.detail-credentials, .detail-notes { margin-top: 20px; }
.detail-credentials h3, .detail-notes h3 { margin: 0 0 9px; font-size: 13px; }
.detail-credential { display: grid; gap: 7px; padding: 11px; border: 1px solid #e7e7e7; border-radius: 8px; margin-bottom: 8px; font-size: 11px; }
.detail-credential > strong { font-size: 12px; }
.detail-credential .password-field { flex-wrap: wrap; }
.detail-credential .password-input { width: min(220px, 55vw); }
.detail-notes p { margin: 0; color: #444; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.photo-upload-form { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 20px; padding-top: 15px; border-top: 1px solid #e5e5e5; }
.photo-upload-form label { font-size: 11px; font-weight: 700; }
.photo-upload-form input[type="file"] { max-width: 250px; font-size: 10px; }
.photo-upload-status { color: #444; font-size: 11px; }
.photo-field { display: grid; align-content: start; gap: 8px; }
.form-photo-preview { width: min(320px, 100%); max-height: 180px; border-radius: 8px; background: #f2f2f2; object-fit: cover; }
.folder-modal { position: fixed; width: min(440px, calc(100vw - 32px)); max-width: none; padding: 26px; border: 1px solid #ddd; border-radius: 12px; background: #fff; color: #111; box-shadow: 0 24px 90px #0004; }
.folder-modal::backdrop { background: #0007; backdrop-filter: blur(2px); }
.folder-modal h2 { margin: 7px 0 22px; font-size: 22px; }
.folder-modal label { display: block; margin: 13px 0 6px; color: #333; font-size: 11px; font-weight: 700; }
.folder-modal .form-actions { margin-bottom: 0; }
.folder-modal-help { margin: -13px 0 17px; color: #555; font-size: 12px; }
.folder-modal-close.modal-close { position: absolute; top: 10px; right: 10px; margin: 0; }
.folder-modal .form-actions .button { width: auto; }
@media (max-width: 760px) {
  .workspace.sidebar-collapsed { display: block; }
  .workspace.sidebar-collapsed .sidebar nav { display: none; }
  .sidebar-collapsed .sidebar-title { justify-content: space-between; }
  .sidebar-collapsed .sidebar-title > span:first-child, .sidebar-collapsed .sidebar-title .folder-total { display: inline; }
  .sidebar-collapsed .sidebar-title .collapse-glyph { margin-left: auto; }
  .equipment-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; padding: 12px; }
  .equipment-detail { grid-template-columns: 1fr; }
  .detail-cover { max-height: 240px; }
  .detail-cover img { position: static; max-height: 240px; transform: scale(1.08); }
  .detail-content { padding: 19px; }
  .heading-actions { width: 100%; justify-content: start; }
  .heading-actions .button { flex: 1; }
  .inventory-tools { align-items: end; flex-direction: column; gap: 7px; }
  .view-list .equipment-card { grid-template-columns: minmax(0, 1fr) auto; }
  .view-list .equipment-card-open { grid-template-columns: 82px minmax(0, 1fr); }
  .view-list .card-photo { width: 82px; height: 100%; min-height: 100px; }
  .view-list .card-main { grid-template-columns: 1fr 1fr; gap: 5px 9px; }
  .view-list .card-actions { padding: 8px; }
  .view-list .card-footer { padding: 7px; }
  .ip-row { grid-template-columns: 1fr 1fr 32px; gap: 8px; padding: 9px; }
}
@media (max-width: 480px) {
  .equipment-grid { grid-template-columns: 1fr; }
  .card-photo { aspect-ratio: 16 / 8; }
  .detail-grid { grid-template-columns: 1fr 1fr; }
  .inventory-tools { width: 100%; align-items: stretch; }
  .inventory-tools .view-switcher { justify-content: space-between; }
  .inventory-tools .view-switcher a { flex: 1; text-align: center; }
  .ip-row { grid-template-columns: 1fr 32px; }
  .ip-row .field:first-child { grid-column: 1 / -1; }
}

/* Cleaner equipment cards and direct copy rows */
.equipment-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 12px; padding: 14px; }
.equipment-card { border-color: #e5e5e5; border-radius: 14px; box-shadow: 0 3px 12px #00000008; }
.equipment-card:hover { border-color: #ccc; box-shadow: 0 9px 24px #00000012; }
.equipment-card-open { width: 100%; display: flex; flex-direction: column; align-items: stretch; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.card-photo { width: auto; height: 152px; min-height: 0; margin: 0 12px; padding: 6px; border: 0; border-radius: 12px; background: #f5f5f3; }
.card-photo img { border-radius: 9px; object-fit: contain; mix-blend-mode: multiply; }
.card-main { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 14px 11px; text-align: center; }
.card-title-line { display: flex; align-items: flex-start; justify-content: center; gap: 7px; min-width: 0; padding: 13px 14px 8px; text-align: center; }
.card-type-badge { flex: 0 0 auto; padding: 3px 5px; border-radius: 4px; background: #111; color: #fff; font-size: 9px; font-weight: 700; line-height: 1.25; }
.card-main .equipment-name { min-width: 0; display: block; overflow: visible; color: #111; font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: -.015em; overflow-wrap: break-word; word-break: normal; }
.card-title-line .equipment-name { flex: 0 1 auto; text-align: center; }
.card-pop-line { padding: 7px 12px 0; color: #222; font-size: 12px; font-weight: 700; line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
.card-main .meta-device { color: #606060; font-size: 11px; font-weight: 650; }
.card-context-line { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 9px; }
.card-folder-label { min-width: 0; display: inline-flex; align-items: center; gap: 5px; color: #666; font-size: 10px; font-weight: 650; }
.card-folder-label > span { color: #777; font-size: 12px; }
.card-location { color: #333; font-size: 11px; font-weight: 650; line-height: 1.35; }
.card-main .meta-device { color: #777; font-size: 10px; }
.card-footer { display: grid; justify-content: stretch; align-items: stretch; gap: 8px; padding: 0 12px 12px; }
.card-ip-list { display: grid; gap: 4px; }
.card-copy-row { width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) 25px; align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid #e9e9e9; border-radius: 7px; background: #fafafa; color: #222; text-align: left; cursor: pointer; }
.card-copy-row:hover, .card-secret-value:hover { border-color: #bbb; background: #f1f1f1; }
.card-copy-row span { color: #555; font-size: 10px; font-weight: 750; letter-spacing: .02em; }
.card-copy-row code { overflow: hidden; color: #111; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.card-copy-row b, .card-secret-value b { color: #777; font-size: 12px; text-align: center; }
.card-copy-list { display: grid; gap: 5px; }
.card-credential-line { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.card-credential-label { grid-column: 1 / -1; color: #666; font-size: 10px; font-weight: 650; }
.card-secret-value { min-width: 0; display: grid; grid-template-columns: 1fr 20px; align-items: center; gap: 2px 5px; padding: 5px 7px; border: 1px solid #e9e9e9; border-radius: 7px; background: #fff; text-align: left; cursor: pointer; }
.card-secret-value small { grid-column: 1 / -1; color: #777; font-size: 8px; font-weight: 750; letter-spacing: .05em; }
.card-secret-value code { overflow: hidden; color: #111; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.card-secret-value b { grid-column: 2; grid-row: 2; }
.card-actions { justify-content: end; padding: 2px 0 0; }
.card-footer .card-actions { border-top: 1px solid #eee; padding-top: 7px; }
.equipment-grid.view-list .equipment-card { grid-template-columns: minmax(0, 1fr); }
.view-list .equipment-card-open { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: 132px; align-items: center; }
.view-list .card-title-line { grid-column: 2; grid-row: 1; justify-content: flex-start; padding: 10px 12px 0; text-align: left; }
.view-list .card-title-line .equipment-name { text-align: left; }
.view-list .card-photo { grid-column: 1; grid-row: 1 / 4; width: auto; height: 112px; min-height: 0; margin: 10px; }
.view-list .card-pop-line { grid-column: 2; grid-row: 2; padding: 4px 12px; text-align: left; }
.view-list .card-main { grid-column: 2; grid-row: 3; align-items: flex-start; padding: 3px 12px 10px; text-align: left; }
.view-list .card-context-line { justify-content: flex-start; }
.view-list .card-footer { grid-template-columns: minmax(150px, .8fr) minmax(240px, 1.2fr) auto; align-items: center; }
.view-list .card-copy-list { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.view-list .card-credential-line { align-content: start; }
.view-list .card-footer .card-actions { border-top: 0; padding-top: 0; }

/* Collapse the sidebar without squeezing the inventory grid */
.workspace { min-width: 0; grid-template-columns: 260px minmax(0, 1fr); transition: grid-template-columns .2s ease; }
.sidebar { min-width: 0; overflow: hidden; }
.workspace.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.workspace.sidebar-collapsed .sidebar { width: 0; min-width: 0; padding: 0; border: 0; }
.sidebar-toggle-button { min-height: 36px; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #ddd; border-radius: 7px; background: #f6f6f6; color: #222; font-family: inherit; font-size: 11px; font-weight: 650; cursor: pointer; }
.sidebar-toggle-button:hover { background: #eee; }
.toggle-menu-icon { font-size: 16px; }
@media (max-width: 760px) {
  .equipment-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
  .equipment-grid.view-list .card-footer { grid-template-columns: 1fr; }
  .view-list .card-copy-list { grid-template-columns: 1fr 1fr; }
  .workspace { display: grid; grid-template-columns: minmax(0, 1fr); }
  .workspace .sidebar { display: flex; width: auto; min-height: 0; padding: 15px 14px; border-right: 0; border-bottom: 1px solid #e5e5e5; }
  .workspace.sidebar-collapsed { display: grid; grid-template-columns: minmax(0, 1fr); }
  .workspace.sidebar-collapsed .sidebar { display: none; }
  .topbar { justify-content: flex-start; }
  .sidebar-toggle-button { order: 2; }
}
@media (max-width: 480px) {
  .equipment-grid { grid-template-columns: 1fr; padding: 10px; }
  .equipment-grid.view-list .equipment-card-open { grid-template-columns: 86px minmax(0, 1fr); }
  .equipment-grid.view-list .card-photo { width: auto; }
  .view-list .card-copy-list { grid-template-columns: 1fr; }
  .view-list .card-credential-line { grid-template-columns: 1fr 1fr; }
  .card-copy-row { grid-template-columns: 48px minmax(0, 1fr) 22px; }
}

/* Copy feedback stays fixed so card controls never resize or shift. */
.copy-toast { position: fixed; z-index: 3000; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); padding: 10px 18px; border: 1px solid #333; border-radius: 999px; background: #111; color: #fff; box-shadow: 0 8px 28px #0003; font-size: 13px; font-weight: 650; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .18s ease, transform .18s ease; }
.copy-toast.visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 760px) {
  .equipment-grid.view-list .equipment-card-open { grid-template-columns: 98px minmax(0, 1fr); }
  .equipment-grid.view-list .card-photo { height: 98px; }
}
@media (max-width: 480px) {
  .equipment-grid { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .equipment-grid.view-list .equipment-card-open { grid-template-columns: 82px minmax(0, 1fr); }
  .equipment-grid.view-list .card-photo { height: 82px; margin: 6px; }
  .equipment-grid:not(.view-list) .card-photo { height: 140px; }
}

/* Modal photo uses a tighter panel and a closer crop. */
.equipment-detail { grid-template-columns: minmax(245px, .9fr) minmax(0, 1.5fr); min-height: 320px; }
.detail-cover { max-height: min(68dvh, 560px); min-height: 320px; align-self: start; }
.detail-cover img { width: 100%; height: 100%; min-height: 320px; max-height: min(68dvh, 560px); object-fit: cover; transform: scale(1.22); }
.detail-content { padding: 23px; }
@media (max-width: 760px) {
  .equipment-detail { grid-template-columns: minmax(0, 1fr); }
  .detail-cover { min-height: 250px; max-height: 250px; }
  .detail-cover img { min-height: 250px; max-height: 250px; transform: scale(1.18); }
}

/* Wider folder rail keeps names clear of the action buttons. */
.workspace { grid-template-columns: 330px minmax(0, 1fr); }
.folder-item { gap: 6px; }
.folder-item .folder-link { gap: 8px; }
.folder-item-actions { gap: 3px; opacity: 1; }
.folder-item-action { width: 25px; flex: 0 0 25px; }
.folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-title { gap: 8px; }
.sidebar-toggle-button { min-width: 28px; width: 28px; height: 28px; min-height: 28px; display: grid; flex: 0 0 28px; place-items: center; padding: 0; border: 1px solid #ccc; border-radius: 6px; background: #fff; color: #222; font-size: 20px; line-height: 1; cursor: pointer; }
.sidebar-toggle-button:hover { background: #eee; }
.toggle-menu-icon { display: block; font-size: 24px; line-height: 1; }
.folder-edit-button { min-height: 26px; padding: 0 8px; border: 1px solid #d4d4d4; border-radius: 6px; background: #fff; color: #333; font-family: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.folder-edit-button:hover { border-color: #999; background: #eee; color: #111; }
.folder-edit-modal { width: min(500px, calc(100vw - 32px)); }
.folder-edit-modal form + form { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e5e5e5; }
.folder-edit-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.folder-edit-inline .button { width: auto; white-space: nowrap; }
.folder-edit-delete .button-danger { border-color: #b33; background: #fff; color: #a22; }
.folder-edit-delete .button-danger:hover { background: #fff0f0; }
.folder-edit-modal .form-actions { margin-top: 15px; }
.card-quick-access { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) 18px; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #dedede; border-radius: 7px; background: #f7f7f7; color: #222; text-align: left; cursor: pointer; }
.card-quick-access:hover { border-color: #aaa; background: #eee; }
.card-quick-access span { color: #555; font-size: 9px; font-weight: 750; text-transform: uppercase; }
.card-quick-access code { overflow: hidden; color: #111; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.card-quick-access b { color: #777; font-size: 12px; text-align: center; }
.card-photo { height: 168px; }
.card-photo img { object-fit: cover; transform: scale(1.15); }
.view-list .equipment-card-open { min-height: 112px; }
.view-list .card-photo { height: 120px; }
.view-list .card-title-line { padding: 6px 9px 2px; }
.view-list .card-pop-line { padding: 1px 9px; font-size: 11px; }
.view-list .card-main { padding-top: 1px; padding-bottom: 4px; }
.view-list .card-footer { gap: 4px; padding: 4px 7px; }
.view-list .card-ip-list, .view-list .card-copy-list { gap: 3px; }
.view-list .card-copy-row, .view-list .card-secret-value, .view-list .card-quick-access { padding-top: 4px; padding-bottom: 4px; }
.view-list .card-copy-row code, .view-list .card-secret-value code, .view-list .card-quick-access code { font-size: 9px; }
.workspace.sidebar-collapsed { grid-template-columns: 48px minmax(0, 1fr); }
.workspace.sidebar-collapsed .sidebar { width: 48px; min-width: 48px; padding: 13px 7px; border-right: 1px solid #e5e5e5; }
.sidebar-collapsed .sidebar-title { justify-content: center; margin: 0 0 12px; }
.sidebar-collapsed .sidebar-title > span { display: none; }
.sidebar-collapsed .sidebar-toggle-button { width: 32px; flex-basis: 32px; }
.sidebar-collapsed .sidebar nav, .sidebar-collapsed .folder-admin-actions, .sidebar-collapsed .sidebar-foot { display: none; }
@media (max-width: 1100px) and (min-width: 761px) {
  .workspace { grid-template-columns: 300px minmax(0, 1fr); }
  .workspace.sidebar-collapsed { grid-template-columns: 48px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .card-photo { height: 160px; }
  .view-list .card-photo { height: 104px; }
  .folder-edit-inline { grid-template-columns: minmax(0, 1fr); }
  .folder-edit-inline .button { width: 100%; }
  .workspace { display: grid; grid-template-columns: minmax(0, 1fr); }
  .workspace .sidebar { width: auto; min-width: 0; padding: 15px 14px; border-right: 0; border-bottom: 1px solid #e5e5e5; }
  .workspace.sidebar-collapsed { grid-template-columns: 48px minmax(0, 1fr); }
  .workspace.sidebar-collapsed .sidebar { width: 48px; min-width: 48px; display: block; padding: 13px 7px; border-right: 1px solid #e5e5e5; border-bottom: 0; }
  .workspace.sidebar-collapsed .sidebar-title { justify-content: center; margin: 0; }
  .workspace.sidebar-collapsed .sidebar-title > span { display: none; }
  .workspace.sidebar-collapsed .sidebar nav, .workspace.sidebar-collapsed .folder-admin-actions, .workspace.sidebar-collapsed .sidebar-foot { display: none; }
}

/* Botao discreto de criar pasta no cabecalho da sidebar */
.folder-add-button {
  min-width: 22px; width: 22px; height: 22px; display: grid; flex: 0 0 22px; place-items: center;
  padding: 0; margin-left: auto; border: 1px solid #303b4e; border-radius: 6px;
  background: transparent; color: #8b97ab; font-family: inherit; font-size: 14px; line-height: 1;
  cursor: pointer; opacity: .7;
}
.folder-add-button:hover { opacity: 1; border-color: #596579; background: #202a39; color: #fff; }
.sidebar-collapsed .folder-add-button { display: none; }

/* Acesso restrito por usuario (card e modal) */
.card-credential-restricted { color: #7f8ba1; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.access-restricted-note { margin-top: 8px; font-size: 11px; }

/* Foto do card: inteira, centralizada e sem corte/zoom */
.card-photo {
  display: grid; place-items: center;
  width: auto; height: 168px; min-height: 0;
  margin: 0 12px; padding: 10px; overflow: hidden;
  border: 0; border-radius: 12px;
  background: linear-gradient(180deg, #f8f8f6 0%, #eeece8 100%);
}
.card-photo img {
  width: 100%; height: 100%; display: block;
  object-fit: contain; object-position: center;
  transform: none; border-radius: 8px; mix-blend-mode: normal;
}
.view-list .card-photo { height: 120px; padding: 8px; }

/* Acesso rapido: presente em todo equipamento com IP e com visual limpo */
.card-quick-access {
  min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) 20px;
  align-items: center; gap: 8px; padding: 6px 8px 6px 6px;
  border: 1px solid #e3e6ec; border-radius: 8px; background: #fff;
  color: #111; text-align: left; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.card-quick-access:hover { border-color: #111; background: #fbfbfb; box-shadow: 0 2px 8px #00000010; }
.card-quick-access .card-quick-label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; padding: 3px 7px; border-radius: 999px;
  background: #111; color: #fff; font-size: 9px; font-weight: 800;
  letter-spacing: .06em; line-height: 1.2; text-transform: uppercase;
}
.card-quick-access code {
  min-width: 0; overflow: hidden; color: #1b1b1b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: -.01em;
  text-overflow: ellipsis; white-space: nowrap;
}
.card-quick-access .card-quick-copy { color: #a2aab8; font-size: 12px; line-height: 1; text-align: center; }
.card-quick-access:hover .card-quick-copy { color: #111; }

@media (max-width: 900px) {
  .card-photo { height: 160px; }
  .view-list .card-photo { height: 104px; }
}
@media (max-width: 480px) {
  .card-photo { height: 140px; padding: 8px; }
  .view-list .card-photo { height: 82px; padding: 6px; }
}