/* ─── NetCab SDM — Styles (mobile-first) ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif; color: #1a1a2e; background: #f5f6f8; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; max-width: 100%; }
* { min-width: 0; }
code, .mono, .url-txt, .secret-val, .code-url, .field span, .note { overflow-wrap: anywhere; word-break: break-word; }
button, a { -webkit-tap-highlight-color: transparent; font-family: inherit; }
a { color: #2980b9; text-decoration: none; }
input, select, textarea, button { font-family: inherit; font-size: 14px; }

/* ─── Login ─── */
.login-page { background: linear-gradient(150deg, #f0f2f5, #e8eaf0, #edf5f3); min-height: 100vh; }
.login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: #fff; border: 1px solid #e2e4ea; border-radius: 16px; padding: 40px 32px; width: 100%; max-width: 380px; box-shadow: 0 8px 32px rgba(0,0,0,0.08); text-align: center; }
.login-logo { width: 60px; height: 60px; border-radius: 14px; background: #fef7e0; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.login-card h1 { font-size: 24px; color: #c8960a; margin: 0; }
.login-card .sub { font-size: 13px; color: #888; margin: 6px 0 24px; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-form input { padding: 12px 14px; border: 1px solid #dde0e6; border-radius: 10px; background: #f8f9fb; outline: none; }
.login-form input:focus { border-color: #c8960a; background: #fff; }
.btn-primary { padding: 12px; border: none; border-radius: 10px; background: linear-gradient(135deg,#e8b400,#c8960a); color: #fff; font-weight: 600; cursor: pointer; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.copyright { margin-top: 24px; font-size: 12px; color: #aaa; }
.alert-error { padding: 10px 14px; background: #fde8e8; color: #c0392b; border-radius: 8px; font-size: 13px; margin-bottom: 12px; }
.alert-success { padding: 10px 14px; background: #e8f8ef; color: #27ae60; border-radius: 8px; font-size: 13px; margin-bottom: 12px; }

/* ─── Layout ─── */
.app { min-height: 100vh; }
.header { background: rgba(255,255,255,0.95); border-bottom: 1px solid #e2e4ea; padding: 16px 24px; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); }
.header-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.header h1 { font-size: 20px; color: #c8960a; margin: 0; font-weight: 700; }
.header .sub { font-size: 13px; color: #888; margin: 2px 0 0; }
.user-badge { padding: 6px 14px; border-radius: 20px; background: #fef7e0; color: #b8860b; font-size: 13px; font-weight: 500; }
.icon-btn { padding: 8px; border: none; border-radius: 8px; background: #f0f1f4; color: #666; cursor: pointer; display: inline-flex; align-items: center; }
.lang-switch { display: inline-flex; border: 1px solid #dde0e6; border-radius: 8px; overflow: hidden; font-size: 11px; font-weight: 600; }
.lang-switch a { padding: 6px 10px; color: #888; text-decoration: none; background: #fff; border-right: 1px solid #dde0e6; }
.lang-switch a:last-child { border-right: none; }
.lang-switch a.active { background: #fef7e0; color: #c8960a; }
.icon-btn:hover { background: #e4e6ea; }
.content { max-width: 1200px; margin: 0 auto; padding: 20px 24px; }

/* ─── Stats ─── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.stat-card { background: #fff; border: 1px solid #e8eaee; border-radius: 12px; padding: 16px 20px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.stat-num { font-size: 28px; font-weight: 700; color: #c8960a; display: block; }
.stat-num.green { color: #27ae60; } .stat-num.blue { color: #2980b9; }
.stat-lbl { font-size: 12px; color: #888; margin-top: 4px; display: block; }

/* ─── Toolbar ─── */
.toolbar { display: flex; gap: 12px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.search-box { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff; border: 1px solid #dde0e6; border-radius: 10px; color: #888; min-width: 200px; }
.search-box input { flex: 1; border: none; background: transparent; outline: none; color: #1a1a2e; }
.btn-add { padding: 10px 18px; border: none; border-radius: 10px; background: linear-gradient(135deg,#e8b400,#c8960a); color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn-add:hover { filter: brightness(1.05); }

/* ─── Company row ─── */
.company-list { display: flex; flex-direction: column; gap: 6px; }
.company-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: #fff; border: 1px solid #e8eaee; border-radius: 10px; cursor: pointer; gap: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.03); text-decoration: none; color: inherit; }
.company-row:hover { border-color: #c8960a; }
.company-row-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.company-row-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.company-avatar { width: 40px; height: 40px; border-radius: 10px; background: #fef7e0; display: flex; align-items: center; justify-content: center; color: #c8960a; flex-shrink: 0; }
.company-row h3 { font-size: 15px; font-weight: 600; margin: 0; }
.company-row p { font-size: 12px; color: #888; margin: 2px 0 0; }
.comp-icons { display: flex; gap: 10px; }
.comp-icon { position: relative; opacity: 0.15; color: #ccc; }
.comp-icon.active { opacity: 1; }
.count-bubble { position: absolute; top: -6px; right: -8px; background: #e74c3c; color: #fff; font-size: 9px; font-weight: 700; width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.badge { padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.badge.active { background: #e8f8ef; color: #27ae60; }
.badge.inactive { background: #fde8e8; color: #e74c3c; }

/* ─── Company detail ─── */
.back-btn { padding: 8px; border: none; border-radius: 8px; background: #f0f1f4; color: #1a1a2e; cursor: pointer; display: inline-flex; align-items: center; }
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; margin-bottom: 20px; }
.comp-card { background: #fff; border: 1px solid #e8eaee; border-left: 3px solid #ddd; border-radius: 10px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.comp-card.empty { opacity: 0.4; }
.comp-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.comp-card-title { display: flex; align-items: center; gap: 8px; }
.comp-card-title h3 { font-size: 14px; font-weight: 600; margin: 0; }
.comp-count { font-size: 11px; color: #888; background: #f0f1f4; padding: 2px 8px; border-radius: 10px; }
.ver-block { padding: 10px; background: #fafbfc; border-radius: 8px; border: 1px solid #eef0f3; display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.ver-block.archived { opacity: 0.55; background: #fafafa; }
.ver-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px; }
.ver-head-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ver-badge { padding: 3px 8px; border-radius: 6px; background: rgba(52,152,219,0.1); color: #2980b9; font-size: 12px; font-weight: 600; }
.pill { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
.pill.active { background: #e8f8ef; color: #27ae60; }
.pill.archived { background: #f0eded; color: #999; }
.ver-actions { display: flex; gap: 3px; }
.ver-actions button { padding: 5px; border: none; border-radius: 5px; background: #f0f1f4; color: #666; cursor: pointer; display: inline-flex; align-items: center; }
.ver-actions button:hover { background: #e4e6ea; }
.ver-actions button.danger { color: #e74c3c; }
.ver-notes { font-size: 12px; color: #777; font-style: italic; margin: 2px 0; }
.url-row { display: flex; align-items: center; gap: 5px; font-size: 11px; min-width: 0; }
.url-lbl { color: #666; font-weight: 600; flex-shrink: 0; }
.url-lbl.short { color: #27ae60; }
.url-txt { color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.url-txt.short { color: #27ae60; }
.mini-btn { padding: 3px; border: none; border-radius: 4px; background: #f0f1f4; color: #666; cursor: pointer; display: inline-flex; align-items: center; flex-shrink: 0; }
.arch-toggle { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 10px; border: 1px dashed #ddd; border-radius: 6px; background: transparent; color: #999; font-size: 11px; cursor: pointer; width: 100%; margin-top: 6px; }
.empty-state { font-size: 13px; color: #bbb; font-style: italic; margin: 8px 0; }

.access-card { background: rgba(46,204,113,0.06); border: 1px solid rgba(46,204,113,0.2); border-radius: 12px; padding: 20px; text-align: center; margin-top: 12px; }
.access-card h3 { font-size: 15px; font-weight: 600; color: #27ae60; margin: 0 0 4px; }
.access-card p { font-size: 13px; color: #888; margin: 0 0 12px; }
.code-url { padding: 10px 16px; background: #f0faf5; border-radius: 8px; font-size: 14px; color: #27ae60; font-family: monospace; border: 1px solid rgba(46,204,113,0.2); display: inline-block; word-break: break-all; }
.sm-btn { padding: 8px 12px; border: 1px solid #dde0e6; border-radius: 10px; background: #f8f9fb; color: #666; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }

/* ─── Modal ─── */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; backdrop-filter: blur(4px); }
.modal { background: #fff; border: 1px solid #e2e4ea; border-radius: 16px; padding: 28px; width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.12); }
.modal h2 { font-size: 18px; font-weight: 700; color: #c8960a; margin: 0 0 20px; }
.fg { margin-bottom: 14px; }
.fg label { display: block; font-size: 12px; color: #666; font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.fg input, .fg select, .fg textarea { width: 100%; padding: 10px 12px; border: 1px solid #dde0e6; border-radius: 8px; background: #f8f9fb; color: #1a1a2e; outline: none; }
.fg textarea { min-height: 60px; resize: vertical; }
.row2 { display: flex; gap: 10px; }
.row2 > .fg { flex: 1; }
.modal-act { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.btn-cancel { padding: 10px 18px; border: 1px solid #dde0e6; border-radius: 8px; background: transparent; color: #888; cursor: pointer; font-size: 13px; }
.btn-save { padding: 10px 18px; border: none; border-radius: 8px; background: linear-gradient(135deg,#e8b400,#c8960a); color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; }

/* ─── Toast ─── */
.toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 20px; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 500; z-index: 300; box-shadow: 0 4px 16px rgba(0,0,0,0.15); background: #2ecc71; }
.toast.error { background: #e74c3c; }

/* ─── Client portal ─── */
.client-header { background: linear-gradient(135deg,#fff9e6,#f0faf5); padding: 32px 24px; border-bottom: 1px solid #e2e4ea; }
.client-header-inner { max-width: 900px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.client-header h1 { font-size: 24px; color: #c8960a; margin: 0; }
.client-header p { font-size: 14px; color: #888; margin: 4px 0 0; }
.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; max-width: 900px; margin: 24px auto; padding: 0 24px; }
.client-card { background: #fff; border: 1px solid #e8eaee; border-radius: 14px; padding: 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.client-card-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.client-card h3 { font-size: 16px; font-weight: 600; margin: 0; }
.client-ver { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 6px; border-top: 1px solid #f0f1f4; }
.download-btn { padding: 10px 20px; border: none; border-radius: 10px; background: linear-gradient(135deg,#2ecc71,#27ae60); color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.client-footer { text-align: center; padding: 24px; font-size: 12px; color: #aaa; }

/* ─── Responsive ─── */
@media (max-width: 720px) {
    html, body { font-size: 14px; }
    .content { padding: 12px; }
    .header { padding: 10px 12px; }
    .header-inner { gap: 8px; }
    .header h1 { font-size: 15px; line-height: 1.2; }
    .header .sub { display: none; }
    .user-badge { padding: 4px 10px; font-size: 11px; }
    .icon-btn { padding: 6px; }

    .stats { gap: 6px; margin-bottom: 12px; }
    .stat-card { padding: 10px 4px; border-radius: 8px; }
    .stat-num { font-size: 20px; }
    .stat-lbl { font-size: 10px; }

    .toolbar { gap: 8px; margin-bottom: 12px; }
    .search-box { padding: 9px 12px; font-size: 13px; min-width: 0; width: 100%; }
    .btn-add { padding: 9px 14px; font-size: 12px; }

    .comp-grid { grid-template-columns: 1fr; gap: 10px; }
    .client-grid { grid-template-columns: 1fr; padding: 0 12px; gap: 12px; }
    .client-header { padding: 20px 14px; }
    .client-header h1 { font-size: 18px; }

    /* Company list - compact row instead of stacked */
    .company-row { padding: 10px 12px; gap: 8px; align-items: center; }
    .company-row-left { gap: 10px; }
    .company-avatar { width: 36px; height: 36px; }
    .company-row h3 { font-size: 14px; }
    .company-row p { font-size: 11px; }
    .company-row-right { flex-direction: column; align-items: flex-end; gap: 6px; }
    .comp-icons { gap: 6px; }
    .comp-icons svg { width: 14px; height: 14px; }
    .count-bubble { width: 12px; height: 12px; font-size: 8px; top: -4px; right: -6px; }
    .badge { padding: 3px 8px; font-size: 10px; }

    /* Company detail header */
    h2 { font-size: 16px; }
    .back-btn { padding: 7px; }
    .comp-card { padding: 12px; }
    .comp-card-title h3 { font-size: 13px; }
    .ver-block { padding: 8px; }
    .ver-badge { font-size: 11px; padding: 2px 6px; }
    .pill { font-size: 10px; padding: 2px 6px; }
    .url-row { font-size: 10px; gap: 4px; flex-wrap: wrap; }
    .url-txt { font-size: 10px; white-space: normal; overflow-wrap: anywhere; }
    .code-url { font-size: 10px; padding: 6px 10px; }
    .content, .header-inner, .modal, .sec-card, .sub-card, .comp-card { max-width: 100%; }

    .modal { padding: 18px; border-radius: 12px; max-height: 94vh; }
    .modal h2 { font-size: 16px; margin-bottom: 14px; }
    .fg { margin-bottom: 10px; }
    .fg label { font-size: 11px; margin-bottom: 4px; }
    .fg input, .fg select, .fg textarea { padding: 9px 11px; font-size: 14px; }
    .row2 { flex-direction: column; gap: 0; }
    .btn-cancel, .btn-save { padding: 9px 14px; font-size: 12px; }

    .toast { left: 12px; right: 12px; bottom: 12px; text-align: center; }

    .access-card { padding: 16px; margin-top: 10px; }
    .access-card h3 { font-size: 14px; }
    .access-card p { font-size: 12px; }
    .code-url { font-size: 11px; padding: 8px 12px; }
}
@media (max-width: 720px) {
    .tab-bar { padding: 0; }
    .tab-btn { padding: 10px 14px; font-size: 12px; flex: 1; justify-content: center; }
    .sec-card { padding: 12px; }
    .sec-head { gap: 6px; }
    .sec-title h3 { font-size: 13px; }
    .field-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .sub-card { padding: 10px; }
    .secret-row { gap: 6px; }
    .secret-row label { min-width: 100%; margin-bottom: 2px; }
    .secret-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
    .param-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .param-row code, .param-row span { width: 100%; }
    .sub-head { gap: 6px; }
    .sub-head strong { font-size: 13px; word-break: break-word; min-width: 0; }
    .field span { word-break: break-word; }
    .ver-actions { margin-left: auto !important; }
    /* stack header controls on company detail */
    .content > div:first-child { gap: 8px !important; }
    .content > div:first-child h2 { font-size: 17px !important; }
    .btn-add { padding: 9px 14px; font-size: 12px; }
    .icon-btn { padding: 7px; }
    h2 { font-size: 16px; }
}
@media (max-width: 420px) {
    .field-grid { grid-template-columns: 1fr; }
    .tab-btn { padding: 10px 8px; font-size: 11px; gap: 4px; }

    /* List view — më kompakt për Fold mbyllur */
    .lv-head { padding: 9px 10px; gap: 6px; }
    .lv-head h3 { font-size: 13px; }
    .lv-row { padding: 9px 10px; }
    .lv-row-main { gap: 5px; row-gap: 4px; }
    .lv-row-sub { gap: 3px; row-gap: 4px; padding-top: 6px; }
    .lv-row-sub .mini-btn { padding: 5px; }
    .lv-row-sub .mini-btn svg { width: 12px !important; height: 12px !important; }
    .ver-badge { padding: 2px 7px; font-size: 11px; }
    .build-badge { padding: 1px 5px; font-size: 9px; }
    .pill { font-size: 10px; padding: 1px 6px; }
    .short-link { font-size: 10px; padding: 1px 5px; }
    .cnt-badge { font-size: 9px; padding: 1px 6px; }
    .act-sep { height: 14px; margin: 0 2px; }

    /* Shared with — kolonë e vetme që të mos wrap-ohet shtrembër */
    #shared-with-box { flex-direction: column !important; gap: 4px !important; padding: 6px !important; }
    #shared-with-box label { font-size: 11px !important; padding: 4px 0; }

    /* Modal më i ngushtë */
    .modal { padding: 16px; }
    .src-tab { padding: 5px 10px; font-size: 11px; }

    /* Header & toolbar */
    .header { padding: 10px 12px; }
    .toolbar { gap: 8px; }
    .btn-add { padding: 8px 12px; font-size: 12px; }
}
@media (max-width: 380px) {
    .stat-num { font-size: 18px; }
    .header h1 { font-size: 15px; }
    .content { padding: 10px; }
    .sec-card { padding: 10px; }
}

/* ─── Tabs & Profili Teknik ─── */
.tab-bar { display:flex; gap:0; border-bottom:1px solid #e2e4ea; background:#fff; margin-bottom:14px; border-radius:10px 10px 0 0; overflow-x:auto; }
.tab-btn { padding:12px 20px; border:none; border-bottom:2px solid transparent; background:transparent; color:#888; font-size:13px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.tab-btn.active { color:#c8960a; border-bottom-color:#c8960a; font-weight:600; }

.sec-card { background:#fff; border:1px solid #e8eaee; border-left:3px solid #ccc; border-radius:10px; padding:14px; margin-bottom:12px; box-shadow:0 1px 3px rgba(0,0,0,0.03); }
.sec-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:8px; }
.sec-title { display:flex; align-items:center; gap:8px; }
.sec-title h3 { margin:0; font-size:14px; font-weight:600; color:#1a1a2e; }
.sec-count { padding:2px 8px; background:#f0f1f4; color:#666; border-radius:10px; font-size:11px; font-weight:600; }
.btn-add.sm { padding:6px 12px; font-size:12px; }

.sub-card { background:#fafbfc; border:1px solid #eef0f3; border-radius:8px; padding:12px; margin-bottom:8px; }
.sub-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.field-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-bottom:8px; }
.field { display:flex; flex-direction:column; gap:2px; }
.field label { font-size:10px; color:#888; text-transform:uppercase; font-weight:600; letter-spacing:0.5px; }
.field span { font-size:13px; color:#1a1a2e; }
.field .mono, .mono { font-family:'SFMono-Regular',Consolas,monospace; font-size:12px; }

.secret-row { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:12px; flex-wrap:wrap; }
.secret-row label { font-size:10px; color:#e74c3c; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; min-width:80px; }
.secret-val { padding:4px 10px; background:#fde8e8; border-radius:5px; font-size:13px; color:#c0392b; font-weight:600; letter-spacing:1px; font-family:monospace; }

.sub-title { font-size:11px; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:0.5px; margin:10px 0 6px; }
.note { font-size:12px; color:#777; font-style:italic; margin:8px 0 0; padding:8px 10px; background:#f5f6f8; border-radius:6px; }

.param-row { display:flex; gap:10px; align-items:center; padding:7px 10px; background:#fafbfc; border:1px solid #eef0f3; border-radius:6px; margin-bottom:4px; font-size:12px; flex-wrap:wrap; }
.param-row code { padding:2px 6px; background:#fff; border-radius:4px; }
.mini-btn.danger { color:#e74c3c; }

/* ─── View switch ─── */
.view-switch { display:flex; gap:4px; margin-bottom:14px; padding:4px; background:#f0f1f4; border-radius:8px; width:fit-content; }
.vs-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; background:transparent; border:none; border-radius:6px; font-size:13px; color:#666; cursor:pointer; transition:.15s; }
.vs-btn.active { background:#fff; color:#c8960a; box-shadow:0 1px 3px rgba(0,0,0,0.06); font-weight:600; }
.vs-btn:not(.active):hover { color:#1a1a2e; }

/* ─── List View (Option B — GitHub releases style) ─── */
.lv-section { background:#fff; border:1px solid #e2e4ea; border-radius:12px; margin-bottom:14px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.03); }
.lv-head { display:flex; align-items:center; gap:10px; padding:12px 16px; background:#fafbfc; border-bottom:1px solid #e2e4ea; border-left:4px solid #ccc; }
.lv-head h3 { margin:0; font-size:15px; color:#1a1a2e; font-weight:600; }
.lv-icon { display:flex; }
.lv-row { padding:14px 16px; border-bottom:1px solid #f0f1f4; }
.lv-row:last-child { border-bottom:none; }
.lv-row.archived { opacity:0.7; background:#fcfcfd; }
.lv-row.linked { background:#f7faff; }
.lv-row-main { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.lv-row-sub { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-top:4px; }
.lv-row-actions { display:flex; gap:4px; }
.lv-link-icon { color:#2070b0; display:flex; }
.lv-qr { text-align:center; padding:14px 0 6px; }
.lv-qr img { border-radius:8px; background:#fff; padding:6px; border:1px solid #e2e4ea; }
.qr-box { display:inline-block; line-height:0; background:#fff; border-radius:8px; }
.qr-box svg { display:block; }
.arch-toggle-list { display:flex; align-items:center; gap:6px; width:100%; padding:10px 16px; background:transparent; border:none; border-top:1px solid #f0f1f4; cursor:pointer; color:#888; font-size:12px; text-align:left; }
.arch-toggle-list:hover { background:#fafbfc; color:#c8960a; }

@media (max-width: 720px) {
    .lv-head { padding:10px 12px; }
    .lv-row { padding:10px 12px; }
    .lv-row-main { gap:6px; }
    .lv-row-sub { gap:4px; }
}

/* ─── Comp Table (Option A — compact) ─── */
.comp-table-wrap { background:#fff; border:1px solid #e2e4ea; border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.03); }
.comp-table { width:100%; border-collapse:collapse; font-size:13px; }
.comp-table thead th { text-align:left; padding:12px 14px; font-size:11px; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:.5px; background:#fafbfc; border-bottom:1px solid #e2e4ea; }
.comp-table tbody td { padding:12px 14px; border-bottom:1px solid #f0f1f4; vertical-align:middle; }
.comp-table tbody tr:last-child td { border-bottom:none; }
.comp-table tr.empty-row td { background:#fcfcfd; }
.comp-cell { display:flex; align-items:center; gap:8px; }
.comp-cell strong { font-size:14px; color:#1a1a2e; }
.cnt-badge { display:inline-block; padding:2px 8px; background:#eef0f3; color:#666; border-radius:10px; font-size:10px; font-weight:600; }
.cnt-badge.subtle { background:transparent; color:#aaa; }
.more-toggle { background:transparent; border:none; cursor:pointer; padding:0; }
.more-toggle:hover .cnt-badge { background:#fef9ec; color:#c8960a; }
.linked-mini { display:inline-flex; align-items:center; gap:4px; margin-top:6px; padding:2px 8px; background:#f0f7ff; color:#2070b0; border-radius:8px; font-size:11px; }
.ver-badge { display:inline-block; padding:3px 10px; background:#e6f4ec; color:#1e8449; border-radius:6px; font-family:monospace; font-size:13px; font-weight:600; }
.ver-badge.arch { background:#f0f1f4; color:#888; }
.build-badge { display:inline-block; padding:2px 8px; background:#fef3c7; color:#92400e; border-radius:6px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
.short-cell { display:flex; align-items:center; gap:6px; }
.short-link { font-family:monospace; color:#c8960a; text-decoration:none; padding:2px 6px; background:#fef9ec; border-radius:4px; font-size:12px; }
.short-link:hover { background:#fef2cc; }
.short-link.big { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; font-size:13px; font-weight:600; border:1px solid #f1d68d; }

.primary-act { display:inline-flex; align-items:center; gap:5px; padding:7px 12px; background:linear-gradient(135deg,#e8b400,#c8960a); color:#fff; border:none; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; transition:.15s; box-shadow:0 1px 2px rgba(200,150,10,0.2); }
.primary-act:hover { transform:translateY(-1px); box-shadow:0 3px 8px rgba(200,150,10,0.3); }
.primary-act:active { transform:translateY(0); }
.primary-act.subtle { background:#fff; color:#c8960a; border:1px solid #f1d68d; box-shadow:none; }
.primary-act.subtle:hover { background:#fef9ec; }
@media (max-width: 420px) {
    .primary-act { padding:6px 10px; font-size:11px; }
    .primary-act span { display:none; } /* vetëm ikonat në Fold mbyllur */
    .short-link.big { padding:5px 8px; font-size:11px; }
}
.actions-cell { text-align:right; white-space:nowrap; }
.actions-cell .mini-btn { padding:6px; }
.muted { color:#888; font-size:12px; }
.empty-cell { padding:8px 14px !important; }
.empty-add.inline { padding:10px; font-size:12px; }
.notes-row td { padding:0 14px 12px 14px !important; border-bottom:1px solid #f0f1f4 !important; }
.notes-text { color:#777; font-size:12px; font-style:italic; }
.extra-rows { display:none; }
.extra-rows.open { display:table-row; }
.extra-rows td { background:#fafbfc; padding:10px 14px !important; }
.extra-list { display:flex; flex-direction:column; gap:6px; }
.extra-row { display:flex; align-items:center; gap:8px; padding:6px 10px; background:#fff; border:1px solid #eef0f3; border-radius:6px; font-size:12px; }
.extra-row .pill { font-size:10px; padding:2px 6px; }
@media (max-width: 720px) {
    .comp-table thead { display:none; }
    .comp-table, .comp-table tbody, .comp-table tr, .comp-table td { display:block; width:100%; }
    .comp-table tr { padding:10px; border-bottom:1px solid #f0f1f4; border-left-width:3px !important; border-left-style:solid; }
    .comp-table td { border:none !important; padding:4px 0 !important; }
    .actions-cell { text-align:left; }
    .short-cell { flex-wrap:wrap; }
}

.src-tab { padding:6px 12px; font-size:12px; border:1px solid #dde0e6; background:#f8f9fb; color:#666; border-radius:6px; cursor:pointer; transition:.15s; }
.src-tab.active { background:#fef9ec; border-color:#c8960a; color:#c8960a; font-weight:600; }
.src-tab:hover { border-color:#c8960a; }
.act-sep { display:inline-block; width:1px; height:18px; background:#e2e4ea; margin:0 4px; align-self:center; }
.ver-actions .danger { color:#e74c3c; }
.ver-actions .danger:hover { background:#fde8e8 !important; }
.empty-add { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:14px; background:transparent; border:2px dashed #d8dde6; border-radius:8px; color:#888; font-size:13px; cursor:pointer; transition:all .15s; }
.empty-add:hover { border-color:#c8960a; color:#c8960a; background:#fef9ec; }
.linked-ver { display:flex; align-items:center; gap:8px; padding:8px 10px; background:#f0f7ff; border:1px dashed #b6d3ec; border-radius:6px; margin-bottom:6px; font-size:13px; color:#2070b0; }
.vv-row { display:flex; align-items:center; gap:8px; padding:8px 10px; background:#fff; border:1px solid #eef0f3; border-radius:6px; margin-bottom:6px; flex-wrap:wrap; }
.vv-actions { display:flex; gap:6px; margin-left:auto; align-items:center; }
.vv-actions select { padding:4px 8px; font-size:11px; border:1px solid #dde0e6; border-radius:5px; background:#f8f9fb; }
@media (max-width:720px) {
    .vv-row { padding:6px 8px; gap:6px; }
    .vv-actions { margin-left:0; width:100%; }
    .vv-actions select { flex:1; }
}

/* ─── Tablet / Foldable (Galaxy Fold7 unfolded ~884px, iPad mini, etc.) ─── */
@media (min-width: 721px) and (max-width: 1024px) {
    .header { padding: 14px 20px; }
    .header-inner { max-width: 100%; }
    .main { padding: 20px; max-width: 100%; }
    .company-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .company-row { padding: 14px; }
    .company-row-right { flex-direction: column; align-items: flex-end; gap: 8px; }
    .field-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
    .sec-card { padding: 18px; }
    .sub-card { padding: 14px; }
    .modal { max-width: 640px; width: 92%; }
    .tab-bar { gap: 8px; }
    .tab-bar button { padding: 10px 16px; font-size: 13px; }
    .toolbar { gap: 10px; }
    table { font-size: 13px; }
    .vv-row { padding: 10px 12px; }
    .row2 { grid-template-columns: repeat(2, 1fr); }
}