:root {
  --navy:#0d2240;--blue:#1a56db;--blue-mid:#1c4f8c;--cyan:#0ea5c8;
  --bg:#f4f6f9;--surface:#fff;--surface2:#eef1f6;--border:#dde2eb;
  --text:#1a1e2e;--text-muted:#5a6478;
  --success:#1a6b3c;--success-bg:#e8f5ee;--danger:#9b1c1c;--danger-bg:#fef2f2;
  --warning-bg:#fffbeb;--radius:6px;--radius-lg:10px;
  --shadow:0 2px 8px rgba(13,34,64,.10),0 8px 24px rgba(13,34,64,.07);
  --shadow-sm:0 1px 3px rgba(13,34,64,.08);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth}
body{font-family:'Inter','Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}
h1,h2,h3{line-height:1.25}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

.alert{padding:12px 16px;border-radius:var(--radius);margin-bottom:20px;font-size:.88rem;border-left:4px solid}
.alert-success{background:var(--success-bg);color:var(--success);border-color:var(--success)}
.alert-error{background:var(--danger-bg);color:var(--danger);border-color:var(--danger)}
.alert-info{background:#e8f0fb;color:var(--blue-mid);border-color:var(--blue)}

.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--radius);border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .15s}
.btn:hover{background:var(--surface2)}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:#1445b5}
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-navy:hover{background:#0a1a33}
.btn-success{background:var(--success);color:#fff;border-color:var(--success)}
.btn-success:hover{background:#145430}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger:hover{background:#7a1616}
.btn-full{width:100%;justify-content:center;padding:12px;font-size:.95rem}
.btn-sm{padding:5px 11px;font-size:.78rem}
.btn-logout{padding:6px 14px;border:1.5px solid rgba(255,255,255,.25);border-radius:var(--radius);font-size:.82rem;color:rgba(255,255,255,.85);transition:all .15s}
.btn-logout:hover{background:rgba(255,255,255,.12);text-decoration:none}
.btn-download{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;background:var(--blue);color:#fff;border-radius:var(--radius);font-size:.8rem;font-weight:500;transition:all .15s;white-space:nowrap}
.btn-download:hover{background:#1445b5;text-decoration:none}
.btn-clear{color:var(--text-muted);font-size:.82rem;padding:7px 12px;border-radius:var(--radius);transition:all .15s}
.btn-clear:hover{background:var(--surface2);text-decoration:none}

.form-group{display:flex;flex-direction:column;gap:5px;flex:1}
.form-group label{font-size:.78rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
input[type=text],input[type=email],input[type=password],input[type=file],select,textarea{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius);font-family:inherit;font-size:.9rem;color:var(--text);background:var(--surface);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,86,219,.12)}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='%235a6478' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;appearance:none}
.form-row{display:flex;gap:14px;flex-wrap:wrap}
.form-row .form-group{min-width:150px}

/* HEADER */
.header{background:var(--navy);border-bottom:3px solid var(--cyan);position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(13,34,64,.35)}
.header-inner{width:100%;padding:0 24px;height:62px;display:flex;align-items:center;gap:12px}
.header-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.header-logo{height:32px;width:auto}
.header-user{display:flex;align-items:center;gap:10px;font-size:.85rem;color:rgba(255,255,255,.75);margin-left:auto}
.header-user strong{color:#fff}

/* HAMBURGER */
.hamburger{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:6px;flex-shrink:0;line-height:1}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199}
.nav-overlay.open{display:block}

/* AUTH */
.auth-page{min-height:100vh;display:flex;background:linear-gradient(135deg,var(--navy) 0%,#163660 50%,#0d4a7a 100%)}
.auth-left{flex:1;display:flex;align-items:center;justify-content:center;padding:48px;color:#fff}
.auth-brand-full{max-width:400px}
.auth-logo{height:77px;width:auto;margin-bottom:30px}
.auth-tagline{font-size:1.5rem;font-weight:700;line-height:1.3;margin-bottom:14px;color:#fff}
.auth-sub{font-size:.9rem;color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:28px}
.auth-features{display:flex;flex-direction:column;gap:10px}
.auth-feature{display:flex;align-items:center;gap:10px;font-size:.85rem;color:rgba(255,255,255,.8)}
.auth-feature-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);flex-shrink:0}
.auth-right{width:460px;flex-shrink:0;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:48px 40px}
.auth-box{width:100%}
.auth-box h2{font-size:1.25rem;font-weight:700;color:var(--navy);margin-bottom:4px}
.auth-box-sub{font-size:.83rem;color:var(--text-muted);margin-bottom:26px}

.tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:22px}
.tab-btn{flex:1;padding:10px 8px;background:none;border:none;font-family:inherit;font-size:.88rem;font-weight:600;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}
.tab-btn.active{color:var(--blue);border-bottom-color:var(--blue)}
.tab-content{display:none}
.tab-content.active{display:block}
.tab-content form{display:flex;flex-direction:column;gap:13px}
.reg-intro{font-size:.8rem;color:var(--blue-mid);background:#e8f0fb;border-radius:var(--radius);padding:9px 12px;margin-bottom:2px;border-left:3px solid var(--blue)}

/* DASHBOARD */
.main{max-width:960px;margin:0 auto;padding:24px 16px}
.building-card{background:linear-gradient(135deg,var(--navy) 0%,var(--blue-mid) 100%);color:#fff;border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:22px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow)}
.building-card-icon{font-size:1.6rem;opacity:.8}
.building-card-info h2{font-size:1rem;font-weight:700}
.building-card-info p{font-size:.82rem;opacity:.72;margin-top:3px}

.filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:22px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px}
.filter-bar select{width:auto;min-width:175px}
.filter-label{font-size:.75rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}

.doc-section{margin-bottom:26px}
.section-header{display:flex;align-items:center;gap:9px;margin-bottom:9px;padding-bottom:8px;border-bottom:1.5px solid var(--border)}
.section-icon{font-size:1rem}
.section-title{font-size:.78rem;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.08em}
.section-count{margin-left:auto;font-size:.72rem;color:var(--text-muted);background:var(--surface2);padding:2px 8px;border-radius:99px}

.doc-list{display:flex;flex-direction:column;gap:3px}
.doc-item{display:flex;align-items:center;gap:11px;padding:11px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:all .15s}
.doc-item:hover{border-color:var(--blue);box-shadow:var(--shadow-sm)}
.doc-icon{font-size:1.15rem;flex-shrink:0;width:26px;text-align:center}
.doc-info{flex:1;min-width:0}
.doc-naziv{display:block;font-weight:500;font-size:.88rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-meta{font-size:.75rem;color:var(--text-muted);margin-top:1px}

.empty-state{text-align:center;padding:50px 20px;color:var(--text-muted);background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-lg)}
.empty-icon{font-size:2.2rem;margin-bottom:12px;opacity:.4}
.empty-state h3{font-size:1.05rem;font-weight:600;margin-bottom:6px}

/* ZGRADA TABOVI */
.zgrada-tabs{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.zgrada-tab{padding:8px 14px;border-radius:var(--radius);font-size:.82rem;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:var(--surface);color:var(--text-muted);text-decoration:none;transition:all .15s}
.zgrada-tab:hover{border-color:var(--blue);color:var(--blue);text-decoration:none}
.zgrada-tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ADMIN LAYOUT */
.admin-layout{display:flex;min-height:calc(100vh - 65px)}
.admin-nav{width:225px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);padding:18px 0;display:flex;flex-direction:column}
.admin-nav-title{padding:0 16px 10px;font-size:.68rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--border);margin-bottom:6px}
.nav-item{display:flex;align-items:center;justify-content:space-between;padding:9px 16px;color:var(--text);font-size:.86rem;transition:all .12s}
.nav-item:hover{background:var(--surface2);text-decoration:none}
.nav-item.active{background:#e8f0fb;color:var(--blue);font-weight:600;border-left:3px solid var(--blue)}
.badge{background:var(--danger);color:#fff;font-size:.7rem;font-weight:700;padding:2px 7px;border-radius:99px;min-width:20px;text-align:center}
.nav-divider{border-top:1px solid var(--border);margin:8px 0}
.nav-stats{padding:6px 16px;font-size:.75rem;color:var(--text-muted);display:flex;flex-direction:column;gap:5px}

.admin-main{flex:1;padding:26px 30px;overflow-x:auto}
.admin-main>h2{font-size:1.2rem;font-weight:700;color:var(--navy);margin-bottom:20px}

.admin-table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.admin-table{width:100%;border-collapse:collapse;font-size:.845rem;background:var(--surface)}
.admin-table th{background:var(--navy);color:rgba(255,255,255,.85);padding:10px 13px;text-align:left;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.admin-table td{padding:10px 13px;border-bottom:1px solid var(--border);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:var(--surface2)}
.action-cell{display:flex;gap:5px;align-items:center;white-space:nowrap;flex-wrap:wrap}

.status-badge{display:inline-block;padding:3px 9px;border-radius:99px;font-size:.73rem;font-weight:600}
.status-badge.status-aktivan{background:var(--success-bg);color:var(--success)}
.status-badge.status-na_cekanju{background:var(--warning-bg);color:#92400e}
.status-badge.status-odbijen,.status-badge.status-blokiran{background:var(--danger-bg);color:var(--danger)}

.upload-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;gap:16px;max-width:720px;box-shadow:var(--shadow-sm)}

/* Hijerarhija tree */
.tree-kat{margin-bottom:20px}
.tree-kat-header{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--navy);color:#fff;border-radius:var(--radius);cursor:pointer;user-select:none}
.tree-kat-header:hover{background:var(--blue-mid)}
.tree-kat-icon{font-size:.95rem}
.tree-kat-naziv{flex:1;font-size:.83rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.tree-kat-count{font-size:.73rem;opacity:.7;background:rgba(255,255,255,.15);padding:2px 9px;border-radius:99px}
.tree-kat-arrow{font-size:.7rem;transition:transform .2s}
.tree-kat-arrow.open{transform:rotate(90deg)}
.tree-kat-body{display:none;padding:8px 0 0 0}
.tree-kat-body.open{display:block}
.tree-god{margin-bottom:8px}
.tree-god-header{display:flex;align-items:center;gap:8px;padding:7px 13px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;user-select:none}
.tree-god-header:hover{background:#e0e6f0}
.tree-god-label{flex:1;font-size:.82rem;font-weight:600;color:var(--navy)}
.tree-god-count{font-size:.72rem;color:var(--text-muted)}
.tree-god-arrow{font-size:.7rem;color:var(--text-muted);transition:transform .2s}
.tree-god-arrow.open{transform:rotate(90deg)}
.tree-god-body{display:none;padding:4px 0 4px 10px}
.tree-god-body.open{display:block}
.tree-mes{margin-bottom:6px}
.tree-mes-header{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;user-select:none}
.tree-mes-header:hover{background:var(--surface2)}
.tree-mes-label{flex:1;font-size:.8rem;font-weight:500;color:var(--text)}
.tree-mes-count{font-size:.7rem;color:var(--text-muted)}
.tree-mes-arrow{font-size:.65rem;color:var(--text-muted);transition:transform .2s}
.tree-mes-arrow.open{transform:rotate(90deg)}
.tree-mes-body{display:none;padding:4px 0 2px 10px}
.tree-mes-body.open{display:block}

.btn-preview{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;background:var(--surface2);color:var(--navy);border:1px solid var(--border);border-radius:var(--radius);font-size:.78rem;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap;font-family:inherit}
.btn-preview:hover{background:#e0e6f0;border-color:var(--blue)}

/* Modal */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal-box{background:#fff;border-radius:var(--radius-lg);width:92vw;max-width:900px;height:88vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.4);overflow:hidden}
.modal-header{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--navy);color:#fff;flex-shrink:0}
.modal-title{flex:1;font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-dl{padding:7px 14px;background:var(--blue);color:#fff;border-radius:var(--radius);font-size:.82rem;font-weight:500;text-decoration:none}
.modal-dl:hover{background:#1445b5}
.modal-close{background:none;border:none;color:rgba(255,255,255,.7);font-size:1.3rem;cursor:pointer;padding:4px 8px}
.modal-close:hover{color:#fff}
.modal-body{flex:1;overflow:hidden}
.modal-body iframe{width:100%;height:100%;border:none}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:768px){
  /* Auth - mobilni */
  .auth-page{flex-direction:column}
  .auth-left{display:none}
  .auth-right{width:100%;padding:32px 20px;min-height:100vh;align-items:flex-start;padding-top:40px}
  .auth-mobile-logo{display:flex !important}

  /* Header */
  .hamburger{display:block}
  .header-user span:first-child{display:none}

  /* Admin nav - slide-in */
  .admin-nav{
    display:none;position:fixed;top:0;left:0;
    width:82%;max-width:280px;height:100vh;
    z-index:200;overflow-y:auto;padding-top:70px;
    box-shadow:4px 0 24px rgba(0,0,0,.3);
  }
  .admin-nav.open{display:flex}

  /* Dashboard nav - slide-in za stanare */
  .dash-nav{
    display:none;position:fixed;top:0;left:0;
    width:82%;max-width:280px;height:100vh;
    z-index:200;overflow-y:auto;padding-top:70px;
    background:var(--surface);border-right:1px solid var(--border);
    box-shadow:4px 0 24px rgba(0,0,0,.3);
    flex-direction:column;
  }
  .dash-nav.open{display:flex}
  .dash-nav-item{padding:12px 20px;font-size:.9rem;font-weight:500;color:var(--text);border-bottom:1px solid var(--border)}

  .admin-main{padding:16px 14px}
  .form-row{flex-direction:column}
  .building-card{flex-direction:column;text-align:center}
  .zgrada-tabs{flex-direction:column}
  .zgrada-tab{text-align:center}
  .doc-item{flex-wrap:wrap}
  .doc-item .btn-preview,.doc-item .btn-download{flex:1;justify-content:center}
  .admin-table{font-size:.78rem}
  .admin-table th,.admin-table td{padding:8px 10px}
}