/* LoreaTec Admin (PLAN-21). Light only on purpose: the ported widgets carry wp-admin's
   light colours inline. The classes below re-create the wp-admin vocabulary those widgets
   use (.wrap, .button, .notice, .widefat, .postbox …). */

:root {
  --bg: #f0f0f1;
  --surface: #fff;
  --text: #3c434a;
  --strong: #1d2327;
  --muted: #646970;
  --line: #c3c4c7;
  --line-soft: #dcdcde;
  --brand: #2271b1;
  --brand-dark: #135e96;
  --chrome: #1d2327;
  --chrome-2: #2c3338;
  --chrome-text: #f0f0f1;
  --ok: #00a32a;
  --warn: #dba617;
  --err: #d63638;
  --top: 46px;
  --side: 190px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 13px;
  line-height: 1.4;
}
a { color: var(--brand); }
a:hover, a:active { color: var(--brand-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
h1, h2, h3, h4 { color: var(--strong); }
h1 { font-size: 23px; font-weight: 400; margin: 0 0 12px; padding: 9px 0 4px; line-height: 1.3; }
h2 { font-size: 1.3em; margin: 1em 0; }
h3 { font-size: 1.1em; }
p { font-size: 13px; line-height: 1.5; margin: 1em 0; }
code, kbd { padding: 3px 5px 2px; margin: 0 1px; background: rgba(0, 0, 0, .07); font-size: 13px; font-family: Consolas, Monaco, monospace; }
hr { border: 0; border-top: 1px solid var(--line-soft); }
img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- chrome */

.adm-top {
  position: fixed; inset: 0 0 auto 0; height: var(--top); z-index: 100;
  display: flex; align-items: center; gap: 12px; padding: 0 12px 0 0;
  background: var(--chrome); color: var(--chrome-text);
}
.adm-brand { color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; padding-left: 16px; }
.adm-brand span { color: #72aee6; font-weight: 400; }
.adm-brand:hover { color: #fff; }
.adm-who { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.adm-who form { margin: 0; }
.adm-email { color: #c3c4c7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-burger { display: none; background: none; border: 0; color: #fff; padding: 10px 8px 10px 14px; cursor: pointer; }

.adm-side {
  position: fixed; top: var(--top); bottom: 0; left: 0; width: var(--side); z-index: 90;
  background: var(--chrome); overflow-y: auto; padding: 8px 0 24px;
}
.adm-side ul { list-style: none; margin: 0; padding: 0; }
.adm-side a {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  color: var(--chrome-text); text-decoration: none; font-size: 14px; line-height: 1.3;
}
.adm-side a:hover { background: var(--chrome-2); color: #72aee6; }
.adm-side .current a { background: var(--brand); color: #fff; }
.adm-side .dashicons { color: #a7aaad; flex: none; }
.adm-side .current .dashicons, .adm-side a:hover .dashicons { color: inherit; }

.adm-main { margin-left: var(--side); padding: calc(var(--top) + 10px) 20px 40px; min-height: 100vh; }
.wrap { margin: 0; max-width: 1600px; }

@media (max-width: 782px) {
  .adm-burger { display: block; }
  .adm-brand { padding-left: 0; }
  .adm-side { transform: translateX(-100%); transition: transform .15s ease; width: 240px; box-shadow: 2px 0 8px rgba(0, 0, 0, .3); }
  .adm-side.open { transform: none; }
  .adm-main { margin-left: 0; padding: calc(var(--top) + 8px) 16px 32px; }
  .adm-email { display: none; }
}

/* ------------------------------------------------------- wp-admin basics */

.button, .button-primary, .button-secondary {
  display: inline-block; text-decoration: none; font-size: 13px; line-height: 2.15384615; min-height: 30px;
  margin: 0; padding: 0 10px; cursor: pointer; border: 1px solid var(--brand); border-radius: 3px;
  white-space: nowrap; box-sizing: border-box; color: var(--brand); background: #f6f7f7; vertical-align: top;
  font-family: inherit;
}
.button:hover { background: #f0f0f1; border-color: var(--brand-dark); color: var(--brand-dark); }
.button-primary, .button.button-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.button-primary:hover, .button.button-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.button-small, .button.button-small { min-height: 26px; line-height: 2.18181818; padding: 0 8px; font-size: 11px; }
.button-link { background: none; border: 0; color: var(--brand); padding: 0; cursor: pointer; text-decoration: underline; font: inherit; }
.button-link-delete { color: #b32d2e; }
.button[disabled], .button:disabled { color: #a7aaad; border-color: #dcdcde; background: #f6f7f7; cursor: default; }
.button-primary[disabled], .button-primary:disabled { background: #72aee6; border-color: #72aee6; color: #fff; }

input[type=text], input[type=email], input[type=search], input[type=number], input[type=date], input[type=url],
input[type=password], select, textarea {
  font-family: inherit; font-size: 14px; color: var(--strong); border: 1px solid #8c8f94; border-radius: 4px;
  background: #fff; padding: 0 8px; min-height: 30px; line-height: 2; box-shadow: 0 0 0 transparent; max-width: 100%;
}
textarea { line-height: 1.4; padding: 6px 8px; }
select { padding-right: 24px; }
input[type=checkbox] { width: 16px; height: 16px; margin: 0 4px 0 0; vertical-align: middle; accent-color: var(--brand); }
label { cursor: pointer; }

.notice, div.updated, div.error {
  background: #fff; border: 1px solid var(--line); border-left-width: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
  margin: 5px 0 15px; padding: 1px 12px;
}
.notice p { margin: .5em 0; padding: 2px; }
.notice-success, div.updated { border-left-color: var(--ok); }
.notice-success.notice-alt { background: #edfaef; }
.notice-warning { border-left-color: var(--warn); }
.notice-warning.notice-alt { background: #fcf9e8; }
.notice-error, div.error { border-left-color: var(--err); }
.notice-error.notice-alt { background: #fcf0f1; }
.notice-info { border-left-color: #72aee6; }
.notice-info.notice-alt { background: #f0f6fc; }

.description, p.description { color: var(--muted); font-size: 13px; }

.widefat { border-spacing: 0; width: 100%; clear: both; margin: 0; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 1px rgba(0, 0, 0, .04); }
.widefat * { word-wrap: break-word; }
.widefat td, .widefat th { padding: 8px 10px; vertical-align: top; text-align: left; }
.widefat thead th, .widefat thead td { border-bottom: 1px solid var(--line); font-weight: 400; color: var(--strong); }
.widefat tfoot th, .widefat tfoot td { border-top: 1px solid var(--line); }
.widefat td { font-size: 13px; line-height: 1.5em; }
.striped > tbody > :nth-child(odd), ul.striped > :nth-child(odd), .alternate { background-color: #f6f7f7; }
.fixed { table-layout: fixed; }

.postbox { position: relative; min-width: 255px; border: 1px solid var(--line); box-shadow: 0 1px 1px rgba(0, 0, 0, .04); background: #fff; }
.postbox-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); }
.postbox-header h2, .postbox .hndle { font-size: 14px; padding: 8px 12px; margin: 0; line-height: 1.4; }
.postbox-header h2 a { color: var(--strong); text-decoration: none; }
.postbox-header h2 a:hover { color: var(--brand); }
.postbox .inside { padding: 0 12px 12px; line-height: 1.4; font-size: 13px; margin: 11px 0; }

.dashicons, .dashicons-before:before { width: 20px; height: 20px; font-size: 20px; line-height: 1; vertical-align: top; text-align: center; }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }
.hidden, [hidden] { display: none; }

/* ------------------------------------------------------------ home cards */

.adm-cards { column-width: 440px; column-gap: 20px; }
.adm-card { break-inside: avoid; margin: 0 0 20px; display: inline-block; width: 100%; }
@media (max-width: 782px) { .adm-cards { column-width: auto; columns: 1; } }

/* The status page's sticky menu sat under wp-admin's 32px bar; ours is taller. */
.adm .lta-st-nav { top: var(--top); }

/* -------------------------------------------------------------- users */

.adm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 12px; }
.adm-matrix { min-width: 560px; }
.adm-matrix th.adm-col-user { font-weight: 600; text-align: center; vertical-align: bottom; min-width: 130px; word-break: break-all; }
.adm-matrix .adm-off { color: #a7aaad; }
.adm-matrix .adm-group th { background: #f6f7f7; font-weight: 600; color: var(--strong); padding-top: 12px; }
.adm-matrix td.adm-cell { text-align: center; }
.adm-matrix tbody tr:hover td { background: #f0f6fc; }
.adm-perm-key { font-size: 11px; color: var(--muted); background: none; }
.adm-tag { display: inline-block; padding: 0 6px; border-radius: 99px; font-size: 11px; background: var(--brand); color: #fff; font-weight: 600; }
.adm-tag-grey { background: #8c8f94; }
.adm-actions form { display: inline; }
.adm-inline-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 16px; }
.adm-inline-form label { display: inline-flex; gap: 6px; align-items: center; }
.adm-nowrap { white-space: nowrap; }
.adm-audit .adm-detail { font-family: Consolas, Monaco, monospace; font-size: 12px; color: var(--muted); max-width: 520px; }
.adm-pager a, .adm-pager strong { display: inline-block; padding: 2px 6px; }

/* -------------------------------------------------------------- sign-in */

.adm-bare-main { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.adm-login {
  width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 28px 28px 20px; box-shadow: 0 2px 12px rgba(0, 0, 0, .06); text-align: center;
}
.adm-login h1 { font-size: 22px; font-weight: 600; margin: 0 0 8px; }
.adm-login h1 span { color: var(--brand); font-weight: 400; }
.adm-gbtn { display: flex; justify-content: center; min-height: 44px; margin: 18px 0 8px; }
.adm-login-msg { color: #b32d2e; }
.adm-bare .wrap { max-width: 520px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 24px 16px; }