/* DoubleTree Signature Panel - admin UI styles. Brand: navy #002F61, green #8BC53F */
:root{ --navy:#002F61; --green:#8BC53F; --ink:#1f2733; --muted:#6b7686;
       --line:#e3e8ef; --bg:#f5f7fa; --card:#fff; --danger:#c0392b; }
*{box-sizing:border-box} body{margin:0;font-family:'Segoe UI',Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px}
a{color:#0B5FB0;text-decoration:none} a:hover{text-decoration:underline}
small{color:var(--muted)} .muted{color:var(--muted)}
code{background:#eef2f7;padding:1px 5px;border-radius:4px;font-size:12px}

header.top{display:flex;align-items:center;gap:24px;background:var(--navy);
  color:#fff;padding:0 20px;height:56px;position:sticky;top:0;z-index:10}
header .brand{font-weight:700;font-size:16px}
header nav{display:flex;gap:4px;margin-left:auto;align-items:center}
header nav a{color:#cdd8ea;padding:8px 12px;border-radius:6px}
header nav a:hover{background:rgba(255,255,255,.1);text-decoration:none}
header nav a.on{background:#fff;color:var(--navy);font-weight:600}
header nav a.out{color:#fff;border:1px solid rgba(255,255,255,.3);margin-left:10px}

main{max-width:1100px;margin:24px auto;padding:0 20px}
main.wide{max-width:1560px}
footer{max-width:1100px;margin:30px auto;padding:20px;color:var(--muted);text-align:center}
h1{font-size:22px;margin:0 0 16px} h2{font-size:17px;margin:24px 0 10px} h3{margin:0 0 8px}

.flash{padding:10px 14px;border-radius:8px;margin-bottom:16px;font-size:13px;
  word-break:break-word}
.flash.ok{background:#e7f6ec;color:#1e7a3c;border:1px solid #bfe6cb}
.flash.err{background:#fdecea;color:#a3271b;border:1px solid #f5c6c0}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:16px;margin-bottom:16px}
.cards .card{text-align:center} .cards .card b{display:block;font-size:24px;color:var(--navy)}
.cards .card span{color:var(--muted);font-size:12px}

table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:10px;overflow:hidden}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#eef2f7;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:#56627a}
tr:last-child td{border-bottom:0}

td.nw,th.nw{white-space:nowrap}
/* Users table: keep the design name and the Disable/Edit pair on one line each,
   and let Name / Dept-Title take the slack instead. */
.userlist td:nth-child(2) small{display:block;line-height:16px}
.userlist td:nth-child(3){word-break:break-all}

.b{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600}
.b.ok{background:#e7f6ec;color:#1e7a3c} .b.off{background:#eceff3;color:#6b7686}
.b.err{background:#fdecea;color:#a3271b}
.tag{display:inline-block;background:#eef2f7;border:1px solid var(--line);
  border-radius:20px;padding:2px 4px 2px 10px;font-size:12px;margin:2px}
.tag .x{border:0;background:none;color:#a3271b;cursor:pointer;font-size:14px}

.form label{display:block;margin:10px 0;font-size:13px;color:#43506a;font-weight:600}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:4px;
  padding:8px 10px;border:1px solid #ccd4e0;border-radius:7px;font:inherit;font-weight:400}
.form .chk{font-weight:400;display:flex;align-items:center;gap:8px}
.form .chk input{width:auto;margin:0}
.form.inline{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.form.inline label{margin:0}
.form .row{display:flex;gap:12px} .form .row label{flex:1}

button{background:var(--navy);color:#fff;border:0;border-radius:7px;padding:9px 16px;
  font:inherit;font-weight:600;cursor:pointer} button:hover{background:#013d80}
button.mini{padding:5px 10px;font-size:12px} button.danger{background:var(--danger)}
.mini{display:inline-block;padding:5px 10px;font-size:12px;border-radius:6px;
  background:#eef2f7;color:#2b3a55;border:1px solid var(--line)}

.search{display:flex;gap:8px;margin-bottom:14px} .search input{flex:1;padding:9px 12px;
  border:1px solid #ccd4e0;border-radius:7px}

.cols{display:grid;grid-template-columns:minmax(340px,400px) 1fr;gap:18px;align-items:start}
.preview iframe{width:100%;min-width:620px;height:680px;border:1px solid var(--line);border-radius:8px;background:#fff}

/* align-items:flex-start matters: the default `stretch` made the preview image
   grow to the height of the open Edit form (that is why editing blew the picture
   up). min-width:0 lets the text column shrink instead of pushing the image. */
.banner .bhead{display:flex;gap:16px;align-items:flex-start}
.banner .bhead>img{flex:0 0 auto;max-width:300px;height:auto;align-self:flex-start}
.banner .bhead>div{flex:1;min-width:0}
.assignments{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.assignform{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.assignform select{padding:6px 8px;border:1px solid #ccd4e0;border-radius:6px}
.assignform select[name=department],.assignform select[name=user_id]{display:none}
.assignform.department select[name=department]{display:inline-block}
.assignform.user select[name=user_id]{display:inline-block}

details summary{cursor:pointer;padding:4px 0}

.loginpage{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--navy)}
.login{background:#fff;padding:34px;border-radius:14px;width:340px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.login h1{font-size:20px;text-align:center;color:var(--navy)}
.login label{display:block;margin:14px 0;font-size:13px;font-weight:600;color:#43506a}
.login input{width:100%;margin-top:5px;padding:10px;border:1px solid #ccd4e0;border-radius:7px;font:inherit}
.login button{width:100%;margin-top:10px;padding:11px}

@media(max-width:760px){.cards{grid-template-columns:repeat(2,1fr)}.cols{grid-template-columns:1fr}}