/* iTriangle Asset Manager — single stylesheet Light is the default; [data-theme="dark"] on flips the tokens. */ :root { --brand: #12836a; --brand-dark: #0d5f4d; --brand-soft: #e6f4f0; --accent-print: #f5d94a; --accent-share: #e2453f; --bg: #f4f6f7; --surface: #ffffff; --surface-2: #fafbfb; --border: #e2e7e9; --border-strong:#cfd7da; --text: #1c2b2f; --text-dim: #64777d; --text-faint: #93a3a8; --ok-bg: #e6f4ec; --ok-fg: #1a6b45; --warn-bg: #fdf3d8; --warn-fg: #855c07; --err-bg: #fdeaea; --err-fg: #a92a25; --info-bg: #e8f1fb; --info-fg: #1b599b; --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 2px rgba(18, 43, 47, .06), 0 8px 24px -12px rgba(18, 43, 47, .18); --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } html[data-theme="dark"] { --brand: #2ba98a; --brand-dark: #1d8a70; --brand-soft: #14312a; --bg: #10171a; --surface: #171f23; --surface-2: #1d262a; --border: #29343a; --border-strong:#3a474e; --text: #e6edef; --text-dim: #9cadb3; --text-faint: #6e8087; --ok-bg: #15301f; --ok-fg: #6bd39a; --warn-bg: #33290d; --warn-fg: #e6c25b; --err-bg: #351917; --err-fg: #f08a84; --info-bg: #142433; --info-fg: #7db6ea; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--sans); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } /* ------------------------------------------------------------------ layout */ .shell { display: flex; min-height: 100vh; } .sidebar { width: 246px; flex: 0 0 246px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar .brand { padding: 22px 20px 18px; border-bottom: 1px solid var(--border); } .sidebar .brand .logo { font-size: 26px; font-weight: 700; letter-spacing: -.5px; color: var(--brand); } .sidebar .brand .logo span { color: var(--text); } .sidebar .brand .sub { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; } .who { padding: 16px 20px; border-bottom: 1px solid var(--border); } .who .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-weight: 700; font-size: 15px; margin-bottom: 8px; } .who .nm { font-weight: 600; } .who .rl { font-size: 11.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; } .nav { padding: 14px 10px; flex: 1; } .nav h6 { margin: 14px 10px 8px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; } .nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text); font-weight: 500; text-decoration: none; margin-bottom: 2px; } .nav a:hover { background: var(--surface-2); text-decoration: none; } .nav a.on { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; } html[data-theme="dark"] .nav a.on { color: var(--brand); } .nav a .ic { width: 16px; height: 16px; flex: 0 0 16px; opacity: .7; } .nav a.on .ic { opacity: 1; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: 60px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 24px; position: sticky; top: 0; z-index: 20; } .content { padding: 24px; flex: 1; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .page-head h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.3px; } .crumbs { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; } .crumbs a { color: var(--text-dim); } /* ------------------------------------------------------------------- cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px; } .card > .card-h { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .card > .card-h h2 { margin: 0; font-size: 15px; font-weight: 650; } .card > .card-h .hint { font-size: 12px; color: var(--text-dim); } .card > .card-b { padding: 18px; } .card > .card-b.tight { padding: 0; } .grid { display: grid; gap: 16px; } .grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 1080px) { .grid.c4 { grid-template-columns: repeat(2, 1fr); } .grid.c3 { grid-template-columns: 1fr; } } @media (max-width: 720px) { .grid.c4, .grid.c2 { grid-template-columns: 1fr; } } .tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); } .tile .lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); font-weight: 600; } .tile .val { font-size: 30px; font-weight: 700; line-height: 1.15; margin-top: 4px; letter-spacing: -1px; } .tile .sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; } .tile.brand .val { color: var(--brand); } /* ------------------------------------------------------------------ tables */ .tbl-wrap { overflow-x: auto; } table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.tbl th, table.tbl td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; } table.tbl thead th { background: var(--surface-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); font-weight: 650; white-space: nowrap; } table.tbl tbody tr:hover { background: var(--surface-2); } table.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; } table.tbl .mono { font-family: var(--mono); font-size: 12.5px; } .empty { padding: 44px 20px; text-align: center; color: var(--text-dim); } .empty .big { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; } /* ------------------------------------------------------------------ badges */ .badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; letter-spacing: .01em; white-space: nowrap; } .badge.verified, .badge.available, .badge.active { background: var(--ok-bg); color: var(--ok-fg); } .badge.draft, .badge.repair { background: var(--warn-bg); color: var(--warn-fg); } .badge.shared, .badge.issued { background: var(--info-bg); color: var(--info-fg); } .badge.retired, .badge.exited, .badge.deleted { background: var(--err-bg); color: var(--err-fg); } .badge.plain { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); } .badge.solid { background: var(--brand-dark); color: #fff; } /* ----------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-family: inherit; line-height: 1.3; text-decoration: none; } .btn:hover { background: var(--surface-2); text-decoration: none; } .btn.primary { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; } .btn.primary:hover { background: var(--brand); border-color: var(--brand); } .btn.print { background: var(--accent-print); border-color: #e3c534; color: #46390a; } .btn.share { background: var(--accent-share); border-color: #cc3a34; color: #fff; } .btn.danger { background: transparent; border-color: #d9847f; color: var(--err-fg); } .btn.danger:hover { background: var(--err-bg); } .btn.sm { padding: 5px 10px; font-size: 12px; } .btn.xs { padding: 3px 8px; font-size: 11.5px; } .btn.ghost { border-color: transparent; background: transparent; } .btn.ghost:hover { background: var(--surface-2); } .btn[disabled] { opacity: .5; cursor: not-allowed; } .btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .icon-btn { width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-dim); font-size: 15px; } .icon-btn:hover { background: var(--surface-2); color: var(--text); } /* ------------------------------------------------------------------- forms */ label.f { display: block; margin-bottom: 14px; } label.f > .lb { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: var(--text); } label.f > .hp { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; } input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea { width: 100%; padding: 8px 11px; font-size: 13.5px; font-family: inherit; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); } textarea { min-height: 76px; resize: vertical; } .req::after { content: " *"; color: var(--accent-share); } .chk { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; margin-bottom: 10px; } .chk input { margin-top: 3px; } fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 16px; } fieldset legend { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); padding: 0 6px; } .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .toolbar input[type=text], .toolbar select { width: auto; min-width: 170px; } .toolbar .spacer { flex: 1; } /* ------------------------------------------------------------------- flash */ .flash { padding: 11px 15px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 13.5px; font-weight: 500; border: 1px solid transparent; } .flash.ok { background: var(--ok-bg); color: var(--ok-fg); border-color: color-mix(in srgb, var(--ok-fg) 25%, transparent); } .flash.err { background: var(--err-bg); color: var(--err-fg); border-color: color-mix(in srgb, var(--err-fg) 25%, transparent); } .flash.info { background: var(--info-bg); color: var(--info-fg); } /* ------------------------------------------------------------------- misc */ .kv { display: grid; grid-template-columns: 168px 1fr; gap: 8px 14px; font-size: 13.5px; } .kv dt { color: var(--text-dim); } .kv dd { margin: 0; font-weight: 500; word-break: break-word; } .copybox { display: flex; gap: 8px; } .copybox input { font-family: var(--mono); font-size: 12px; } pre.raw { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; overflow-x: auto; font-size: 11.5px; font-family: var(--mono); max-height: 300px; margin: 0; } .muted { color: var(--text-dim); } .small { font-size: 12px; } .nowrap { white-space: nowrap; } .right { text-align: right; } details.inline summary { cursor: pointer; font-size: 12.5px; color: var(--brand); } hr.sep { border: 0; border-top: 1px solid var(--border); margin: 18px 0; } /* login */ .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); } .login-card { width: 100%; max-width: 390px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 30px 28px; } .login-card .logo { font-size: 30px; font-weight: 700; color: var(--brand); letter-spacing: -.6px; } .login-card .tag { color: var(--text-dim); font-size: 13px; margin: 2px 0 22px; } /* dynamic asset rows on the undertaking form */ table.rows { width: 100%; border-collapse: collapse; font-size: 13px; } table.rows th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); padding: 8px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; } table.rows td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; } table.rows input, table.rows select { padding: 6px 8px; font-size: 12.5px; } table.rows tr.disabled { opacity: .45; }