/* ════════════ GitHub Dark Theme Variables ════════════ */
:root {
    --gh-canvas-default: #0d1117;
    --gh-canvas-overlay: #161b22;
    --gh-canvas-subtle: #010409;
    --gh-border-default: #30363d;
    --gh-border-muted: #21262d;
    --gh-fg-default: #f0f6fc;
    --gh-fg-muted: #8b949e;
    --gh-fg-subtle: #6e7681;
    --gh-accent-fg: #2f81f7;
    --gh-accent-emphasis: #1f6feb;
    --gh-success-fg: #3fb950;
    --gh-success-emphasis: #238636;
    --gh-success-subtle: rgba(46,160,67,0.15);
    --gh-danger-fg: #f85149;
    --gh-danger-emphasis: #da3633;
    --gh-danger-subtle: rgba(248,81,73,0.15);
    --gh-attention-fg: #d29922;
    --gh-attention-subtle: rgba(187,128,9,0.15);
    --gh-purple-fg: #a371f7;
    --gh-purple-subtle: rgba(188,140,255,0.15);
    --gh-orange-fg: #e3b341;

    --shadow-sm: 0 1px 0 rgba(1,4,9,0.6);
    --shadow-md: 0 3px 6px rgba(1,4,9,0.5);
    --radius: 6px;
    --radius-lg: 8px;
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, monospace;

    /* calendar event type colors */
    --cal-note: #2f81f7;
    --cal-meeting: #a371f7;
    --cal-reminder: #f85149;
    --cal-personal: #3fb950;
    --cal-work: #e3b341;
}

/* ════════════ Reset ════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:14px}
body{font-family:var(--font);background:var(--gh-canvas-default);color:var(--gh-fg-default);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--gh-accent-fg);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{display:inline-block;vertical-align:middle}
input,select,textarea,button{font-family:inherit;font-size:inherit}

/* ════════════ Topbar ════════════ */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;height:48px;background:var(--gh-canvas-overlay);border-bottom:1px solid var(--gh-border-default)}
.topbar-left{display:flex;align-items:center}
.topbar-logo{display:flex;align-items:center;gap:0.5rem;color:var(--gh-fg-default);font-weight:600;font-size:0.95rem;text-decoration:none}
.topbar-logo:hover{text-decoration:none;color:var(--gh-fg-default)}
.topbar-right{display:flex;align-items:center;gap:0.6rem;font-size:0.85rem;color:var(--gh-fg-muted)}
.topbar-link{color:var(--gh-fg-muted)}
.topbar-link:hover{color:var(--gh-accent-fg);text-decoration:none}
.topbar-label{color:var(--gh-fg-subtle)}
.topbar-hint{display:flex;align-items:center;gap:0.3rem}
.topbar-sep{color:var(--gh-border-default)}

/* ════════════ App Body ════════════ */
.app-body{padding:1.5rem;max-width:100%}

/* ════════════ Flash ════════════ */
.flash{padding:0.6rem 1rem;border-radius:var(--radius);margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between;font-size:0.85rem;border:1px solid}
.flash-success{background:var(--gh-success-subtle);color:var(--gh-success-fg);border-color:rgba(46,160,67,0.4)}
.flash-error{background:var(--gh-danger-subtle);color:var(--gh-danger-fg);border-color:rgba(248,81,73,0.4)}
.flash-close{background:none;border:none;cursor:pointer;font-size:1.2rem;opacity:0.7;padding:0 0.25rem;color:inherit}
.flash-close:hover{opacity:1}

/* ════════════ Sections ════════════ */
.section-title{font-size:1.25rem;font-weight:600;margin-bottom:0.75rem}
.public-section{margin-bottom:2rem}

/* ════════════ Buttons ════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.4rem 0.9rem;border-radius:var(--radius);border:1px solid;font-size:0.85rem;font-weight:500;cursor:pointer;transition:all 0.15s;text-decoration:none;line-height:1.4;background:var(--gh-canvas-overlay);color:var(--gh-fg-default);border-color:var(--gh-border-default)}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--gh-success-emphasis);color:#fff;border-color:var(--gh-success-emphasis)}
.btn-primary:hover{background:#2ea043}
.btn-secondary{background:var(--gh-canvas-overlay);color:var(--gh-fg-default);border-color:var(--gh-border-default)}
.btn-secondary:hover{background:var(--gh-border-muted)}
.btn-ghost{background:transparent;color:var(--gh-fg-muted);border-color:transparent}
.btn-ghost:hover{background:var(--gh-canvas-overlay);color:var(--gh-fg-default)}
.btn-danger-outline{background:transparent;color:var(--gh-danger-fg);border-color:var(--gh-danger-emphasis)}
.btn-danger-outline:hover{background:var(--gh-danger-subtle)}
.btn-sm{padding:0.25rem 0.6rem;font-size:0.78rem}
.btn-block{width:100%}
.btn-icon{background:none;border:none;cursor:pointer;padding:0.2rem;border-radius:4px;display:inline-flex;align-items:center;color:var(--gh-fg-muted)}
.btn-icon:hover{background:var(--gh-canvas-overlay);color:var(--gh-danger-fg)}
.btn-danger-icon{color:var(--gh-fg-muted)}
.btn-danger-icon:hover{color:var(--gh-danger-fg)}

/* ════════════ Form ════════════ */
.form-group{margin-bottom:0.85rem}
.form-label{display:block;font-weight:500;margin-bottom:0.3rem;font-size:0.82rem;color:var(--gh-fg-default)}
.required{color:var(--gh-danger-fg)}
.form-input,.form-textarea,.form-select{width:100%;padding:0.4rem 0.65rem;border:1px solid var(--gh-border-default);border-radius:var(--radius);font-size:0.85rem;outline:none;background:var(--gh-canvas-subtle);color:var(--gh-fg-default);transition:border-color 0.15s}
.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--gh-accent-fg);box-shadow:0 0 0 2px rgba(47,129,247,0.2)}
.form-textarea{resize:vertical;min-height:70px}
.form-row{display:flex;gap:0.75rem}
.form-group-half{flex:1}
.form-actions{display:flex;gap:0.5rem;margin-top:1rem}
.form-select{appearance:auto;cursor:pointer}
.form-color-picker{width:36px;height:32px;border:1px solid var(--gh-border-default);border-radius:4px;cursor:pointer;padding:2px;background:var(--gh-canvas-subtle)}
.color-input-row{display:flex;gap:0.4rem;align-items:center;flex:1}
.form-range{width:100%;accent-color:var(--gh-accent-fg);margin-top:0.25rem}
.form-color-text{flex:1}
.label-preview{display:inline-block;padding:0.3rem 0.8rem;border-radius:12px;font-size:0.8rem;font-weight:600;margin-top:0.25rem}
.label-checkboxes{display:flex;flex-wrap:wrap;gap:0.4rem}
.label-checkbox-item{display:inline-flex;align-items:center;gap:0.2rem;cursor:pointer;font-size:0.82rem}
.form-errors{margin-bottom:0.75rem;padding:0.6rem 0.85rem;background:var(--gh-danger-subtle);border:1px solid rgba(248,81,73,0.4);border-radius:var(--radius)}
.form-error{color:var(--gh-danger-fg);font-size:0.82rem}

/* ════════════ Badges ════════════ */
.label-badge{display:inline-flex;align-items:center;padding:0.08rem 0.45rem;border-radius:10px;font-size:0.68rem;font-weight:600;white-space:nowrap}
.label-badge-lg{padding:0.15rem 0.65rem;font-size:0.78rem}

.state-badge{font-size:0.65rem;padding:0.08rem 0.4rem;border-radius:10px;font-weight:600}
.state-open{background:var(--gh-success-subtle);color:var(--gh-success-fg)}
.state-closed{background:var(--gh-purple-subtle);color:var(--gh-purple-fg)}

.status-badge{font-size:0.7rem;padding:0.06rem 0.4rem;border-radius:10px;font-weight:500}
.status-no_status{background:rgba(110,118,129,0.15);color:var(--gh-fg-muted)}
.status-triage{background:var(--gh-attention-subtle);color:var(--gh-attention-fg)}
.status-planning{background:rgba(47,129,247,0.15);color:var(--gh-accent-fg)}
.status-todo{background:rgba(110,118,129,0.15);color:var(--gh-fg-muted)}
.status-in_progress{background:rgba(47,129,247,0.15);color:var(--gh-accent-fg)}
.status-test{background:var(--gh-purple-subtle);color:var(--gh-purple-fg)}
.status-done{background:var(--gh-success-subtle);color:var(--gh-success-fg)}

.priority-badge{font-size:0.68rem;padding:0.06rem 0.35rem;border-radius:10px;font-weight:600}
.badge-critical{background:var(--gh-danger-subtle);color:var(--gh-danger-fg)}
.badge-high{background:var(--gh-attention-subtle);color:var(--gh-attention-fg)}
.badge-medium{background:rgba(47,129,247,0.15);color:var(--gh-accent-fg)}
.badge-low{background:rgba(110,118,129,0.15);color:var(--gh-fg-muted)}
.badge-default{background:rgba(110,118,129,0.15);color:var(--gh-fg-muted)}

.due-badge,.due-date-badge{display:inline-flex;align-items:center;gap:0.2rem;font-size:0.7rem;padding:0.06rem 0.35rem;border-radius:10px;background:rgba(110,118,129,0.1);color:var(--gh-fg-muted)}
.due-overdue{background:var(--gh-danger-subtle);color:var(--gh-danger-fg)}

.event-type-badge{font-size:0.62rem;padding:0.06rem 0.3rem;border-radius:10px;font-weight:600}
.event-note{background:rgba(47,129,247,0.15);color:var(--gh-accent-fg)}
.event-meeting{background:var(--gh-purple-subtle);color:var(--gh-purple-fg)}
.event-reminder{background:var(--gh-danger-subtle);color:var(--gh-danger-fg)}
.event-personal{background:var(--gh-success-subtle);color:var(--gh-success-fg)}
.event-work{background:rgba(227,179,65,0.15);color:var(--gh-orange-fg)}

/* ════════════ Empty ════════════ */
.empty-state{color:var(--gh-fg-subtle);font-style:italic;padding:0.5rem 0;font-size:0.85rem}

/* ════════════ Kanban Board ════════════ */
.kanban-board{display:flex;gap:0.6rem;overflow-x:auto;padding-bottom:1rem;min-height:300px}
.kanban-column{background:var(--gh-canvas-overlay);border:1px solid var(--gh-border-default);border-radius:var(--radius-lg);flex:0 0 230px;display:flex;flex-direction:column;max-height:calc(100vh - 250px)}
.kanban-column-header{padding:0.6rem 0.75rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--gh-border-default);font-weight:600;font-size:0.78rem;position:sticky;top:0;background:inherit;border-radius:var(--radius-lg) var(--radius-lg) 0 0;z-index:1}
.kanban-column-title{text-transform:uppercase;letter-spacing:0.3px;font-size:0.7rem;color:var(--gh-fg-muted)}
.kanban-column-count{background:var(--gh-border-muted);border-radius:12px;padding:0.05rem 0.4rem;font-size:0.68rem;color:var(--gh-fg-muted)}
.kanban-column-body{flex:1;overflow-y:auto;padding:0.4rem;display:flex;flex-direction:column;gap:0.3rem}
.kanban-empty{text-align:center;padding:1rem 0.25rem;color:var(--gh-fg-subtle);font-size:0.78rem}

.kanban-card{background:var(--gh-canvas-default);border:1px solid var(--gh-border-default);border-radius:var(--radius);padding:0.5rem 0.6rem;transition:box-shadow 0.1s}
.kanban-card:hover{border-color:var(--gh-border-default);box-shadow:var(--shadow-sm)}
.kanban-card-closed{opacity:0.5}
.kanban-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.15rem}
.kanban-card-number{font-family:var(--font-mono);font-size:0.68rem;color:var(--gh-fg-muted)}
.kanban-card-state{font-size:0.62rem;padding:0.04rem 0.28rem;border-radius:10px;font-weight:500}
.kanban-card-title{display:block;font-weight:500;font-size:0.82rem;color:var(--gh-fg-default);margin-bottom:0.25rem;line-height:1.3}
.kanban-card-labels{display:flex;flex-wrap:wrap;gap:0.15rem;margin-bottom:0.25rem}
.kanban-card-meta{display:flex;align-items:center;gap:0.35rem;font-size:0.68rem;color:var(--gh-fg-muted);flex-wrap:wrap}
.kanban-card-date{color:var(--gh-fg-muted)}
.kanban-card-comments{color:var(--gh-fg-subtle)}

/* ════════════ Calendar ════════════ */
.calendar-header-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.75rem}
.calendar-nav{display:flex;align-items:center;gap:0.5rem}
.calendar-month-title{font-weight:600;font-size:0.95rem;color:var(--gh-fg-default);min-width:120px;text-align:center}
.calendar-grid-container{background:var(--gh-canvas-overlay);border:1px solid var(--gh-border-default);border-radius:var(--radius-lg);overflow:hidden}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.calendar-day-header{padding:0.4rem;text-align:center;font-weight:600;font-size:0.72rem;color:var(--gh-fg-muted);background:var(--gh-canvas-subtle);border-bottom:1px solid var(--gh-border-default)}
.calendar-day{min-height:80px;border-bottom:1px solid var(--gh-border-default);border-right:1px solid var(--gh-border-default);padding:0.25rem;overflow-y:auto}
.calendar-day:nth-child(7n){border-right:none}
.calendar-day-empty{background:var(--gh-canvas-subtle);border-bottom:1px solid var(--gh-border-default);border-right:1px solid var(--gh-border-default)}
.calendar-day-empty:nth-child(7n){border-right:none}
.calendar-day-today{background:rgba(47,129,247,0.06);border:1px solid rgba(47,129,247,0.3)}
.calendar-day-number{font-size:0.7rem;font-weight:500;margin-bottom:0.15rem;color:var(--gh-fg-muted)}
.today-circle{background:var(--gh-accent-emphasis);color:#fff;border-radius:50%;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:0.62rem}
.calendar-day-items{display:flex;flex-direction:column;gap:0.1rem}
.calendar-item{display:flex;align-items:center;gap:0.2rem;padding:0.05rem 0.15rem;border-radius:3px;font-size:0.63rem;text-decoration:none;color:var(--gh-fg-muted)}
.calendar-item:hover{background:var(--gh-canvas-overlay);text-decoration:none}
.cal-item-closed{opacity:0.5;text-decoration:line-through}
.cal-item-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.cal-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.cal-item-time{color:var(--gh-fg-subtle);font-size:0.6rem;flex-shrink:0;font-family:var(--font-mono)}
.calendar-item-issue{color:var(--gh-accent-fg)}
.calendar-item-event{color:var(--gh-fg-muted)}

/* calendar event type dot colors */
.cal-item-note .cal-item-dot{background:var(--cal-note)}
.cal-item-meeting .cal-item-dot{background:var(--cal-meeting)}
.cal-item-reminder .cal-item-dot{background:var(--cal-reminder)}
.cal-item-personal .cal-item-dot{background:var(--cal-personal)}
.cal-item-work .cal-item-dot{background:var(--cal-work)}

/* ════════════ Admin ════════════ */
.admin-page{max-width:1200px}
.admin-tabs{display:flex;gap:0;border-bottom:1px solid var(--gh-border-default);margin-bottom:1.25rem}
.admin-tab{padding:0.5rem 1rem;font-size:0.85rem;color:var(--gh-fg-muted);text-decoration:none;border-bottom:2px solid transparent;transition:all 0.15s}
.admin-tab:hover{color:var(--gh-fg-default);text-decoration:none;border-bottom-color:var(--gh-border-default)}
.admin-tab.active{color:var(--gh-fg-default);border-bottom-color:var(--gh-accent-fg);font-weight:500}
.admin-tab-content{padding-top:0.25rem}
.admin-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}
.admin-count{font-size:0.82rem;color:var(--gh-fg-muted)}

.admin-issue-list{display:flex;flex-direction:column;gap:0.35rem}
.admin-issue-item{background:var(--gh-canvas-overlay);border:1px solid var(--gh-border-default);border-radius:var(--radius);padding:0.6rem 0.75rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.5rem}
.admin-issue-closed{opacity:0.55}
.admin-issue-main{min-width:0;flex:1}
.admin-issue-top{display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap}
.admin-issue-num{font-family:var(--font-mono);font-size:0.72rem;color:var(--gh-fg-muted)}
.admin-issue-title{font-size:0.85rem;font-weight:600}
.admin-issue-badges{display:flex;align-items:center;gap:0.3rem;flex-wrap:wrap;margin-top:0.25rem}
.admin-issue-actions{display:flex;align-items:center;gap:0.3rem;flex-shrink:0;flex-wrap:wrap}
.admin-inline-form{display:inline-flex;margin:0}
.admin-quick-select{padding:0.2rem 0.4rem;border:1px solid var(--gh-border-default);border-radius:var(--radius);font-size:0.75rem;background:var(--gh-canvas-subtle);color:var(--gh-fg-default);cursor:pointer}
.admin-quick-select:focus{border-color:var(--gh-accent-fg);outline:none}

.admin-split{display:grid;grid-template-columns:1fr 340px;gap:1.25rem}
.admin-split-left,.admin-split-right{background:var(--gh-canvas-overlay);border:1px solid var(--gh-border-default);border-radius:var(--radius);padding:1rem}
.admin-split-left h3,.admin-split-right h3{font-size:0.9rem;font-weight:600;margin-bottom:0.75rem}

.admin-label-list{display:flex;flex-direction:column;gap:0.15rem}
.admin-label-item{display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0;border-bottom:1px solid var(--gh-border-muted)}
.admin-label-item:last-child{border-bottom:none}
.admin-label-desc{color:var(--gh-fg-muted);font-size:0.78rem;flex:1}
.admin-label-count{color:var(--gh-fg-subtle);font-size:0.72rem;white-space:nowrap}

.admin-event-list{display:flex;flex-direction:column;gap:0.5rem}
.admin-event-item{padding:0.5rem;border-bottom:1px solid var(--gh-border-muted)}
.admin-event-item:last-child{border-bottom:none}
.admin-event-header{display:flex;align-items:center;gap:0.35rem;font-size:0.72rem;margin-bottom:0.15rem}
.admin-event-date{color:var(--gh-fg-muted);font-weight:500}
.admin-event-time{color:var(--gh-fg-subtle);font-family:var(--font-mono)}
.admin-event-desc{font-size:0.78rem;color:var(--gh-fg-muted);margin-top:0.15rem}

.admin-form{max-width:600px}

/* ════════════ Modal ════════════ */
.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(1,4,9,0.75);z-index:1000;align-items:center;justify-content:center}
.modal-overlay.active{display:flex}
.modal-container{background:var(--gh-canvas-overlay);border:1px solid var(--gh-border-default);border-radius:var(--radius-lg);width:90%;max-width:650px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(1,4,9,0.7)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--gh-border-default)}
.modal-header h2{font-size:1.1rem;font-weight:600;margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:0.5rem}
.modal-close{background:none;border:none;font-size:1.5rem;color:var(--gh-fg-muted);cursor:pointer;padding:0 0.25rem;line-height:1}
.modal-close:hover{color:var(--gh-fg-default)}
.modal-body{flex:1;overflow-y:auto;padding:1rem 1.25rem}
.modal-body .empty-state{padding:2rem 0;text-align:center}
.modal-footer{padding:0.75rem 1.25rem;border-top:1px solid var(--gh-border-default);display:flex;justify-content:flex-end;gap:0.5rem}
.modal-issue-meta{display:flex;flex-wrap:wrap;gap:0.35rem;align-items:center;margin-bottom:1rem}
.modal-issue-desc{font-size:0.9rem;line-height:1.6;color:var(--gh-fg-default);margin-bottom:1.25rem;padding:0.75rem;background:var(--gh-canvas-subtle);border:1px solid var(--gh-border-default);border-radius:var(--radius);white-space:pre-wrap}
.modal-issue-dates{display:flex;gap:0.75rem;flex-wrap:wrap;font-size:0.8rem;color:var(--gh-fg-muted);margin-bottom:1rem}
.modal-section-title{font-size:0.85rem;font-weight:600;margin-bottom:0.5rem;color:var(--gh-fg-default)}
.modal-comment{padding:0.5rem 0;border-bottom:1px solid var(--gh-border-muted)}
.modal-comment:last-child{border-bottom:none}
.modal-comment-time{font-size:0.72rem;color:var(--gh-fg-subtle);margin-bottom:0.2rem}
.modal-comment-body{font-size:0.85rem;line-height:1.5}
.modal-activity{font-size:0.8rem;margin-bottom:1rem}
.modal-activity-item{display:flex;gap:0.4rem;padding:0.2rem 0;color:var(--gh-fg-muted);font-size:0.78rem}
.modal-activity-dot{width:6px;height:6px;border-radius:50%;background:var(--gh-border-default);margin-top:0.35rem;flex-shrink:0}
.kanban-card{cursor:pointer}

/* ════════════ Responsive ════════════ */
@media(max-width:768px){
    .app-body{padding:0.75rem}
    .kanban-board{flex-direction:column;overflow-x:visible}
    .kanban-column{flex:0 0 auto;max-height:none}
    .kanban-column-body{max-height:300px}
    .admin-split{grid-template-columns:1fr}
    .form-row{flex-direction:column}
    .admin-issue-item{flex-direction:column;align-items:stretch}
    .calendar-day{min-height:55px}
}
@media(max-width:480px){
    .topbar{padding:0 0.75rem;font-size:0.8rem}
    .admin-tab{padding:0.35rem 0.6rem;font-size:0.75rem}
    .calendar-day-header{font-size:0.6rem}
    .calendar-grid{font-size:0.6rem}
}