/* ===================================================================
   GNA Groupware — app.css
   =================================================================== */
:root {
    --accent:      #4f46e5;
    --accent-600:  #4338ca;
    --accent-700:  #3730a3;
    --accent-50:   #eef2ff;
    --accent-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 60%, #8b5cf6 100%);

    --ink:    #0f172a;
    --ink-2:  #334155;
    --muted:  #64748b;
    --line:   #e2e8f0;
    --line-2: #cbd5e1;
    --bg:     #f1f5f9;
    --card:   #ffffff;

    --ok:   #16a34a;  --ok-bg:#dcfce7;
    --warn: #d97706;  --warn-bg:#fef3c7;
    --bad:  #dc2626;  --bad-bg:#fee2e2;
    --info: #2563eb;  --info-bg:#dbeafe;

    --radius: 12px;
    --shadow: 0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.05);
    --shadow-sm: 0 1px 2px rgba(15,23,42,.08);
    --sidebar-w: 232px;
    --topbar-h: 60px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo",
            "Malgun Gothic", "맑은 고딕", sans-serif;
}
.is-admin {
    --accent:      #0d9488;
    --accent-600:  #0f766e;
    --accent-700:  #115e59;
    --accent-50:   #f0fdfa;
    --accent-grad: linear-gradient(135deg, #134e4a 0%, #0f766e 55%, #14b8a6 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { margin: 0; }
small { font-size: 12px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 16px; border-radius: 9px; border: 1px solid transparent;
    font-size: 14px; font-weight: 600; cursor: pointer; line-height: 1;
    transition: background .15s, box-shadow .15s, border-color .15s; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-600); color: #fff; }
.btn-ghost { background: #fff; color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover { background: #f8fafc; }
.btn-danger { background: var(--bad); color: #fff; }
.btn-danger:hover { background: #b91c1c; color: #fff; }
.btn-soft { background: var(--accent-50); color: var(--accent-700); }
.btn-soft:hover { background: #e0e7ff; }
.btn-sm { padding: 6px 11px; font-size: 13px; }
.btn-block { width: 100%; padding: 12px; font-size: 15px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field label small { color: var(--muted); font-weight: 400; }
input, select, textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 9px;
    font-size: 14px; font-family: inherit; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-50);
}
textarea { resize: vertical; min-height: 90px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-actions { display: flex; gap: 10px; margin-top: 8px; }

/* ---------- Alerts ---------- */
.alert { padding: 12px 15px; border-radius: 10px; font-size: 14px; margin-bottom: 16px; border: 1px solid transparent; }
.alert-error   { background: var(--bad-bg);  color: #991b1b; border-color: #fecaca; }
.alert-success { background: var(--ok-bg);   color: #166534; border-color: #bbf7d0; }
.alert-info    { background: var(--info-bg); color: #1e40af; border-color: #bfdbfe; }

/* =================================================================
   AUTH (2-column brand + form)
   ================================================================= */
.auth-body { min-height: 100vh; }
.auth-wrap { display: grid; grid-template-columns: 45% 55%; min-height: 100vh; }
.auth-brand {
    background: var(--accent-grad); color: #fff; padding: 56px 60px;
    display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.auth-brand::after {
    content: ""; position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px;
    background: rgba(255,255,255,.08); border-radius: 50%;
}
.auth-brand-inner { position: relative; z-index: 1; margin-top: auto; margin-bottom: auto; }
.brand-logo {
    display: inline-block; font-weight: 800; font-size: 22px; letter-spacing: 1px;
    background: rgba(255,255,255,.15); padding: 10px 16px; border-radius: 12px; margin-bottom: 28px;
}
.brand-title { font-size: 34px; font-weight: 800; letter-spacing: -.5px; }
.brand-sub { font-size: 15px; opacity: .8; margin: 4px 0 0; letter-spacing: 2px; text-transform: uppercase; }
.brand-tag { font-size: 16px; opacity: .92; margin: 22px 0 28px; line-height: 1.5; }
.brand-points { list-style: none; padding: 0; margin: 0; }
.brand-points li { position: relative; padding-left: 26px; margin-bottom: 12px; font-size: 15px; opacity: .95; }
.brand-points li::before {
    content: "✓"; position: absolute; left: 0; top: -1px; width: 18px; height: 18px; line-height: 18px;
    text-align: center; background: rgba(255,255,255,.2); border-radius: 50%; font-size: 11px;
}
.brand-badge {
    display: inline-block; margin-top: 28px; padding: 7px 14px; border: 1px solid rgba(255,255,255,.5);
    border-radius: 30px; font-size: 12px; font-weight: 700; letter-spacing: 2px;
}
.auth-brand-foot { position: relative; z-index: 1; font-size: 13px; opacity: .7; }

.auth-col { display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--card); }
.auth-box { width: 100%; max-width: 380px; }
.auth-head { margin-bottom: 28px; }
.auth-head h2 { font-size: 26px; font-weight: 700; }
.auth-head p { color: var(--muted); margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.auth-form { margin-bottom: 18px; }
.auth-alt { text-align: center; font-size: 14px; }
.auth-alt a { color: var(--muted); font-weight: 600; }

/* =================================================================
   APP SHELL (header + sidebar + content)
   ================================================================= */
.topbar {
    position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); z-index: 50;
    background: #fff; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 14px; padding: 0 20px;
}
.topbar-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }
.topbar-brand:hover { text-decoration: none; }
.logo-mini {
    background: var(--accent-grad); color: #fff; font-weight: 800; font-size: 13px;
    padding: 6px 9px; border-radius: 8px; letter-spacing: .5px;
}
.admin-tag { font-style: normal; font-size: 12px; color: var(--accent); background: var(--accent-50);
    padding: 2px 8px; border-radius: 6px; margin-left: 4px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.topbar-user { display: flex; align-items: center; gap: 9px; }
.topbar-avatar {
    width: 34px; height: 34px; border-radius: 50%; background: var(--accent-grad); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.topbar-username { display: flex; flex-direction: column; line-height: 1.25; font-size: 14px; font-weight: 600; }
.topbar-username small { color: var(--muted); font-weight: 400; }
.logout-form { margin: 0; }

.app-shell { display: flex; padding-top: var(--topbar-h); min-height: 100vh; }
.sidebar {
    position: fixed; top: var(--topbar-h); bottom: 0; left: 0; width: var(--sidebar-w); z-index: 40;
    background: #fff; border-right: 1px solid var(--line);
    display: flex; flex-direction: column; padding: 18px 14px; transition: transform .22s ease;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-link {
    display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 10px;
    color: var(--ink-2); font-weight: 600; font-size: 14.5px;
}
.nav-link:hover { background: #f1f5f9; text-decoration: none; }
.nav-link.active { background: var(--accent-50); color: var(--accent-700); }
.nav-ico { width: 19px; height: 19px; flex: none; }
.sidebar-foot { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 10px; }
.sidebar-team { font-weight: 700; font-size: 13px; color: var(--ink); }
.sidebar-email { font-size: 12px; color: var(--muted); margin-top: 3px; word-break: break-all; }
.sidebar-backdrop { display: none; }

.content {
    flex: 1; width: 100%; min-width: 0; margin-left: var(--sidebar-w);
    padding: 26px 30px 60px;
}

/* ---------- Page header ---------- */
.page-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.page-head h1 { font-size: 23px; font-weight: 800; letter-spacing: -.3px; }
.page-head .sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.page-head .spacer { margin-left: auto; }
.page-head-actions { margin-left: auto; display: flex; gap: 10px; }

/* ---------- Cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-pad { padding: 20px; }
.card-head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.card-head h3 { font-size: 15px; font-weight: 700; }
.card-head .spacer { margin-left: auto; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-main { grid-template-columns: 2fr 1fr; align-items: start; }

/* ---------- Stat cards ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.stat {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px 20px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.stat .stat-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.stat .stat-value { font-size: 30px; font-weight: 800; margin-top: 6px; letter-spacing: -1px; }
.stat .stat-ico {
    position: absolute; right: 16px; top: 16px; width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center; font-size: 18px;
}
.stat.s-todo  .stat-ico { background: var(--info-bg); color: var(--info); }
.stat.s-prog  .stat-ico { background: var(--warn-bg); color: var(--warn); }
.stat.s-hold  .stat-ico { background: #ede9fe; color: #7c3aed; }
.stat.s-done  .stat-ico { background: var(--ok-bg); color: var(--ok); }
.stat.s-accent .stat-ico { background: var(--accent-50); color: var(--accent); }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-todo        { background: var(--info-bg); color: #1d4ed8; }
.st-in_progress { background: var(--warn-bg); color: #b45309; }
.st-hold        { background: #ede9fe; color: #6d28d9; }
.st-done        { background: var(--ok-bg); color: #15803d; }
.pr-low    { background: #f1f5f9; color: #475569; }
.pr-normal { background: var(--info-bg); color: #1d4ed8; }
.pr-high   { background: #ffedd5; color: #c2410c; }
.pr-urgent { background: var(--bad-bg); color: #b91c1c; }
.badge-plain { background: #f1f5f9; color: var(--ink-2); }
.badge-plain::before { display: none; }
.chip { display:inline-block; padding: 2px 8px; border-radius: 6px; background:#f1f5f9; color:var(--ink-2); font-size:12px; font-weight:600; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th, table.tbl td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
table.tbl th { font-size: 12.5px; color: var(--muted); font-weight: 700; text-transform: none; background: #f8fafc; }
table.tbl tbody tr:hover { background: #f8fafc; }
table.tbl td .t-title { font-weight: 600; color: var(--ink); }
table.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.row-link { cursor: pointer; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* ---------- Person mini ---------- */
.person { display: inline-flex; align-items: center; gap: 8px; }
.person .ava {
    width: 26px; height: 26px; border-radius: 50%; background: #e0e7ff; color: var(--accent-700);
    display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none;
}
.is-admin .person .ava { background: #ccfbf1; color: var(--accent-700); }

/* ---------- Filter bar ---------- */
.filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.filterbar select, .filterbar input[type=text] { width: auto; min-width: 130px; padding: 8px 11px; font-size: 13.5px; }
.filterbar .grow { flex: 1; min-width: 160px; }
.seg { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg a { padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.seg a:hover { background: #f8fafc; text-decoration: none; }
.seg a.active { background: var(--accent); color: #fff; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty .big { font-size: 40px; margin-bottom: 10px; }

/* =================================================================
   KANBAN BOARD
   ================================================================= */
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.board-col { background: #eef1f6; border-radius: var(--radius); display: flex; flex-direction: column; min-height: 200px; }
.board-col-head {
    display: flex; align-items: center; gap: 8px; padding: 13px 14px; font-weight: 700; font-size: 14px;
    border-bottom: 2px solid transparent; position: sticky; top: var(--topbar-h);
}
.board-col-head .count { margin-left: auto; background: #fff; color: var(--ink-2); font-size: 12px;
    padding: 2px 9px; border-radius: 20px; font-weight: 700; }
.board-col[data-status=todo]        .board-col-head { border-color: #60a5fa; }
.board-col[data-status=in_progress] .board-col-head { border-color: #fbbf24; }
.board-col[data-status=hold]        .board-col-head { border-color: #a78bfa; }
.board-col[data-status=done]        .board-col-head { border-color: #4ade80; }
.board-list { padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 60px; flex: 1; }
.board-list.drag-over { background: rgba(79,70,229,.07); border-radius: 10px; box-shadow: inset 0 0 0 2px var(--accent); }
.kard {
    background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; cursor: grab;
    box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .05s;
}
.kard:hover { box-shadow: var(--shadow); }
.kard.dragging { opacity: .5; }
.kard-top { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.kard-id { font-size: 12px; color: var(--muted); font-weight: 700; }
.kard-title { font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--ink); display: block; margin-bottom: 10px; }
.kard-title:hover { color: var(--accent); text-decoration: none; }
.kard-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kard-due { font-size: 12px; color: var(--muted); }
.kard-due.over { color: var(--bad); font-weight: 700; }

/* =================================================================
   ISSUE DETAIL
   ================================================================= */
.issue-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.issue-desc { white-space: pre-wrap; line-height: 1.7; color: var(--ink-2); font-size: 14.5px; }
.meta-list { list-style: none; padding: 0; margin: 0; }
.meta-list li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.meta-list li:last-child { border-bottom: none; }
.meta-list .k { color: var(--muted); font-weight: 600; }
.meta-list .v { font-weight: 600; text-align: right; }
.comment { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.comment:last-child { border-bottom: none; }
.comment .ava { width: 34px; height: 34px; border-radius: 50%; background: #e0e7ff; color: var(--accent-700);
    display: grid; place-items: center; font-weight: 700; flex: none; }
.comment-body { flex: 1; }
.comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.comment-author { font-weight: 700; font-size: 14px; }
.comment-time { font-size: 12px; color: var(--muted); }
.comment-text { font-size: 14px; line-height: 1.6; white-space: pre-wrap; color: var(--ink-2); }
.attach-item { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.attach-item:last-child { border-bottom: none; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 16px 20px; border-left: 2px solid var(--line); font-size: 13px; }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 2px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--accent); }
.timeline .tl-actor { font-weight: 700; color: var(--ink); }
.timeline .tl-time { color: var(--muted); margin-left: 6px; }
.timeline .tl-detail { color: var(--ink-2); margin-top: 2px; }

/* ---------- Profile ---------- */
.profile-head { display: flex; align-items: center; gap: 18px; }
.profile-ava { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-grad); color: #fff;
    display: grid; place-items: center; font-size: 28px; font-weight: 800; flex: none; }
.profile-head h2 { font-size: 21px; }
.profile-head .role { color: var(--muted); margin-top: 4px; font-size: 14px; }
.divider { height: 1px; background: var(--line); margin: 20px 0; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 1024px) {
    .grid-4, .stats { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-main { grid-template-columns: 1fr; }
    .issue-grid { grid-template-columns: 1fr; }
    .board { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-brand { padding: 40px 32px; min-height: 220px; }
    .auth-brand-inner { margin: 0; }
    .brand-points, .auth-brand-foot { display: none; }
    .brand-title { font-size: 26px; }
}
@media (max-width: 720px) {
    .sidebar { transform: translateX(-100%); box-shadow: var(--shadow); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-backdrop.show { display: block; position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(15,23,42,.4); z-index: 35; }
    .content { margin-left: 0; padding: 18px 16px 50px; }
    .sidebar-toggle { display: flex; }
    .stats, .grid-4, .grid-3, .grid-2, .board { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .topbar-username small { display: none; }
    .topbar-brand-text { display: none; }
}
@media (min-width: 721px) { .sidebar-toggle { display: none; } }

/* Sidebar hamburger */
.sidebar-toggle { background: none; border: none; cursor: pointer; flex-direction: column; gap: 4px; padding: 6px; }
.sidebar-toggle span { display: block; width: 20px; height: 2px; background: var(--ink-2); border-radius: 2px; }