/* Koch Gartenbau Ticket System – Style v2 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --bg:          #0a0f0a;
    --bg2:         #0f170f;
    --bg3:         #142014;
    --bg4:         #1a2a1a;
    --green:       #4ade80;
    --green2:      #22c55e;
    --green-dim:   rgba(74,222,128,0.12);
    --green-glow:  rgba(74,222,128,0.25);
    --orange:      #fb923c;
    --orange2:     #f97316;
    --orange-dim:  rgba(251,146,60,0.12);
    --orange-glow: rgba(251,146,60,0.25);
    --red:         #ef4444;
    --red-dim:     rgba(239,68,68,0.12);
    --text:        #e8f5e8;
    --text-muted:  #7fa87f;
    --text-dim:    #4a6b4a;
    --border:      rgba(74,222,128,0.1);
    --border2:     rgba(74,222,128,0.2);
    --radius:      10px;
    --radius-lg:   16px;
    --shadow:      0 4px 20px rgba(0,0,0,0.4);
    --shadow-lg:   0 8px 40px rgba(0,0,0,0.5);
    --trans:       0.18s cubic-bezier(0.4,0,0.2,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}

/* ===== BUTTONS ===== */
.btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:11px 22px;border-radius:var(--radius);
    font-size:0.9rem;font-weight:600;cursor:pointer;
    border:none;transition:var(--trans);text-decoration:none;
}
.btn-green{
    background:linear-gradient(135deg,var(--green2),var(--green));
    color:#0a0f0a;
    box-shadow:0 0 20px var(--green-glow);
}
.btn-green:hover{transform:translateY(-1px);box-shadow:0 0 30px var(--green-glow);}
.btn-orange{
    background:linear-gradient(135deg,var(--orange2),var(--orange));
    color:#0a0f0a;
    box-shadow:0 0 20px var(--orange-glow);
}
.btn-orange:hover{transform:translateY(-1px);box-shadow:0 0 30px var(--orange-glow);}
.btn-ghost{
    background:transparent;color:var(--text-muted);
    border:1px solid var(--border2);
}
.btn-ghost:hover{border-color:var(--green);color:var(--green);}
.btn-danger{background:var(--red-dim);color:var(--red);border:1px solid rgba(239,68,68,0.2);}
.btn-sm{padding:7px 14px;font-size:0.8rem;}

/* ===== NAVBAR ===== */
.navbar{
    position:sticky;top:0;z-index:100;
    display:flex;align-items:center;gap:16px;
    padding:0 24px;height:60px;
    background:rgba(10,15,10,0.92);
    border-bottom:1px solid var(--border);
    backdrop-filter:blur(12px);
}
.navbar-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;}
.brand-icon{
    width:34px;height:34px;border-radius:8px;
    background:linear-gradient(135deg,var(--green2),var(--orange));
    display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:0.9rem;color:#0a0f0a;
    box-shadow:0 0 12px var(--green-glow);
}
.navbar-links{display:flex;gap:4px;margin-left:auto;}
.navbar-links a{
    padding:6px 14px;border-radius:8px;font-size:0.85rem;
    color:var(--text-muted);transition:var(--trans);
}
.navbar-links a:hover,.navbar-links a.active{
    background:var(--green-dim);color:var(--green);
}
.nav-badge{
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--orange);color:#0a0f0a;
    font-size:0.7rem;font-weight:700;
    min-width:18px;height:18px;border-radius:9px;padding:0 4px;
    margin-left:4px;
}
.navbar-user{display:flex;align-items:center;gap:10px;margin-left:16px;}
.avatar{
    width:32px;height:32px;border-radius:50%;
    background:linear-gradient(135deg,var(--green2),var(--orange));
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:0.8rem;color:#0a0f0a;
    flex-shrink:0;
}

/* ===== CONTAINER ===== */
.container{max-width:1300px;margin:0 auto;padding:28px 20px;}

/* ===== STATS ===== */
.stats-row{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:14px;margin-bottom:28px;
}
.stat-card{
    background:var(--bg3);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:20px 24px;
    transition:var(--trans);
}
.stat-card:hover{border-color:var(--border2);transform:translateY(-2px);}
.stat-value{font-size:2rem;font-weight:800;line-height:1;}
.stat-label{font-size:0.78rem;color:var(--text-muted);margin-top:6px;font-weight:500;}

/* ===== PAGE HEADER ===== */
.page-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:20px;flex-wrap:wrap;gap:12px;
}
.page-header h1{font-size:1.5rem;font-weight:700;}
.page-header p{color:var(--text-muted);font-size:0.85rem;margin-top:2px;}

/* ===== CREATE FORM ===== */
.create-task-form{
    background:var(--bg3);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:20px;
    margin-bottom:24px;
    display:none;
    animation:fadeIn .2s ease;
}
.create-task-form.open{display:block;}
.form-row{display:flex;gap:10px;flex-wrap:wrap;}
.form-row input,.form-row select,.form-row textarea{
    flex:1;min-width:180px;
    background:var(--bg);border:1px solid var(--border2);
    border-radius:var(--radius);padding:10px 14px;
    color:var(--text);font-size:0.875rem;
    transition:var(--trans);font-family:inherit;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
    outline:none;border-color:var(--green);
    box-shadow:0 0 0 3px var(--green-dim);
}

/* ===== BOARD ===== */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.column{
    background:var(--bg2);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:16px;
    min-height:300px;
}
.column-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:14px;padding-bottom:12px;
    border-bottom:1px solid var(--border);
}
.column-header h2{font-size:0.9rem;font-weight:600;display:flex;align-items:center;gap:8px;}
.dot{
    width:8px;height:8px;border-radius:50%;flex-shrink:0;
    background:var(--text-dim);
}
#todo .dot{background:var(--text-muted);}
#doing .dot{background:var(--orange);box-shadow:0 0 8px var(--orange-glow);}
#done .dot{background:var(--green);box-shadow:0 0 8px var(--green-glow);}
.count{
    background:var(--bg4);color:var(--text-muted);
    font-size:0.75rem;font-weight:600;
    padding:2px 8px;border-radius:20px;
}

/* ===== TASKS ===== */
.task{
    background:var(--bg3);border:1px solid var(--border);
    border-radius:var(--radius);padding:14px;
    margin-bottom:10px;cursor:grab;
    transition:var(--trans);
}
.task:hover{border-color:var(--border2);box-shadow:var(--shadow);}
.task.dragging{opacity:0.5;cursor:grabbing;}
.task-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px;}
.task-title{font-size:0.875rem;font-weight:600;line-height:1.4;}
.priority{
    font-size:0.7rem;font-weight:600;padding:2px 8px;
    border-radius:20px;flex-shrink:0;
}
.priority-high{background:var(--red-dim);color:var(--red);}
.priority-medium{background:var(--orange-dim);color:var(--orange);}
.priority-low{background:var(--green-dim);color:var(--green);}
.task-desc{
    width:100%;background:transparent;border:none;
    color:var(--text-muted);font-size:0.8rem;
    resize:none;font-family:inherit;line-height:1.5;
    min-height:40px;
}
.task-progress{margin-top:10px;}
.progressbar{height:4px;background:var(--bg4);border-radius:2px;margin-top:6px;}
.progressfill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--green2),var(--green));transition:width .3s;}
.column.drag-over{border-color:var(--green);background:var(--green-dim);}

/* ===== TICKET FORM (PUBLIC) ===== */
.ticket-page{
    min-height:100vh;
    background:var(--bg);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%,rgba(74,222,128,0.06) 0%,transparent 60%),
        radial-gradient(ellipse 50% 40% at 90% 90%,rgba(251,146,60,0.05) 0%,transparent 50%);
    display:flex;flex-direction:column;align-items:center;
    padding:40px 16px;
}
.ticket-header{text-align:center;margin-bottom:40px;}
.ticket-logo{
    width:60px;height:60px;border-radius:16px;
    background:linear-gradient(135deg,var(--green2),var(--orange));
    display:flex;align-items:center;justify-content:center;
    font-size:1.6rem;font-weight:800;color:#0a0f0a;
    margin:0 auto 16px;
    box-shadow:0 0 30px var(--green-glow);
}
.ticket-header h1{font-size:1.8rem;font-weight:800;}
.ticket-header h1 span{
    background:linear-gradient(135deg,var(--green),var(--orange));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.ticket-header p{color:var(--text-muted);margin-top:8px;}
.ticket-form-container{
    background:var(--bg2);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:36px 32px;
    width:100%;max-width:560px;
    box-shadow:var(--shadow-lg);
    position:relative;overflow:hidden;
}
.ticket-form-container::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--green2),var(--orange),var(--green2));
    background-size:200% 100%;
    animation:shimmer 3s ease-in-out infinite;
}
@keyframes shimmer{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.form-group{margin-bottom:18px;}
.form-group label{
    display:block;font-size:0.8rem;font-weight:600;
    color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.05em;
}
.form-group input,
.form-group select,
.form-group textarea{
    width:100%;background:var(--bg);
    border:1px solid var(--border2);border-radius:var(--radius);
    padding:12px 14px;color:var(--text);font-size:0.9rem;
    font-family:inherit;transition:var(--trans);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    outline:none;border-color:var(--green);
    box-shadow:0 0 0 3px var(--green-dim);
}
.form-group textarea{min-height:120px;resize:vertical;}
.form-group select option{background:var(--bg2);}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.category-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.cat-btn{
    padding:10px 8px;border-radius:var(--radius);
    border:1px solid var(--border2);background:var(--bg);
    color:var(--text-muted);font-size:0.8rem;font-weight:500;
    cursor:pointer;transition:var(--trans);text-align:center;
}
.cat-btn:hover{border-color:var(--green);color:var(--green);}
.cat-btn.selected{
    border-color:var(--orange);color:var(--orange);
    background:var(--orange-dim);
    box-shadow:0 0 12px var(--orange-glow);
}
.cat-btn input{display:none;}
.file-upload{
    display:flex;align-items:center;gap:12px;
    padding:12px 14px;border-radius:var(--radius);
    border:1px dashed var(--border2);cursor:pointer;
    transition:var(--trans);color:var(--text-muted);font-size:0.85rem;
}
.file-upload:hover{border-color:var(--green);color:var(--green);}
.file-upload input{display:none;}
.submit-btn{
    width:100%;padding:14px;border-radius:var(--radius);
    background:linear-gradient(135deg,var(--green2),var(--orange));
    color:#0a0f0a;font-weight:700;font-size:1rem;
    border:none;cursor:pointer;transition:var(--trans);
    box-shadow:0 0 20px var(--green-glow);
    margin-top:8px;
}
.submit-btn:hover{transform:translateY(-1px);box-shadow:0 0 30px var(--green-glow);}

/* ===== SUCCESS ===== */
.ticket-success{
    max-width:440px;width:100%;margin:80px auto;
    background:var(--bg2);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:48px 36px;
    text-align:center;box-shadow:var(--shadow-lg);
}
.checkmark{
    width:64px;height:64px;border-radius:50%;
    background:var(--green-dim);border:2px solid var(--green);
    display:flex;align-items:center;justify-content:center;
    font-size:1.8rem;color:var(--green);
    margin:0 auto 24px;
    box-shadow:0 0 20px var(--green-glow);
}
.ticket-code{
    background:var(--bg3);border:1px solid var(--border2);
    border-radius:var(--radius);padding:12px 20px;
    font-family:monospace;font-size:1.1rem;font-weight:700;
    color:var(--orange);letter-spacing:0.1em;margin-top:16px;
    display:inline-block;
}

/* ===== TICKETS LIST ===== */
.tickets-table{width:100%;border-collapse:collapse;}
.tickets-table th{
    padding:10px 16px;text-align:left;
    font-size:0.75rem;font-weight:600;
    color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;
    border-bottom:1px solid var(--border);
}
.tickets-table td{
    padding:14px 16px;font-size:0.875rem;
    border-bottom:1px solid var(--border);
    vertical-align:middle;
}
.tickets-table tr:hover td{background:var(--bg3);}
.badge{
    display:inline-flex;align-items:center;
    padding:3px 10px;border-radius:20px;
    font-size:0.75rem;font-weight:600;
}
.badge-open{background:var(--orange-dim);color:var(--orange);}
.badge-closed{background:var(--green-dim);color:var(--green);}
.badge-cat{background:var(--bg4);color:var(--text-muted);border:1px solid var(--border);}

/* ===== LOGIN ===== */
.login-page{
    min-height:100vh;display:flex;align-items:center;
    justify-content:center;
    background:var(--bg);
    background-image:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(74,222,128,0.07) 0%,transparent 60%);
}
.login{
    max-width:380px;width:100%;margin:24px;
    background:var(--bg2);padding:44px 36px 40px;
    border-radius:20px;border:1px solid var(--border);
    text-align:center;box-shadow:var(--shadow-lg);
    position:relative;overflow:hidden;
}
.login::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--green2),var(--orange),var(--green2));
    background-size:200% 100%;animation:shimmer 3s ease-in-out infinite;
}
.login-logo{
    width:56px;height:56px;border-radius:14px;
    background:linear-gradient(135deg,var(--green2),var(--orange));
    display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;font-weight:800;color:#0a0f0a;
    margin:0 auto 20px;box-shadow:0 0 24px var(--green-glow);
}
.login h1{font-size:1.4rem;font-weight:700;margin-bottom:4px;}
.login p{color:var(--text-muted);font-size:0.85rem;margin-bottom:28px;}
.login input{
    width:100%;background:var(--bg);border:1px solid var(--border2);
    border-radius:var(--radius);padding:12px 14px;
    color:var(--text);font-size:0.9rem;font-family:inherit;
    margin-bottom:12px;transition:var(--trans);
}
.login input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-dim);}
.login button{
    width:100%;padding:13px;border-radius:var(--radius);
    background:linear-gradient(135deg,var(--green2),var(--orange));
    color:#0a0f0a;font-weight:700;font-size:0.95rem;
    border:none;cursor:pointer;transition:var(--trans);
    box-shadow:0 0 16px var(--green-glow);
}
.login button:hover{transform:translateY(-1px);box-shadow:0 0 24px var(--green-glow);}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== MOBILE ===== */
@media(max-width:900px){
    .board{grid-template-columns:1fr;}
    .stats-row{grid-template-columns:repeat(2,1fr);}
    .navbar-user .user-info{display:none;}
    .board-hint-desktop{display:none;}
}
@media(max-width:640px){
    .navbar{padding:0 14px;}
    .navbar-links a span{display:none;}
    .container{padding:16px 12px;}
    .stats-row{grid-template-columns:repeat(2,1fr);gap:10px;}
    .stat-card{padding:14px 16px;}
    .stat-value{font-size:1.6rem;}
    .ticket-form-container{padding:24px 18px;}
    .form-row-2{grid-template-columns:1fr;}
    .category-grid{grid-template-columns:repeat(2,1fr);}
    .tickets-table th:nth-child(4),
    .tickets-table td:nth-child(4){display:none;}
    .board-hint-mobile{display:block;}
}
@media(min-width:641px){.board-hint-mobile{display:none;}}

/* ===== COMPAT ALIASES ===== */
:root {
    --surface-2: #0f170f;
    --surface-3: #1a2a1a;
    --fg: #e8f5e8;
    --muted: #7fa87f;
}

/* ===== TABS ===== */
.tabs { display:flex;gap:4px;margin-bottom:24px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:5px;width:fit-content; }
.tab { padding:8px 20px;border-radius:8px;font-size:0.85rem;font-weight:500;color:var(--text-muted);cursor:pointer;transition:var(--trans);text-decoration:none; }
.tab:hover { color:var(--text); }
.tab.active { background:var(--bg4);color:var(--green);font-weight:600;box-shadow:0 0 12px var(--green-dim); }

/* ===== TICKET CARDS ===== */
.ticket-card { background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:14px;transition:var(--trans);position:relative;overflow:hidden; }
.ticket-card::before { content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);border-radius:2px 0 0 2px; }
.ticket-card.closed::before { background:var(--green2); }
.ticket-card:hover { border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--shadow); }
.ticket-id { font-weight:700;color:var(--orange);font-size:0.85rem;font-family:monospace;letter-spacing:0.05em; }
.ticket-from { font-size:0.9rem;color:var(--text);margin-top:4px; }
.ticket-message { font-size:0.85rem;color:var(--text-muted);line-height:1.6;margin:10px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.ticket-footer { display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);flex-wrap:wrap;gap:10px; }
.ticket-time { font-size:0.78rem;color:var(--text-dim); }

/* ===== EMPTY STATE ===== */
.empty-state { text-align:center;padding:60px 20px;color:var(--text-muted); }
.empty-icon { font-size:3rem;margin-bottom:16px; }

/* ===== MODAL ===== */
.modal-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:999;align-items:center;justify-content:center;backdrop-filter:blur(4px);padding:20px; }
.modal-overlay.open { display:flex; }
.modal { background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:32px;max-width:440px;width:100%;box-shadow:var(--shadow-lg);animation:fadeIn .2s ease; }
.modal h2 { font-size:1.2rem;margin-bottom:8px; }
.modal p { color:var(--text-muted);font-size:0.875rem;margin-bottom:24px; }
.modal-actions { display:flex;flex-direction:column;gap:10px; }
.prio-btn { padding:13px;border-radius:var(--radius);border:none;font-weight:700;font-size:0.95rem;cursor:pointer;transition:var(--trans);display:flex;align-items:center;gap:10px; }
.prio-btn:hover { transform:translateY(-1px); }
.prio-high { background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff;box-shadow:0 0 16px rgba(239,68,68,0.3); }
.prio-medium { background:linear-gradient(135deg,var(--orange2),var(--orange));color:#0a0f0a;box-shadow:0 0 16px var(--orange-glow); }
.prio-low { background:linear-gradient(135deg,var(--green2),var(--green));color:#0a0f0a;box-shadow:0 0 16px var(--green-glow); }
.detail-field { margin-bottom:16px; }
.detail-field label { display:block;font-size:0.73rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:5px; }
.detail-field p { font-size:0.875rem;color:var(--text);background:var(--bg3);border-radius:var(--radius);padding:10px 14px;line-height:1.6; }

@media(max-width:640px) {
    .ticket-card{padding:14px 16px;}
    .ticket-footer{flex-direction:column;align-items:flex-start;}
    .tabs{width:100%;}
    .tab{flex:1;text-align:center;font-size:0.8rem;padding:8px 10px;}
}