:root{
  --bg:#031426;
  --bg-deep:#02111f;
  --sidebar:#05182b;
  --panel:#08213a;
  --panel2:#0a2948;
  --line:#17476d;
  --line-soft:rgba(87,143,188,.18);
  --text:#f5f8fc;
  --muted:#9eb0c0;
  --muted2:#6f879b;
  --accent:#159cff;
  --accent2:#0069ff;
  --green:#2ce3a2;
  --purple:#7180ff;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
  --shadow:0 18px 50px rgba(0,0,0,.22);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg-deep);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{min-height:100vh;letter-spacing:-.015em}
body.menu-open{overflow:hidden}
button,input,select,textarea{font:inherit}
a{text-decoration:none;color:inherit}
svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.app-shell{min-height:100vh;display:grid;grid-template-columns:222px minmax(0,1fr);background:#031426}

.sidebar{
  position:sticky;top:0;height:100vh;padding:28px 18px 22px;z-index:50;
  background:
    radial-gradient(circle at 20% 3%,rgba(14,111,180,.13),transparent 34%),
    linear-gradient(180deg,#061b31 0%,#041527 62%,#031321 100%);
  border-right:1px solid rgba(70,132,178,.18);
  box-shadow:12px 0 30px rgba(0,0,0,.09);
}
.sidebar-top{display:flex;align-items:flex-start;justify-content:space-between}
.sidebar-brand{padding:2px 5px 0;margin-bottom:38px}
.tenant-name{font-size:14px;font-weight:650;line-height:1.1;color:#fff;margin-bottom:3px;letter-spacing:-.02em}
.platform-brand{font-size:26px;line-height:1;font-weight:780;letter-spacing:-.045em;color:#fff}
.platform-brand span{color:#32a7ff}
.sidebar-close{display:none;width:38px;height:38px;border:1px solid rgba(81,143,187,.22);border-radius:11px;background:#09243d;color:#dbe9f4;place-items:center;padding:0}
.sidebar-close svg{width:20px;height:20px}

.sidebar-nav{display:flex;flex-direction:column;gap:8px}
.sidebar-nav a{display:flex;align-items:center;gap:13px;height:52px;padding:0 14px;border-radius:12px;color:#d7e1ea;font-size:14.5px;font-weight:500;border:1px solid transparent;transition:.18s ease}
.sidebar-nav a i{width:24px;height:24px;display:grid;place-items:center;color:#dfe9f2}
.sidebar-nav a i svg{width:22px;height:22px}
.sidebar-nav a.active{background:linear-gradient(90deg,rgba(5,88,151,.95),rgba(0,110,218,.95));border-color:rgba(54,163,255,.33);box-shadow:0 8px 28px rgba(0,105,255,.18),inset 0 1px 0 rgba(255,255,255,.05)}
.sidebar-nav a.active i{color:#62c7ff;filter:drop-shadow(0 0 8px rgba(46,171,255,.5))}
.sidebar-nav a:hover:not(.active){background:rgba(15,47,75,.72);border-color:rgba(50,120,169,.25)}

.sidebar-bottom{position:absolute;left:18px;right:18px;bottom:22px}
.tenant-meta{padding:16px 5px;border-top:1px solid rgba(87,143,188,.2);border-bottom:1px solid rgba(87,143,188,.2);margin-bottom:16px}
.tenant-meta-domain{font-size:12.5px;font-weight:680;color:#edf5fb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tenant-meta-legal{font-size:12px;color:#7f96aa;margin-top:5px}
.sidebar-user{display:grid;grid-template-columns:40px 1fr 12px;align-items:center;gap:10px;padding:0 2px}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#234a69,#102f49);border:1px solid rgba(86,145,190,.4);color:#fff;font-weight:700;font-size:13px}
.user-copy strong{display:block;font-size:13px;font-weight:650;line-height:1.2}
.user-copy span{display:block;color:#879caf;font-size:11.5px;margin-top:4px}
.chev{color:#8da1b4;font-size:22px;line-height:1}
.logout-link{display:flex;align-items:center;gap:8px;margin:15px 0 0 4px;font-size:12.5px;color:#78add4}
.logout-link svg{width:17px;height:17px}

.mobile-backdrop{display:none}

.main{
  min-width:0;padding:14px 26px 18px;overflow:hidden;
  background:
    radial-gradient(900px 360px at 78% 0%,rgba(13,72,121,.45),transparent 62%),
    linear-gradient(180deg,#041a30 0%,#031426 100%);
}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;height:58px}
.mobile-topline{display:none}
.search-wrap{position:relative;width:424px;max-width:38vw}
.search-wrap>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#7f98ac}
.search-wrap input{width:100%;height:42px;border-radius:11px;border:1px solid rgba(69,128,174,.3);background:rgba(7,34,57,.78);color:#dfe9f2;padding:0 62px 0 42px;outline:0}
.search-wrap input::placeholder{color:#7990a3}
.search-wrap input:focus{border-color:#248dd0;box-shadow:0 0 0 3px rgba(21,156,255,.08)}
.search-shortcut{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:10.5px;color:#6f879b;border:1px solid rgba(79,130,168,.28);border-radius:6px;padding:3px 6px}
.topbar-actions{display:flex;align-items:center;gap:10px}
.status-pill{height:38px;display:flex;align-items:center;gap:7px;padding:0 12px;border-radius:999px;border:1px solid rgba(58,129,180,.25);background:rgba(7,34,57,.72);color:#b8c9d7;font-size:11.5px;white-space:nowrap}
.status-pill strong{color:var(--green);font-weight:650}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(38,226,160,.75)}
.pill-caret{color:#668298;font-size:12px}
.icon-btn{position:relative;width:38px;height:38px;border:0;background:transparent;color:#c9d8e4;display:grid;place-items:center;cursor:pointer;padding:0}
.icon-btn svg{width:22px;height:22px}
.notification-badge{position:absolute;right:0;top:0;min-width:17px;height:17px;border-radius:999px;background:#ff4c62;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;border:2px solid #08213a}

.hero{position:relative;min-height:114px;margin:15px 0 16px;padding:20px 24px 18px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;border-radius:16px;border:1px solid rgba(46,110,158,.22);background:linear-gradient(90deg,rgba(2,21,39,.96) 0%,rgba(4,27,50,.82) 45%,rgba(4,35,61,.42) 100%),radial-gradient(circle at 72% 26%,rgba(24,107,170,.26),transparent 37%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(62,147,206,.42),transparent)}
.hero-copy h1{margin:0;font-size:41px;line-height:.98;font-weight:770;letter-spacing:-.05em}
.hero-copy .hello{font-size:18px;font-weight:700;margin-top:8px;line-height:1.15}
.hero-copy .sub{font-size:13.5px;color:#9fb0bf;margin-top:4px}
.primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:11px;background:linear-gradient(135deg,#159cff,#0068f3);color:#fff;font-size:14px;font-weight:650;box-shadow:0 10px 26px rgba(0,105,255,.28),inset 0 1px 0 rgba(255,255,255,.14);border:1px solid rgba(70,174,255,.34)}

.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi-card{position:relative;min-height:158px;padding:17px 18px 16px;border-radius:15px;overflow:hidden;border:1px solid rgba(47,135,190,.42);background:linear-gradient(145deg,rgba(9,45,75,.96),rgba(3,27,48,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 14px 30px rgba(0,0,0,.12)}
.kpi-card.kpi-green{border-color:rgba(38,197,171,.45);background:linear-gradient(145deg,rgba(7,67,77,.92),rgba(4,35,55,.97))}
.kpi-card.kpi-purple{border-color:rgba(101,112,235,.48);background:linear-gradient(145deg,rgba(37,57,120,.88),rgba(10,35,64,.97))}
.kpi-card.kpi-teal{border-color:rgba(31,175,146,.44);background:linear-gradient(145deg,rgba(6,67,72,.9),rgba(4,35,55,.97))}
.kpi-top{display:flex;align-items:center;gap:11px}
.kpi-icon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;color:#5ec9ff;background:linear-gradient(145deg,rgba(12,96,145,.72),rgba(8,56,91,.65));border:1px solid rgba(69,164,220,.3)}
.kpi-icon svg{width:25px;height:25px}
.kpi-label{color:#d5e2ec;font-size:12.8px;font-weight:560}
.kpi-value{font-size:31px;line-height:1;font-weight:760;letter-spacing:-.04em;margin:16px 0 7px}
.kpi-meta{font-size:12px;color:#8ea4b8}
.kpi-trend{color:#37e49d;font-weight:650;margin-right:4px}
.spark{position:absolute;right:17px;bottom:22px;width:42px;height:42px;display:flex;gap:3px;align-items:end;opacity:.8}
.spark b{width:4px;border-radius:2px;background:#2e9ee8}
.spark b:nth-child(1){height:9px}.spark b:nth-child(2){height:15px}.spark b:nth-child(3){height:23px}.spark b:nth-child(4){height:31px}.spark b:nth-child(5){height:40px}

.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:14px;margin-top:18px}
.panel{border:1px solid rgba(63,122,166,.22);border-radius:15px;background:linear-gradient(180deg,rgba(7,31,52,.93),rgba(4,25,44,.96));box-shadow:0 16px 36px rgba(0,0,0,.12)}
.panel-inner{padding:17px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.panel-title-wrap{display:flex;align-items:center;gap:12px}
.panel-icon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#0d5f9a,#0b345d);border:1px solid rgba(62,163,224,.28);color:#73c8ff}
.panel-icon svg{width:24px;height:24px}
.panel h2{margin:0;font-size:19px;font-weight:720;letter-spacing:-.025em}
.panel-sub{font-size:11.8px;color:#8299ac;margin-top:3px}
.panel-link{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:9px;border:1px solid rgba(48,113,161,.28);background:rgba(10,42,70,.7);font-size:11.8px;color:#5db8f9}
.table-wrap{overflow:auto;padding:0 12px 12px}
table{width:100%;border-collapse:collapse;font-size:12.4px}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid rgba(82,131,167,.14);white-space:nowrap}
th{color:#a9bed0;font-weight:590;background:rgba(18,51,79,.75)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:rgba(5,76,58,.78);color:#4ee9aa;font-size:11px}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#3ee6a4}

.service-list{display:flex;flex-direction:column}
.service-row{display:grid;grid-template-columns:28px 1fr 28px;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(82,131,167,.14)}
.service-rank{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#1a3c5a;color:#c9d8e5;font-size:11.5px}
.service-name{font-size:12px;color:#dbe5ee}
.service-count{text-align:right;font-size:11.5px;color:#dce7ef}
.banner{position:relative;margin-top:14px;min-height:224px;padding:18px;border-radius:15px;overflow:hidden;border:1px solid rgba(77,131,168,.28);background:linear-gradient(180deg,rgba(3,19,34,.02),rgba(3,20,37,.92)),radial-gradient(circle at 70% 25%,rgba(52,129,180,.35),transparent 32%),linear-gradient(135deg,#163d5b,#0a1f35 65%,#07192a);display:flex;flex-direction:column;justify-content:flex-end}
.banner-kicker{font-size:10.5px;letter-spacing:.15em;color:#afc5d7}
.banner h3{font-size:20px;line-height:1.08;margin:9px 0 7px;letter-spacing:-.025em}
.banner p{font-size:11.5px;line-height:1.45;color:#afbfcc;margin:0;max-width:255px}
.banner-btn{margin-top:14px;display:inline-flex;width:max-content;padding:8px 12px;border:1px solid #1d79b3;border-radius:8px;color:#63c4ff;font-size:11px}

.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:25px 0 16px}
.page-head h1{font-size:34px;margin:0;letter-spacing:-.04em}
.page-head p{margin:5px 0 0;color:#8da2b5;font-size:13px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;color:#a9bccd}
.field input,.field select,.field textarea{background:#08233e;border:1px solid #1a4a6d;color:#fff;border-radius:10px;padding:11px 12px;outline:0}
.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.app-footer{margin-top:22px;padding:17px 2px 3px;border-top:1px solid rgba(72,126,165,.18);font-size:10.8px;color:#72879a}
.app-footer span{margin:0 7px;color:#38556e}

/* WOW LOGIN */
.login-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px;
  background:
    radial-gradient(850px 520px at 12% 12%,rgba(13,109,184,.24),transparent 62%),
    radial-gradient(760px 500px at 88% 86%,rgba(0,87,196,.17),transparent 62%),
    linear-gradient(145deg,#03101e 0%,#051b31 48%,#031321 100%);
}
.login-shell{
  width:min(1040px,100%);
  min-height:620px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  border:1px solid rgba(76,143,191,.25);
  border-radius:28px;
  overflow:hidden;
  background:rgba(5,25,44,.82);
  box-shadow:0 38px 110px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(18px);
}
.login-visual{
  position:relative;
  padding:56px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    linear-gradient(180deg,rgba(3,21,39,.18),rgba(3,18,32,.78)),
    radial-gradient(circle at 70% 28%,rgba(30,136,205,.30),transparent 30%),
    linear-gradient(135deg,#0a3657 0%,#092944 45%,#061a2d 100%);
}
.login-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,transparent 0 58%,rgba(255,255,255,.035) 58% 59%,transparent 59%),
    radial-gradient(ellipse at 74% 100%,rgba(19,119,180,.22),transparent 40%);
  pointer-events:none;
}
.login-brand,.login-message,.login-benefits{position:relative;z-index:1}
.login-brand .tenant-name{font-size:15px;color:#dbe8f4}
.login-brand .platform-brand{font-size:34px;margin-top:5px}
.login-message{max-width:520px}
.login-eyebrow{display:inline-flex;align-items:center;gap:8px;color:#71c8ff;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.login-eyebrow::before{content:"";width:24px;height:1px;background:#53bfff}
.login-message h1{font-size:49px;line-height:1.02;letter-spacing:-.055em;margin:14px 0 16px;font-weight:760}
.login-message p{max-width:500px;color:#adc0cf;font-size:15px;line-height:1.55;margin:0}
.login-benefits{display:flex;gap:10px;flex-wrap:wrap}
.login-benefit{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid rgba(77,145,193,.20);border-radius:999px;background:rgba(7,38,64,.52);color:#c6d6e2;font-size:11.5px}
.login-benefit i{width:7px;height:7px;border-radius:50%;background:#2ce3a2;box-shadow:0 0 8px rgba(44,227,162,.62)}

.login-panel{
  padding:58px 52px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:linear-gradient(180deg,rgba(4,25,44,.95),rgba(3,20,36,.98));
}
.login-panel-head{margin-bottom:26px}
.login-panel-head h2{font-size:31px;letter-spacing:-.045em;margin:0 0 8px}
.login-panel-head p{margin:0;color:#8198aa;font-size:13px;line-height:1.45}
.login-panel .field{margin-top:15px}
.login-panel .field label{font-size:12px;color:#a9bdcd}
.input-wrap{position:relative}
.input-wrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#718ba1}
.login-panel input{
  width:100%;height:50px;
  border-radius:12px;border:1px solid rgba(67,130,176,.38);
  background:#061d34;color:#fff;
  padding:0 44px 0 43px;
  outline:0;
  transition:.18s ease;
}
.login-panel input:focus{border-color:#1b9ef5;box-shadow:0 0 0 4px rgba(21,156,255,.08)}
.password-toggle{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:grid;place-items:center;
  border:0;background:transparent;color:#7890a4;cursor:pointer;
}
.password-toggle svg{position:static;transform:none;width:18px;height:18px}
.login-submit{
  width:100%;height:50px;margin-top:22px;border-radius:12px;
  border:1px solid rgba(78,181,255,.38);
  background:linear-gradient(135deg,#159cff,#0069ff);
  color:white;font-weight:700;cursor:pointer;
  box-shadow:0 12px 28px rgba(0,105,255,.25),inset 0 1px 0 rgba(255,255,255,.15);
}
.login-submit:hover{filter:brightness(1.06)}
.login-meta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:18px;padding-top:18px;border-top:1px solid rgba(71,125,164,.17);
  font-size:11px;color:#6e879b
}
.login-secure{display:flex;align-items:center;gap:7px}
.login-secure::before{content:"";width:7px;height:7px;border-radius:50%;background:#2ce3a2}
.login-error{margin-top:14px;padding:11px 12px;border-radius:10px;border:1px solid rgba(255,91,108,.22);background:rgba(91,22,35,.55);color:#ffdce1;font-size:12.5px}

/* MOBILE */
@media(max-width:1180px){
  .app-shell{grid-template-columns:205px minmax(0,1fr)}
  .content-grid{grid-template-columns:minmax(0,1fr) 280px}
  .search-wrap{width:330px}
}
@media(max-width:980px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .content-grid{grid-template-columns:1fr}
  .login-shell{grid-template-columns:1fr 420px}
  .login-visual{padding:42px}
  .login-panel{padding:46px 36px}
  .login-message h1{font-size:40px}
}
@media(max-width:820px){
  .app-shell{display:block}
  .main{padding:12px 14px 18px;min-height:100vh}

  .mobile-backdrop{
    display:block;position:fixed;inset:0;z-index:80;
    background:rgba(0,8,16,.58);backdrop-filter:blur(4px);
    opacity:0;visibility:hidden;transition:.22s ease;
  }
  .mobile-backdrop.is-open{opacity:1;visibility:visible}

  .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:90;
    width:min(320px,86vw);height:100dvh;padding:24px 18px 20px;
    transform:translateX(-102%);transition:transform .24s cubic-bezier(.2,.8,.2,1);
    box-shadow:28px 0 70px rgba(0,0,0,.42);
  }
  .sidebar.is-open{transform:translateX(0)}
  .sidebar-close{display:grid}
  .sidebar-brand{margin-bottom:28px}
  .sidebar-bottom{left:18px;right:18px;bottom:20px}

  .topbar{height:auto;display:block}
  .mobile-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .mobile-menu-btn{
    width:42px;height:42px;border-radius:12px;display:grid;place-items:center;padding:0;
    border:1px solid rgba(65,132,181,.28);background:rgba(7,34,57,.82);color:#dce9f3;
  }
  .mobile-menu-btn svg{width:21px;height:21px}
  .mobile-brand{text-align:right;line-height:1.08}
  .mobile-brand>div{font-size:10px;color:#8fa5b8;margin-bottom:2px}
  .mobile-brand strong{font-size:16px;letter-spacing:-.035em}
  .mobile-brand strong span{color:#32a7ff}

  .search-wrap{width:100%;max-width:none}
  .search-shortcut{display:none}
  .topbar-actions{margin-top:10px;display:grid;grid-template-columns:1fr auto;gap:8px}
  .domain-pill{display:none}
  .fiscal-status{min-width:0;justify-content:center}
  .icon-btn{border:1px solid rgba(58,129,180,.24);border-radius:11px;background:rgba(7,34,57,.7)}

  .hero{min-height:auto;margin-top:14px;padding:19px;align-items:flex-start;flex-direction:column}
  .hero-copy h1{font-size:34px}
  .hero .primary-btn{width:100%;margin-top:4px}

  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi-card{min-height:142px;padding:14px}
  .kpi-icon{width:42px;height:42px}
  .kpi-value{font-size:27px}
  .spark{right:12px;bottom:16px;transform:scale(.8);transform-origin:right bottom}

  .content-grid{margin-top:12px;gap:12px}
  .panel-inner{padding:14px}
  .panel-title-wrap{align-items:flex-start}
  .panel-icon{width:42px;height:42px}
  .panel-link{padding:7px 9px}
  .banner{min-height:190px}
  .app-footer{line-height:1.6}
}
@media(max-width:640px){
  .login-page{padding:0;background:#031426}
  .login-shell{display:block;width:100%;min-height:100dvh;border:0;border-radius:0;background:#031426;box-shadow:none}
  .login-visual{min-height:295px;padding:34px 24px 28px}
  .login-brand .platform-brand{font-size:29px}
  .login-message h1{font-size:37px;margin-top:12px}
  .login-message p{font-size:13px}
  .login-benefits{display:none}
  .login-panel{padding:30px 24px 36px}
  .login-panel-head h2{font-size:27px}
}
@media(max-width:520px){
  .kpi-grid{grid-template-columns:1fr}
  .kpi-card{min-height:132px}
  .panel-head{align-items:flex-start}
  .panel-title-wrap{gap:10px}
  .panel-sub{max-width:240px}
  .service-row{padding:10px 0}
  .form-grid{grid-template-columns:1fr}
  .page-head{align-items:flex-start;flex-direction:column}
}

/* F1 MVP 1.1 · katalog / izvještaji / čisti topbar */
.compact-btn{min-height:40px;padding:0 16px;font-size:12.5px}
.secondary-app-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 15px;border-radius:10px;border:1px solid rgba(75,138,183,.34);background:rgba(10,42,70,.74);color:#c9d9e6;font-size:12.5px}
.app-alert{margin:0 0 14px;padding:12px 14px;border-radius:11px;font-size:12.5px;line-height:1.5;border:1px solid rgba(75,138,183,.24)}
.app-alert.success{color:#8ef2cc;background:rgba(25,142,112,.10);border-color:rgba(56,220,170,.24)}
.app-alert.danger{color:#ffc5cc;background:rgba(164,45,64,.12);border-color:rgba(255,90,109,.24)}
.catalog-page-head{align-items:center}
.catalog-editor{margin-bottom:16px}
.catalog-editor-head,.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.catalog-editor-head{margin-bottom:17px}
.catalog-editor-head h2,.catalog-toolbar h2{margin:3px 0 0;font-size:20px}
.catalog-eyebrow{font-size:10px;letter-spacing:.14em;color:#5bbcff;font-weight:720}
.catalog-form{margin-top:2px}
.catalog-form .field input,.catalog-form .field select,.catalog-form .field textarea,.report-filter .field input{width:100%;background:#08233e;border:1px solid #1a4a6d;color:#fff;border-radius:10px;padding:11px 12px;outline:0}
.catalog-form .field textarea{resize:vertical}
.catalog-form .field input:focus,.catalog-form .field select:focus,.catalog-form .field textarea:focus,.report-filter .field input:focus{border-color:#248dd0;box-shadow:0 0 0 3px rgba(21,156,255,.08)}
.catalog-check{display:flex;align-items:center;gap:9px;color:#adbfce;font-size:12px;padding:8px 0}.catalog-check input{accent-color:#159cff}
.catalog-toolbar{padding-bottom:16px}
.catalog-search{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.catalog-search input{min-width:250px;height:38px;border-radius:10px;border:1px solid rgba(60,124,171,.3);background:#08213a;color:#fff;padding:0 12px;outline:0}.catalog-search button,.catalog-search a{height:38px;padding:0 12px;border-radius:9px;border:1px solid rgba(55,126,177,.31);background:#0b3458;color:#75c6ff;font:inherit;font-size:11.5px;display:inline-flex;align-items:center;cursor:pointer}
.catalog-empty{color:#7891a5;text-align:center;padding:28px 12px}
.catalog-status{display:inline-flex;align-items:center;min-height:25px;padding:0 9px;border-radius:999px;border:1px solid rgba(65,132,181,.24);font-size:10.5px}.catalog-status.on{color:#78efc4;background:rgba(27,137,106,.12);border-color:rgba(60,214,166,.22)}.catalog-status.off{color:#a7b8c7;background:rgba(89,110,129,.12)}
.row-actions{display:flex;align-items:center;gap:7px}.row-actions a,.row-actions button{border:1px solid rgba(61,126,174,.24);background:#092b49;color:#66bfff;border-radius:8px;padding:6px 9px;font-size:10.5px;cursor:pointer}.row-actions form{margin:0}
.table-note{font-size:10.5px;color:#768fa4;margin-top:3px}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.report-filter-panel{margin-bottom:14px}.report-filter{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.report-filter .field{min-width:190px}.report-kpis{margin-top:0}.reports-table-panel{margin-top:16px}
.topbar-actions{margin-left:auto}

/* Dinamički banner iz RCC-a */
.banner.banner-promo{border-color:rgba(68,145,255,.38);background:radial-gradient(circle at 72% 18%,rgba(27,118,255,.30),transparent 35%),linear-gradient(145deg,#123f69,#071b31 68%)}
.banner.banner-support{border-color:rgba(40,201,164,.32);background:radial-gradient(circle at 72% 18%,rgba(39,180,151,.22),transparent 35%),linear-gradient(145deg,#0c4b51,#071d31 68%)}
.banner.banner-warning{border-color:rgba(240,171,70,.32);background:radial-gradient(circle at 72% 18%,rgba(209,126,42,.22),transparent 35%),linear-gradient(145deg,#5b3b16,#181d2c 68%)}

/* Produkcijska aktivacija placeholder */
.f1-card input:disabled{cursor:not-allowed}

@media(max-width:820px){
  .topbar-actions{display:flex;justify-content:flex-end;margin-top:10px}
  .catalog-editor-head,.catalog-toolbar{align-items:flex-start;flex-direction:column}
  .catalog-search{width:100%}.catalog-search input{min-width:0;flex:1}
  .report-filter{align-items:stretch}.report-filter .field{min-width:0;flex:1 1 180px}
}
.sidebar-nav{max-height:calc(100vh - 310px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(68,132,177,.35) transparent}
.sidebar-nav::-webkit-scrollbar{width:5px}.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(68,132,177,.35);border-radius:99px}


/* F1 UI polish 1.1.1 · čist topbar + DataTables */
@media(min-width:821px){
  .topbar{height:24px;min-height:24px}
}

/* DataTables – premium dark integracija */
.dt-container{color:#9fb4c5;font-size:12px;padding:0 12px 14px}
.dt-container .dt-layout-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;flex-wrap:wrap}
.dt-container .dt-layout-cell{display:flex;align-items:center;gap:8px;min-width:0}
.dt-container .dt-search{display:flex;align-items:center;gap:8px;color:#8ea6b9}
.dt-container .dt-search label{font-size:11.5px;color:#8199ad}
.dt-container .dt-search input,
.dt-container .dt-length select{
  min-height:38px;border-radius:10px!important;border:1px solid rgba(60,124,171,.34)!important;
  background:#08213a!important;color:#eaf3fa!important;padding:0 11px!important;outline:0!important;
  box-shadow:none!important
}
.dt-container .dt-search input{min-width:235px;margin-left:0!important}
.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus{border-color:#248dd0!important;box-shadow:0 0 0 3px rgba(21,156,255,.08)!important}
.dt-container .dt-length{display:flex;align-items:center;gap:8px;color:#8199ad}
.dt-container .dt-length select{min-width:70px}
.dt-container .dt-info{color:#748da2;padding:0!important}
.dt-container .dt-paging{display:flex;align-items:center;gap:5px}
.dt-container .dt-paging .dt-paging-button{
  min-width:34px;height:34px;margin:0!important;border-radius:9px!important;
  border:1px solid rgba(61,126,174,.24)!important;background:#092b49!important;color:#9fc8e5!important;
  box-shadow:none!important
}
.dt-container .dt-paging .dt-paging-button:hover{background:#0d3b63!important;color:#fff!important;border-color:rgba(64,151,213,.42)!important}
.dt-container .dt-paging .dt-paging-button.current{background:#087bd1!important;color:#fff!important;border-color:#159cff!important}
.dt-container .dt-paging .dt-paging-button.disabled{opacity:.38!important;cursor:default!important}
.dt-container .dt-buttons{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dt-container .dt-button{
  margin:0!important;min-height:36px;padding:0 11px!important;border-radius:9px!important;
  border:1px solid rgba(61,126,174,.28)!important;background:#0a3153!important;color:#78c8ff!important;
  font:inherit!important;font-size:11px!important;box-shadow:none!important
}
.dt-container .dt-button:hover{background:#0e416d!important;color:#fff!important;border-color:rgba(69,159,222,.45)!important}
.dt-container table.dataTable{margin:0!important;width:100%!important;border-collapse:collapse!important}
.dt-container table.dataTable thead>tr>th,
.dt-container table.dataTable thead>tr>td{border-bottom:1px solid rgba(54,111,153,.30)!important;color:#86a8bf;background:#0d3556}
.dt-container table.dataTable tbody>tr{background:transparent!important}
.dt-container table.dataTable tbody>tr:hover{background:rgba(12,52,86,.34)!important}
.dt-container table.dataTable tbody>tr>td{border-top:1px solid rgba(44,91,126,.20)!important;box-shadow:none!important}
.dt-container table.dataTable.no-footer{border-bottom:0!important}
.dt-container .dt-empty{text-align:center!important;color:#748da2!important;padding:28px 12px!important}

@media(max-width:820px){
  .topbar{height:auto}
  .dt-container{padding:0 8px 12px}
  .dt-container .dt-layout-row{align-items:stretch}
  .dt-container .dt-layout-cell{width:100%;justify-content:space-between}
  .dt-container .dt-search{width:100%}
  .dt-container .dt-search input{min-width:0;flex:1}
  .dt-container .dt-buttons{width:100%}
  .dt-container .dt-button{flex:1 1 auto}
}


/* F1 UI polish 1.1.2 · DataTables 1.13 + customer segmenti + loading */
a,button,[role="button"],.primary-btn,.secondary-app-btn,.panel-link,.row-actions a,.row-actions button{cursor:pointer}
button:disabled,.primary-btn:disabled,.secondary-app-btn:disabled{cursor:wait;opacity:.72}
.primary-btn.is-loading{position:relative;padding-left:36px}
.primary-btn.is-loading::before{content:"";position:absolute;left:14px;top:50%;width:13px;height:13px;margin-top:-7px;border:2px solid rgba(255,255,255,.38);border-top-color:#fff;border-radius:50%;animation:app-spin .7s linear infinite}
@keyframes app-spin{to{transform:rotate(360deg)}}
.field-help{display:block;margin-top:6px;color:#718da3;font-size:10.5px;line-height:1.4}
.input-action-row{display:flex;gap:8px;align-items:stretch}.input-action-row>input{min-width:0;flex:1}.oib-lookup-btn{white-space:nowrap;padding:0 13px}.inline-note{margin-top:7px;padding:8px 10px;border-radius:8px;border:1px solid rgba(56,126,176,.22);background:rgba(8,39,65,.72);color:#80a8c3;font-size:10.5px}
.customer-segment{display:inline-flex;align-items:center;justify-content:center;min-width:43px;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.04em;border:1px solid rgba(76,153,209,.25);background:#0a3152;color:#76c6ff}
.customer-segment.segment-b2c{background:rgba(12,105,87,.22);border-color:rgba(33,181,145,.28);color:#6fe1bd}.customer-segment.segment-b2g{background:rgba(95,87,196,.22);border-color:rgba(124,115,236,.3);color:#b3adff}

/* DataTables 1.13 dark integracija */
.dataTables_wrapper{color:#9fb4c5;font-size:12px;padding:0 12px 14px}
.dataTables_wrapper .dt-top,.dataTables_wrapper .dt-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:12px 0}
.dataTables_wrapper .dt-buttons{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dataTables_wrapper .dataTables_filter{display:flex;align-items:center;gap:8px;margin-left:auto;color:#8199ad}
.dataTables_wrapper .dataTables_filter label,.dataTables_wrapper .dataTables_length label{display:flex;align-items:center;gap:8px;color:#8199ad;font-size:11.5px}
.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select{height:36px;border:1px solid rgba(58,126,176,.32)!important;border-radius:9px!important;background:#08213a!important;color:#eef8ff!important;padding:0 10px!important;outline:none!important;box-shadow:none!important}
.dataTables_wrapper .dataTables_filter input{min-width:235px;margin-left:0!important}
.dataTables_wrapper .dataTables_filter input:focus,.dataTables_wrapper .dataTables_length select:focus{border-color:#248dd0!important;box-shadow:0 0 0 3px rgba(21,156,255,.08)!important}
.dataTables_wrapper .dt-button{height:36px!important;margin:0!important;padding:0 12px!important;border-radius:9px!important;border:1px solid rgba(55,126,177,.31)!important;background:#0b3458!important;color:#75c6ff!important;font:inherit!important;font-size:11px!important;cursor:pointer!important;box-shadow:none!important}
.dataTables_wrapper .dt-button:hover{background:#0e416d!important;color:#fff!important;border-color:rgba(69,159,222,.45)!important}
.dataTables_wrapper .dataTables_info{color:#748da2!important;padding-top:0!important}
.dataTables_wrapper .dataTables_paginate{display:flex;align-items:center;gap:4px;padding-top:0!important}
.dataTables_wrapper .dataTables_paginate .paginate_button{min-width:34px!important;height:34px!important;margin:0!important;padding:7px 10px!important;border-radius:8px!important;border:1px solid rgba(55,115,159,.2)!important;background:#082640!important;color:#7da4bf!important;box-shadow:none!important}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{background:#0d3b63!important;color:#fff!important;border-color:rgba(64,151,213,.42)!important}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{background:#087bd1!important;color:#fff!important;border-color:#159cff!important}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{opacity:.38!important;cursor:default!important}
table.dataTable{margin:0!important;width:100%!important;border-collapse:collapse!important}
table.dataTable thead>tr>th,table.dataTable thead>tr>td{border-bottom:1px solid rgba(54,111,153,.30)!important;color:#86a8bf!important;background:#0d3556!important}
table.dataTable tbody>tr{background:transparent!important}table.dataTable tbody>tr:hover{background:rgba(12,52,86,.34)!important}table.dataTable tbody>tr>td{border-top:1px solid rgba(44,91,126,.20)!important;box-shadow:none!important}table.dataTable.no-footer{border-bottom:0!important}
@media(max-width:820px){.input-action-row{flex-direction:column}.oib-lookup-btn{height:38px}.dataTables_wrapper{padding:0 8px 12px}.dataTables_wrapper .dt-top,.dataTables_wrapper .dt-bottom{align-items:stretch}.dataTables_wrapper .dt-buttons,.dataTables_wrapper .dataTables_filter{width:100%;margin-left:0}.dataTables_wrapper .dataTables_filter label{width:100%}.dataTables_wrapper .dataTables_filter input{min-width:0;flex:1}.dataTables_wrapper .dt-button{flex:1 1 auto}}


/* F1 UI polish 1.1.3 · compact DataTables + mobile row actions */
@media(min-width:821px){
  /* Topbar je na desktopu namjerno prazan; zadržavamo samo mali breathing room. */
  .topbar{height:10px;min-height:10px}
  .page-head{margin-top:10px}
}

/* Kompaktniji DataTables toolbar. */
.dataTables_wrapper .dt-top{
  gap:8px;
  margin:8px 0 9px;
}
.dataTables_wrapper .dt-buttons{gap:5px}
.dataTables_wrapper .dt-button{
  height:32px!important;
  min-height:32px!important;
  padding:0 10px!important;
  border-radius:8px!important;
  font-size:10.5px!important;
}
.dataTables_wrapper .dataTables_filter{gap:6px}
.dataTables_wrapper .dataTables_filter label{gap:6px;font-size:10.5px}
.dataTables_wrapper .dataTables_filter input{
  height:32px;
  min-width:190px;
  padding:0 9px!important;
  border-radius:8px!important;
}
.dataTables_wrapper .dataTables_length select{height:32px}

/* Strelice sortiranja su sekundarni signal, ne dominantan UI element. */
table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting:after{
  opacity:.18!important;
  transform:scale(.72);
  transform-origin:center;
  right:5px!important;
}
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_desc:after{
  opacity:.58!important;
}

/* Desktop zadržava postojeće direktne akcije. */
.row-menu-btn{display:none}
.row-action-template{display:none!important}

/* Bottom sheet: generira se iz JS-a i koristi samo na touch/mobile layoutu. */
.mobile-action-sheet-backdrop{
  position:fixed;inset:0;z-index:140;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,8,16,.62);
  backdrop-filter:blur(5px);
  opacity:0;visibility:hidden;
  transition:opacity .18s ease,visibility .18s ease;
  padding:12px;
}
.mobile-action-sheet-backdrop.is-open{opacity:1;visibility:visible}
.mobile-action-sheet{
  width:min(560px,100%);
  border:1px solid rgba(72,145,196,.30);
  border-radius:18px 18px 14px 14px;
  background:linear-gradient(180deg,#0a2b48 0%,#061d33 100%);
  box-shadow:0 -22px 70px rgba(0,0,0,.38);
  transform:translateY(18px);
  transition:transform .18s ease;
  overflow:hidden;
}
.mobile-action-sheet-backdrop.is-open .mobile-action-sheet{transform:translateY(0)}
.mobile-action-sheet-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 16px 12px;
  border-bottom:1px solid rgba(73,136,180,.20);
}
.mobile-action-sheet-title{font-size:13px;font-weight:750;color:#f0f7fc}
.mobile-action-sheet-close{
  width:38px;height:38px;border-radius:10px;
  border:1px solid rgba(69,137,186,.25);
  background:#0a3456;color:#bcd7ea;
  display:grid;place-items:center;font-size:20px;line-height:1;cursor:pointer;
}
.mobile-action-sheet-body{padding:12px}
.mobile-action-sheet .sheet-actions{display:grid;gap:9px}
.mobile-action-sheet .sheet-actions a,
.mobile-action-sheet .sheet-actions button{
  width:100%;min-height:50px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  border:1px solid rgba(61,135,187,.30);
  background:#0b3b62;color:#dff2ff;
  font:inherit;font-size:14px;font-weight:650;
  text-decoration:none;cursor:pointer;
}
.mobile-action-sheet .sheet-actions form{margin:0}
.mobile-action-sheet .sheet-actions button:hover,
.mobile-action-sheet .sheet-actions a:hover{background:#0e4a79}
.mobile-action-sheet .sheet-actions form:last-child button{
  background:rgba(123,41,58,.20);
  border-color:rgba(225,89,110,.28);
  color:#ffc2cb;
}

@media(max-width:820px){
  .page-head{margin-top:8px}
  .desktop-row-actions{display:none!important}
  .row-menu-btn{
    display:inline-flex;
    align-items:center;justify-content:center;
    min-width:46px;height:42px;
    border-radius:11px;
    border:1px solid rgba(62,133,183,.30);
    background:#0b3558;color:#d9ecf8;
    font-size:21px;font-weight:800;letter-spacing:2px;
    line-height:1;cursor:pointer;
  }
  .row-menu-btn:active{transform:scale(.97)}
  .dataTables_wrapper .dt-top{gap:7px}
  .dataTables_wrapper .dt-buttons{gap:5px}
  .dataTables_wrapper .dt-button{
    flex:0 1 auto!important;
    min-width:66px;
  }
  .dataTables_wrapper .dataTables_filter input{
    min-width:0;
    width:100%;
  }
}

@media(max-width:520px){
  .page-head{margin:6px 0 12px}
  .page-head h1{font-size:30px}
  .dataTables_wrapper{padding-left:6px;padding-right:6px}
  .dataTables_wrapper .dt-buttons{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    width:100%;
  }
  .dataTables_wrapper .dt-button{
    width:100%;
    min-width:0;
    padding:0 6px!important;
  }
  .mobile-action-sheet-backdrop{padding:0}
  .mobile-action-sheet{border-radius:20px 20px 0 0}
}


/* F1 UI REPAIR 1.1.4a · katalog summary + settings + premium user menu */

/* Dashboard hero */
.hero{align-items:center}
.hero-copy{align-self:center}
.hero .primary-btn{align-self:center;margin-top:0}

/* Catalog summary cards */
.catalog-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:0 0 16px;
}
.catalog-summary-grid article{
  position:relative;
  min-height:86px;
  padding:15px 16px;
  border-radius:14px;
  border:1px solid rgba(53,125,177,.26);
  background:
    radial-gradient(180px 90px at 100% 0%,rgba(21,156,255,.10),transparent 70%),
    linear-gradient(145deg,rgba(8,42,70,.96),rgba(5,29,50,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.catalog-summary-grid article span{
  display:block;
  color:#87a1b5;
  font-size:11px;
  margin-bottom:9px;
}
.catalog-summary-grid article strong{
  display:block;
  color:#f4f9fd;
  font-size:24px;
  line-height:1;
  letter-spacing:-.04em;
}
.field-hint{
  display:block;
  margin-top:6px;
  color:#6f8ba0;
  font-size:10.5px;
  line-height:1.45;
}
.tax-quick{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}
.tax-quick button{
  min-width:48px;
  height:30px;
  padding:0 9px;
  border-radius:8px;
  border:1px solid rgba(62,131,180,.28);
  background:#0a3152;
  color:#81cdfd;
  font-size:10.5px;
  cursor:pointer;
}
.tax-quick button:hover{
  background:#0d416b;
  color:#fff;
}

/* Settings */
.settings-page-head{margin-bottom:12px}
.settings-nav{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:0 0 14px;
  padding:9px;
  border:1px solid rgba(61,125,170,.20);
  border-radius:13px;
  background:rgba(5,27,47,.92);
  backdrop-filter:blur(14px);
}
.settings-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border-radius:9px;
  color:#8da8bc;
  font-size:11.5px;
  border:1px solid transparent;
  transition:.18s ease;
}
.settings-nav a:hover{
  color:#fff;
  background:#0b3558;
  border-color:rgba(61,136,188,.24);
}
.f1-settings{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.settings-anchor{scroll-margin-top:70px}
.f1-card{
  padding:20px;
  border-radius:15px;
  border:1px solid rgba(62,126,172,.23);
  background:
    radial-gradient(420px 160px at 100% 0%,rgba(17,111,178,.08),transparent 70%),
    linear-gradient(180deg,rgba(7,32,54,.96),rgba(5,27,47,.98));
  box-shadow:0 12px 32px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.025);
}
.f1-card h2{
  margin:5px 0 5px;
  font-size:21px;
  letter-spacing:-.025em;
}
.f1-card>p,
.settings-card-head p{
  margin:0;
  color:#829aaf;
  font-size:11.8px;
  line-height:1.5;
}
.settings-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:17px;
}
.settings-state{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:0 9px;
  border-radius:999px;
  border:1px solid rgba(64,134,182,.22);
  font-size:10.5px;
  white-space:nowrap;
}
.settings-state.ok{
  color:#75efc3;
  background:rgba(23,129,101,.14);
  border-color:rgba(49,207,158,.25);
}
.settings-state.warn{
  color:#ffd18a;
  background:rgba(143,93,31,.14);
  border-color:rgba(230,158,67,.24);
}
.f1-status{
  padding:12px 14px;
  border-radius:11px;
  border:1px solid rgba(65,130,177,.23);
  font-size:11.7px;
  line-height:1.5;
}
.f1-status.warn{
  color:#ffd69a;
  background:rgba(139,91,30,.10);
  border-color:rgba(231,160,68,.24);
}
.f1-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  margin-top:16px;
}
.f1-field{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
}
.f1-field>span{
  color:#a8bccb;
  font-size:11.5px;
}
.f1-field input,
.f1-field select,
.f1-field textarea,
.payment-setting-name input{
  width:100%;
  min-width:0;
  height:42px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid #1b4a6c;
  background:#08233e;
  color:#f4f8fb;
  outline:0;
}
.f1-field textarea{height:auto;padding:11px 12px}
.f1-field input:focus,
.f1-field select:focus,
.f1-field textarea:focus,
.payment-setting-name input:focus{
  border-color:#248dd0;
  box-shadow:0 0 0 3px rgba(21,156,255,.08);
}
.f1-card input:disabled{
  cursor:not-allowed;
  opacity:.65;
  background:#0a2136;
}
.f1-note{
  margin-top:14px;
  padding:10px 12px;
  border-radius:9px;
  border:1px solid rgba(58,120,164,.17);
  background:rgba(6,33,56,.56);
  color:#7892a6;
  font-size:10.8px;
  line-height:1.5;
}
.f1-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}
.payment-settings-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:14px;
}
.payment-setting-row{
  display:grid;
  grid-template-columns:42px minmax(180px,1fr) auto auto;
  align-items:center;
  gap:13px;
  padding:11px 12px;
  border-radius:11px;
  border:1px solid rgba(56,117,162,.18);
  background:rgba(6,35,59,.62);
}
.payment-setting-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#0b3a61;
  border:1px solid rgba(69,145,196,.25);
  color:#70c9ff;
  font-weight:800;
  font-size:12px;
}
.payment-setting-name{
  display:flex;
  align-items:center;
  gap:10px;
}
.payment-setting-name>span{
  color:#748fa4;
  font-size:10.5px;
  min-width:34px;
}
.settings-switch,
.settings-radio{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#a9bdcc;
  font-size:11.5px;
  white-space:nowrap;
}
.settings-switch input,
.settings-radio input{accent-color:#159cff}
.tax-mode-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.tax-mode-card{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:13px;
  border-radius:11px;
  border:1px solid rgba(60,124,169,.20);
  background:rgba(7,38,63,.55);
  cursor:pointer;
}
.tax-mode-card:has(input:checked){
  border-color:rgba(44,157,229,.48);
  background:rgba(10,65,104,.64);
  box-shadow:0 0 0 3px rgba(21,156,255,.05);
}
.tax-mode-card input{
  margin-top:2px;
  accent-color:#159cff;
}
.tax-mode-card strong{
  display:block;
  color:#e7f1f8;
  font-size:12px;
}
.tax-mode-card small{
  display:block;
  margin-top:4px;
  color:#7f98aa;
  font-size:10.5px;
  line-height:1.4;
}
.tax-price-check{margin-top:14px}
.f1-operators{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:13px;
}
.f1-operator{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 10px;
  border-radius:9px;
  background:#092b49;
  border:1px solid rgba(59,126,173,.19);
  color:#b8cad7;
  font-size:10.8px;
}
.f1-small{
  display:block;
  color:#758ea2;
  font-size:11px;
  margin-top:10px;
}

/* Profile in settings */
.profile-card{overflow:hidden}
.profile-grid{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:16px;
  align-items:center;
  margin-top:5px;
}
.profile-avatar-large{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:18px;
  border:1px solid rgba(76,157,215,.32);
  background:linear-gradient(145deg,#15547f,#0a2948);
  color:#fff;
  font-size:22px;
  font-weight:750;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.profile-details{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.profile-details>div{
  padding:11px 12px;
  border-radius:10px;
  background:rgba(5,34,58,.58);
  border:1px solid rgba(58,123,168,.16);
}
.profile-details span{
  display:block;
  color:#718ba0;
  font-size:10px;
  margin-bottom:5px;
}
.profile-details strong{
  display:block;
  color:#e9f3f9;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Premium sidebar user menu */
.sidebar-user-wrap{
  position:relative;
}
.sidebar-user{
  width:100%;
  min-height:56px;
  border:1px solid transparent;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.sidebar-user:hover,
.sidebar-user.is-open{
  background:rgba(10,47,77,.58);
  border-color:rgba(72,143,191,.18);
}
.sidebar-user .chev{
  transition:transform .18s ease,color .18s ease;
}
.sidebar-user.is-open .chev{
  transform:rotate(-90deg);
  color:#6ac7ff;
}
.sidebar-user-menu{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(100% + 9px);
  padding:7px;
  border-radius:13px;
  border:1px solid rgba(68,139,189,.24);
  background:rgba(5,29,50,.98);
  box-shadow:0 18px 44px rgba(0,0,0,.36);
  backdrop-filter:blur(16px);
  opacity:0;
  transform:translateY(6px) scale(.985);
  transform-origin:bottom center;
  transition:opacity .16s ease,transform .16s ease;
  z-index:120;
}
.sidebar-user-menu.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
}
.sidebar-user-menu[hidden]{display:none}
.sidebar-user-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:0 10px;
  border-radius:9px;
  color:#c2d2de;
  font-size:11.8px;
  transition:.16s ease;
}
.sidebar-user-menu a svg{
  width:17px;
  height:17px;
  color:#7eabc8;
}
.sidebar-user-menu a:hover{
  background:#0b3659;
  color:#fff;
}
.sidebar-user-menu a.danger:hover{
  background:rgba(121,40,57,.18);
  color:#ffc0ca;
}
.sidebar-user-menu-divider{
  height:1px;
  margin:5px 7px;
  background:rgba(73,137,181,.16);
}

/* Clean up old logout placement */
.logout-link{display:none!important}

/* Subtle sidebar polish */
.sidebar::after{
  content:"";
  position:absolute;
  top:18px;
  right:-1px;
  bottom:18px;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(64,166,235,.28) 22%,rgba(64,166,235,.10) 78%,transparent);
  pointer-events:none;
}
.sidebar-nav a{
  position:relative;
}
.sidebar-nav a:hover:not(.active){
  transform:translateX(2px);
}
.sidebar-nav a.active::before{
  content:"";
  position:absolute;
  left:-5px;
  top:11px;
  bottom:11px;
  width:3px;
  border-radius:99px;
  background:#66c9ff;
  box-shadow:0 0 14px rgba(74,192,255,.48);
}

@media(max-width:980px){
  .catalog-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tax-mode-grid{grid-template-columns:1fr}
  .profile-details{grid-template-columns:1fr}
}
@media(max-width:820px){
  .catalog-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .settings-nav{
    position:static;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding:7px;
  }
  .settings-nav a{white-space:nowrap}
  .f1-form-grid{grid-template-columns:1fr}
  .payment-setting-row{
    grid-template-columns:40px minmax(0,1fr);
  }
  .payment-setting-row .settings-switch,
  .payment-setting-row .settings-radio{
    grid-column:2;
  }
  .profile-grid{grid-template-columns:1fr}
  .sidebar-user-menu{
    bottom:calc(100% + 8px);
  }
  .sidebar::after{display:none}
}
@media(max-width:520px){
  .catalog-summary-grid{grid-template-columns:1fr 1fr;gap:8px}
  .catalog-summary-grid article{min-height:76px;padding:12px}
  .catalog-summary-grid article strong{font-size:21px}
  .f1-card{padding:15px}
  .settings-card-head{flex-direction:column}
  .payment-setting-row{padding:10px}
}


/* F1 UI polish 1.1.4b · sidebar cleanup */
.sidebar-nav{
  overflow-y:auto;
  scrollbar-width:none!important;
  -ms-overflow-style:none;
}
.sidebar-nav::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}

.sidebar-user{
  border-radius:14px!important;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(8,43,72,.82),rgba(6,29,50,.86));
  border:1px solid rgba(71,145,194,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.sidebar-user:hover,
.sidebar-user.is-open{
  background:linear-gradient(145deg,rgba(10,55,91,.92),rgba(7,36,62,.94));
  border-color:rgba(73,161,219,.34)!important;
  box-shadow:
    0 8px 24px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.035);
}


/* F1 UI polish 1.1.4c · sidebar edge + chevron alignment */
.sidebar{
  overflow:visible;
  border-right:1px solid rgba(75,145,194,.24)!important;
}
.sidebar::after{
  right:0!important;
  width:1px!important;
  opacity:1;
  background:linear-gradient(
    180deg,
    transparent 0%,
    rgba(64,166,235,.22) 12%,
    rgba(64,166,235,.34) 34%,
    rgba(64,166,235,.16) 72%,
    transparent 100%
  )!important;
}

/* Korisnička kartica: više zraka desno i stabilan chevron */
.sidebar-user{
  grid-template-columns:40px minmax(0,1fr) 22px!important;
  padding:7px 12px 7px 8px!important;
}
.sidebar-user .chev{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  justify-self:end;
  margin-right:1px;
  transform-origin:center;
  transition:transform .18s ease,color .18s ease;
}
.sidebar-user.is-open .chev{
  transform:rotate(-90deg);
}

/* Dno sidebara neka ne "reže" desni rub kartice */
.sidebar-bottom{
  left:18px!important;
  right:18px!important;
  width:auto!important;
}
.sidebar-user-wrap{
  padding-right:1px;
}


/* F1 UI polish 1.1.4d · full-height sidebar divider */
.sidebar{
  border-right:0!important;
}
.sidebar::after{
  content:"";
  position:absolute;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:1px!important;
  background:rgba(74,145,194,.28)!important;
  opacity:1!important;
  pointer-events:none;
  z-index:3;
}


/* F1 UI polish 1.1.4e · integrated sidebar edge */
.sidebar{
  border-right:0!important;
  box-shadow:
    inset -1px 0 0 rgba(70,140,190,.20),
    12px 0 30px rgba(0,0,0,.08)!important;
}
.sidebar::after{
  display:none!important;
  content:none!important;
}


/* F1 UI polish 1.1.4f · sidebar bez tvrde desne linije */
.sidebar{
  border-right:0!important;
  box-shadow:14px 0 34px -22px rgba(0,0,0,.95)!important;
}
.sidebar::after{
  display:none!important;
  content:none!important;
}
.app-shell{
  column-gap:0!important;
}


/* F1 UI polish 1.1.4g · remove external sidebar shadow seam */
.sidebar{
  border-right:1px solid rgba(72,138,183,.10)!important;
  box-shadow:none!important;
}
.sidebar::after{
  display:none!important;
  content:none!important;
}


/* F1 UI polish 1.1.4h · vidljiv puni border nav stavki */
.sidebar-nav a{
  box-sizing:border-box!important;
  background-clip:padding-box;
}
.sidebar-nav a:hover:not(.active){
  border:1px solid rgba(89,172,230,.34)!important;
  border-right-color:rgba(105,190,246,.52)!important;
  box-shadow:
    inset -1px 0 0 rgba(119,201,255,.22),
    0 7px 20px rgba(0,0,0,.08)!important;
}
.sidebar-nav a.active{
  border:1px solid rgba(91,184,247,.46)!important;
  border-right-color:rgba(124,207,255,.72)!important;
  box-shadow:
    inset -1px 0 0 rgba(169,226,255,.26),
    0 8px 24px rgba(0,105,255,.17),
    inset 0 1px 0 rgba(255,255,255,.06)!important;
}


/* F1 UI polish 1.1.4i · puni unutarnji border hover/active kartica */
.sidebar-nav a:hover:not(.active){
  transform:none!important;
  border-color:transparent!important;
  box-shadow:
    inset 0 0 0 1px rgba(105,190,246,.42),
    0 7px 20px rgba(0,0,0,.08)!important;
}
.sidebar-nav a.active{
  border-color:transparent!important;
  box-shadow:
    inset 0 0 0 1px rgba(124,207,255,.58),
    0 8px 24px rgba(0,105,255,.17),
    inset 0 1px 0 rgba(255,255,255,.06)!important;
}


/* F1 UI polish 1.1.5 · dashboard + settings final pass */

/* Dashboard */
.hero{
  min-height:108px;
  padding:20px 24px;
  align-items:center!important;
  overflow:hidden;
}
.hero-copy{
  align-self:center!important;
}
.hero-copy h1{
  font-size:39px;
}
.hero-copy .hello{
  margin-top:6px;
  color:#eef7fd;
}
.hero .primary-btn{
  align-self:center!important;
  min-width:132px;
  box-shadow:
    0 10px 24px rgba(0,105,255,.24),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.hero .primary-btn:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}
.kpi-card{
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.kpi-card:hover{
  transform:translateY(-2px);
  border-color:rgba(75,163,222,.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 16px 34px rgba(0,0,0,.15);
}
.panel-link{
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.panel-link:hover{
  background:#0d3b63;
  border-color:rgba(72,156,217,.40);
  color:#8fd5ff;
  transform:translateY(-1px);
}
.dashboard-empty-cell{
  padding:16px 10px 8px!important;
  white-space:normal!important;
}
.dashboard-empty{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:15px 16px;
  border-radius:12px;
  border:1px dashed rgba(75,137,181,.20);
  background:rgba(6,34,57,.46);
}
.dashboard-empty-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#0a3558;
  color:#5fc8ff;
  border:1px solid rgba(69,148,201,.22);
}
.dashboard-empty-icon svg{width:21px;height:21px}
.dashboard-empty strong{
  display:block;
  font-size:12px;
  color:#dce9f2;
}
.dashboard-empty span{
  display:block;
  margin-top:4px;
  color:#7890a4;
  font-size:10.5px;
}
.dashboard-empty-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 11px;
  border-radius:8px;
  border:1px solid rgba(60,139,195,.26);
  background:#0a3153;
  color:#74c8ff;
  font-size:10.5px;
  white-space:nowrap;
}

/* Settings */
.settings-page-head{
  margin-top:8px!important;
  margin-bottom:13px;
}
.settings-page-head h1{
  letter-spacing:-.045em;
}
.settings-nav{
  padding:7px;
  gap:5px;
  border-radius:12px;
  background:rgba(5,28,49,.88);
}
.settings-nav a{
  min-height:36px;
  padding:0 13px;
  font-weight:560;
}
.settings-nav a:hover{
  background:#0a3558;
}
.f1-settings{
  gap:12px;
}
.f1-card{
  position:relative;
  overflow:hidden;
  padding:19px 20px;
  border-color:rgba(65,129,175,.20);
}
.f1-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(62,151,211,.28),transparent);
  pointer-events:none;
}
.settings-card-head{
  align-items:center;
  margin-bottom:15px;
}
.settings-card-head>div:first-child{
  min-width:0;
}
.settings-card-head h2{
  font-size:20px;
  line-height:1.05;
}
.settings-card-head p{
  max-width:720px;
}
.settings-state{
  flex:0 0 auto;
}
.f1-form-grid{
  gap:11px 13px;
  margin-top:14px;
}
.f1-field input,
.f1-field select,
.f1-field textarea,
.payment-setting-name input{
  min-height:40px;
  background:#08223b;
  border-color:rgba(39,91,128,.76);
}
.f1-field input:hover,
.f1-field select:hover,
.f1-field textarea:hover,
.payment-setting-name input:hover{
  border-color:rgba(63,130,177,.86);
}
.f1-field>span{
  color:#94aabd;
}
.f1-note{
  margin-top:12px;
}
.payment-settings-list{
  gap:7px;
}
.payment-setting-row{
  min-height:62px;
  padding:9px 11px;
  transition:background .16s ease,border-color .16s ease;
}
.payment-setting-row:hover{
  background:rgba(8,43,72,.72);
  border-color:rgba(68,137,185,.25);
}
.tax-mode-grid{
  gap:8px;
}
.tax-mode-card{
  min-height:78px;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.tax-mode-card:hover{
  transform:translateY(-1px);
  border-color:rgba(68,143,195,.30);
}
.f1-operators{
  gap:6px;
}
.f1-operator{
  min-height:30px;
  border-radius:8px;
}
.profile-grid{
  margin-top:2px;
}
.profile-details>div{
  min-height:62px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Section accent dot based on settings section */
.f1-card[data-section] .catalog-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.f1-card[data-section] .catalog-eyebrow::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#3dbbff;
  box-shadow:0 0 10px rgba(61,187,255,.34);
}
.f1-card[data-section="payments"] .catalog-eyebrow::before{background:#38d3a0}
.f1-card[data-section="tax"] .catalog-eyebrow::before{background:#8c91ff}
.f1-card[data-section="operators"] .catalog-eyebrow::before{background:#67c7ff}
.f1-card[data-section="production"] .catalog-eyebrow::before{background:#f0b763}

/* Better visual rhythm on large screens */
@media(min-width:1180px){
  .f1-card{
    padding:20px 22px;
  }
  .settings-nav{
    width:max-content;
    max-width:100%;
  }
}

@media(max-width:820px){
  .hero{
    padding:18px;
    gap:14px;
  }
  .hero .primary-btn{
    width:100%;
  }
  .dashboard-empty{
    grid-template-columns:42px minmax(0,1fr);
  }
  .dashboard-empty-action{
    grid-column:1/-1;
    width:100%;
  }
  .settings-card-head{
    align-items:flex-start;
  }
}

@media(max-width:520px){
  .hero-copy h1{font-size:32px}
  .f1-card{padding:15px}
}


/* F1 UI polish 1.1.6 · tables + lists final pass */

/* Table panel rhythm */
.panel .table-wrap,
.catalog-list .table-wrap{
  border-radius:0 0 13px 13px;
}
table.dataTable,
.catalog-table{
  font-variant-numeric:tabular-nums;
}
table.dataTable thead>tr>th,
table.dataTable thead>tr>td,
.catalog-table thead th{
  height:40px;
  padding-top:9px!important;
  padding-bottom:9px!important;
  vertical-align:middle;
}
table.dataTable tbody>tr>td,
.catalog-table tbody td{
  min-height:44px;
  vertical-align:middle;
}

/* Softer zebra + clearer hover */
table.dataTable tbody>tr:nth-child(even),
.catalog-table tbody>tr:nth-child(even){
  background:rgba(5,31,52,.20)!important;
}
table.dataTable tbody>tr:hover,
.catalog-table tbody>tr:hover{
  background:rgba(14,57,91,.44)!important;
}
table.dataTable tbody>tr:hover>td,
.catalog-table tbody>tr:hover>td{
  border-top-color:rgba(68,132,177,.28)!important;
}

/* Primary text in tables */
table.dataTable tbody td strong,
.catalog-table tbody td strong{
  color:#edf6fb;
  font-weight:650;
}
table.dataTable tbody td .table-note,
.catalog-table tbody td .table-note{
  color:#718da2;
}

/* Action column */
table.dataTable th:last-child,
table.dataTable td:last-child,
.catalog-table th:last-child,
.catalog-table td:last-child{
  min-width:118px;
}
.row-actions{
  justify-content:flex-end;
}
.row-actions a,
.row-actions button{
  min-height:30px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.row-actions a:hover,
.row-actions button:hover{
  background:#0d416b;
  border-color:rgba(74,158,218,.40);
  color:#a7dcff;
  transform:translateY(-1px);
}

/* DataTables top toolbar – compact single visual band */
.dataTables_wrapper .dt-top{
  min-height:38px;
  margin:7px 0 10px;
  padding:0;
}
.dataTables_wrapper .dt-buttons{
  align-items:center;
}
.dataTables_wrapper .dataTables_filter{
  align-items:center;
}
.dataTables_wrapper .dataTables_filter label{
  color:#7892a6;
}
.dataTables_wrapper .dt-button{
  background:rgba(9,48,80,.92)!important;
}
.dataTables_wrapper .dataTables_filter input{
  background:rgba(7,34,57,.92)!important;
}

/* Bottom info / paging becomes quieter */
.dataTables_wrapper .dt-bottom{
  margin:10px 0 0;
  padding-top:10px;
  border-top:1px solid rgba(55,111,151,.15);
}
.dataTables_wrapper .dataTables_info{
  font-size:10.5px;
  color:#6f879b!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  min-width:32px!important;
  height:32px!important;
  line-height:16px!important;
}

/* Empty state inside DataTables */
table.dataTable td.dataTables_empty,
.dt-container .dt-empty{
  padding:34px 14px!important;
  color:#7790a4!important;
  text-align:center!important;
  background:
    radial-gradient(260px 70px at 50% 50%,rgba(20,102,160,.07),transparent 75%);
}
table.dataTable td.dataTables_empty::before,
.dt-container .dt-empty::before{
  content:"—";
  display:block;
  margin:0 auto 7px;
  color:#3f6f90;
  font-size:22px;
  line-height:1;
}

/* Status pills slightly cleaner */
.catalog-status,
.badge,
.customer-segment{
  white-space:nowrap;
}
.catalog-status,
.badge{
  min-height:25px;
}

/* Prevent dense text columns from colliding */
table.dataTable td,
table.dataTable th{
  max-width:420px;
}
table.dataTable td:not(:last-child){
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Mobile: keep controls touch friendly and action menu prominent */
@media(max-width:820px){
  .dataTables_wrapper .dt-top{
    gap:8px;
  }
  .dataTables_wrapper .dt-buttons{
    order:1;
  }
  .dataTables_wrapper .dataTables_filter{
    order:2;
  }
  .dataTables_wrapper .dt-bottom{
    gap:9px;
  }
  table.dataTable th:last-child,
  table.dataTable td:last-child,
  .catalog-table th:last-child,
  .catalog-table td:last-child{
    min-width:62px;
    width:62px;
  }
  .row-menu-btn{
    width:48px;
    min-width:48px;
  }
}

@media(max-width:520px){
  .dataTables_wrapper .dt-top{
    margin-top:5px;
  }
  .dataTables_wrapper .dt-bottom{
    flex-direction:column;
    align-items:stretch;
  }
  .dataTables_wrapper .dataTables_info{
    text-align:center;
  }
  .dataTables_wrapper .dataTables_paginate{
    justify-content:center;
  }
}


/* F1 UI polish 1.1.7 · mobile forms + sticky primary actions */

/* Forms: clearer mobile rhythm */
.catalog-editor form,
.f1-settings form{
  position:relative;
}
.catalog-editor .actions,
.f1-actions{
  z-index:12;
}

/* Touch targets */
@media(max-width:820px){
  .catalog-form .field input,
  .catalog-form .field select,
  .catalog-form .field textarea,
  .f1-field input,
  .f1-field select,
  .f1-field textarea,
  .payment-setting-name input{
    min-height:46px;
    font-size:16px; /* sprječava iOS zoom */
  }

  .catalog-check,
  .settings-switch,
  .settings-radio,
  .tax-mode-card{
    min-height:44px;
  }

  .catalog-editor .actions{
    position:sticky;
    bottom:0;
    display:grid;
    grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
    gap:8px;
    margin:18px -14px -14px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:
      linear-gradient(180deg,rgba(4,24,42,.05),rgba(4,24,42,.95) 24%,#04182a 100%);
    border-top:1px solid rgba(69,130,174,.20);
    backdrop-filter:blur(14px);
  }

  .catalog-editor .actions .primary-btn,
  .catalog-editor .actions .secondary-app-btn{
    width:100%;
    min-height:48px;
  }

  /* Settings forme dobijaju sticky Save samo unutar aktivne forme. */
  .f1-settings form .f1-actions{
    position:sticky;
    bottom:0;
    margin:14px -1px -1px;
    padding:9px 10px calc(9px + env(safe-area-inset-bottom));
    border-radius:0 0 13px 13px;
    background:
      linear-gradient(180deg,rgba(5,28,49,.05),rgba(5,28,49,.96) 28%,#051c31 100%);
    border-top:1px solid rgba(67,128,171,.18);
    backdrop-filter:blur(14px);
  }

  .f1-settings form .f1-actions .primary-btn{
    width:100%;
    min-height:48px;
  }

  .field label,
  .f1-field>span{
    font-size:12px;
  }

  .field-help,
  .field-hint{
    font-size:11px;
    line-height:1.45;
  }

  .input-action-row{
    gap:7px;
  }

  .oib-lookup-btn{
    min-height:44px;
  }
}

/* Narrow phones: stack form actions and preserve dominant primary action */
@media(max-width:520px){
  .catalog-editor .actions{
    grid-template-columns:1fr;
  }

  .catalog-editor .actions .primary-btn{
    order:1;
  }

  .catalog-editor .actions .secondary-app-btn{
    order:2;
    min-height:44px;
    background:transparent;
  }

  .catalog-editor-head{
    gap:10px;
  }

  .catalog-editor-head .panel-link{
    min-height:40px;
    display:inline-flex;
    align-items:center;
  }

  .f1-form-grid{
    gap:11px;
  }

  .payment-setting-row{
    gap:9px;
  }

  .tax-mode-card{
    padding:12px;
  }
}

/* Make sticky zones feel native instead of floating over content */
@supports(padding:max(0px)){
  @media(max-width:820px){
    .catalog-editor .actions{
      padding-bottom:max(10px, env(safe-area-inset-bottom));
    }
    .f1-settings form .f1-actions{
      padding-bottom:max(9px, env(safe-area-inset-bottom));
    }
  }
}

/* F1 ARTIKLI 1.1.8 · unified products + services */
.article-tabs{
  display:flex;
  align-items:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  margin:0 0 14px;
  padding:6px;
  border:1px solid rgba(66,130,176,.20);
  border-radius:12px;
  background:rgba(5,29,50,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.article-tabs a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:35px;
  padding:0 13px;
  border:1px solid transparent;
  border-radius:8px;
  color:#8199ac;
  font-size:11px;
  font-weight:650;
  text-decoration:none;
  transition:.16s ease;
}
.article-tabs a:hover{
  color:#dbeaf4;
  background:#092f50;
}
.article-tabs a.active{
  color:#eef8ff;
  border-color:rgba(79,168,228,.32);
  background:linear-gradient(180deg,#0d4776,#0a385f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 7px 18px rgba(0,0,0,.10);
}
.article-tabs a span{
  display:grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#7895aa;
  font-size:9px;
  font-variant-numeric:tabular-nums;
}
.article-tabs a.active span{color:#a9ddff;background:rgba(87,185,247,.12)}

.article-type-block{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:18px;
  align-items:center;
  margin:0 0 17px;
  padding:14px;
  border:1px solid rgba(65,130,175,.18);
  border-radius:12px;
  background:rgba(5,31,53,.55);
}
.article-type-copy>span{
  display:block;
  color:#dfeef7;
  font-size:12px;
  font-weight:680;
}
.article-type-copy small{
  display:block;
  margin-top:4px;
  color:#728ca0;
  font-size:10px;
  line-height:1.4;
}
.article-type-selector{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.article-type-selector label{position:relative;cursor:pointer}
.article-type-selector input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.article-type-selector label>span{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:62px;
  padding:10px 13px;
  border:1px solid rgba(56,116,158,.26);
  border-radius:10px;
  background:#071f36;
  transition:.17s ease;
}
.article-type-selector label:hover>span{
  border-color:rgba(77,157,213,.42);
  background:#092844;
}
.article-type-selector input:checked+span{
  border-color:rgba(72,176,242,.62);
  background:linear-gradient(180deg,rgba(10,66,108,.95),rgba(7,48,81,.95));
  box-shadow:inset 0 0 0 1px rgba(105,199,255,.10),0 8px 22px rgba(0,0,0,.12);
}
.article-type-selector b{
  color:#edf8ff;
  font-size:12px;
  font-weight:700;
}
.article-type-selector small{
  margin-top:3px;
  color:#738fa4;
  font-size:9.5px;
}
.article-type-selector input:checked+span small{color:#9abbd0}
.article-type-selector.is-locked{opacity:.82}
.article-type-selector.is-locked label{cursor:default}

.article-type-badge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  border:1px solid rgba(69,137,184,.24);
  border-radius:999px;
  font-size:9px;
  font-weight:720;
  letter-spacing:.02em;
  white-space:nowrap;
}
.article-type-badge.product{
  color:#70caff;
  background:rgba(13,91,141,.16);
  border-color:rgba(62,161,222,.30);
}
.article-type-badge.service{
  color:#7fe0b7;
  background:rgba(25,126,94,.14);
  border-color:rgba(65,190,144,.27);
}
.article-list-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.article-list-count{
  color:#6f8ba0;
  font-size:10px;
  font-variant-numeric:tabular-nums;
}
[data-product-only][hidden]{display:none!important}

@media(max-width:820px){
  .article-tabs{width:100%;overflow-x:auto;scrollbar-width:none}
  .article-tabs::-webkit-scrollbar{display:none}
  .article-tabs a{flex:1;min-width:max-content}
  .article-type-block{grid-template-columns:1fr;gap:10px}
  .article-type-selector label>span{min-height:58px}
}
@media(max-width:520px){
  .article-type-selector{grid-template-columns:1fr}
  .article-tabs{padding:5px}
  .article-tabs a{padding:0 10px}
}


/* F1 1.2.0 · Novi račun + lokalno izdavanje */
.invoice-page-head,
.invoice-list-head{
  align-items:flex-end;
}
.invoice-head-badges{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.catalog-status.warning{
  color:#e9b85f;
  border-color:rgba(227,167,66,.24);
  background:rgba(94,62,14,.22);
}
.form-alert{
  display:flex;
  gap:8px 14px;
  align-items:center;
  flex-wrap:wrap;
  margin:0 0 12px;
  padding:11px 13px;
  border-radius:11px;
  font-size:12px;
  border:1px solid rgba(63,128,174,.22);
  background:#07243e;
}
.form-alert strong{color:#edf7fd}
.form-alert span{color:#90a8ba}
.form-alert ul{margin:0;padding-left:18px;color:#d6e5ee}
.form-alert.error{
  border-color:rgba(226,87,87,.28);
  background:rgba(83,24,30,.32);
}
.form-alert.success{
  border-color:rgba(56,192,139,.23);
  background:rgba(17,74,57,.28);
}
.invoice-builder{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:13px;
  align-items:start;
}
.invoice-builder-main{
  display:grid;
  gap:12px;
  min-width:0;
}
.invoice-summary-column{
  position:sticky;
  top:14px;
}
.invoice-summary-card h2{
  margin:5px 0 16px;
}
.invoice-meta-grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(145px,.65fr) minmax(145px,.65fr);
  gap:11px;
}
.invoice-number-preview{
  min-width:190px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(7,37,62,.74);
  border:1px solid rgba(59,119,162,.18);
  text-align:right;
}
.invoice-number-preview small,
.invoice-number-preview span{
  display:block;
  color:#708ca1;
  font-size:10px;
}
.invoice-number-preview strong{
  display:block;
  margin:3px 0;
  color:#dcecf5;
  font-size:11px;
}
.invoice-item-picker{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  margin:2px 0 12px;
}
.invoice-search-wrap{
  position:relative;
}
.invoice-search-wrap>svg{
  position:absolute;
  left:12px;
  top:50%;
  width:17px;
  height:17px;
  transform:translateY(-50%);
  fill:none;
  stroke:#62869f;
  stroke-width:1.8;
  z-index:2;
  pointer-events:none;
}
.invoice-search-wrap>input{
  width:100%;
  min-height:42px;
  padding:0 13px 0 38px;
  border-radius:10px;
  color:#e8f3f9;
  background:#07233b;
  border:1px solid rgba(50,106,145,.70);
  outline:none;
}
.invoice-search-wrap>input:focus{
  border-color:rgba(75,167,228,.72);
  box-shadow:0 0 0 3px rgba(33,128,194,.08);
}
.invoice-search-results{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  z-index:50;
  max-height:382px;
  overflow:auto;
  padding:6px;
  border-radius:12px;
  background:#061e34;
  border:1px solid rgba(63,132,180,.28);
  box-shadow:0 18px 42px rgba(0,0,0,.36);
}
.invoice-search-result{
  width:100%;
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:9px 10px;
  border:0;
  border-radius:9px;
  text-align:left;
  color:#dcecf5;
  background:transparent;
  cursor:pointer;
}
.invoice-search-result:hover{background:#0a365a}
.invoice-search-result span:nth-child(2){min-width:0}
.invoice-search-result strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11.5px;
}
.invoice-search-result small{
  display:block;
  margin-top:3px;
  color:#6f8ca1;
  font-size:9.5px;
}
.invoice-search-result b{
  color:#9bd9ff;
  font-size:11px;
  white-space:nowrap;
}
.invoice-search-none{
  padding:18px;
  text-align:center;
  color:#728da1;
  font-size:11px;
}
.invoice-type-pill{
  width:27px;
  height:27px;
  display:inline-grid;
  place-items:center;
  border-radius:8px;
  font-size:9px;
  font-weight:800;
  color:#75cfff;
  background:#0b3a5f;
  border:1px solid rgba(63,147,203,.24);
}
.invoice-type-pill.product{
  color:#6fe1b6;
  background:rgba(13,72,57,.60);
  border-color:rgba(62,184,137,.22);
}
.invoice-browse-btn{
  min-height:42px;
  white-space:nowrap;
}
.invoice-items-table{
  overflow:hidden;
  border-radius:11px;
  border:1px solid rgba(49,105,145,.20);
}
.invoice-items-head,
.invoice-item-row{
  display:grid;
  grid-template-columns:minmax(210px,1.7fr) 88px 100px 86px 76px 105px 34px;
  gap:8px;
  align-items:center;
}
.invoice-items-head{
  min-height:37px;
  padding:0 10px;
  color:#6f899d;
  background:rgba(5,28,47,.80);
  border-bottom:1px solid rgba(49,105,145,.16);
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.045em;
}
.invoice-item-row{
  min-height:59px;
  padding:8px 10px;
  border-bottom:1px solid rgba(46,99,138,.14);
  background:rgba(6,31,52,.30);
}
.invoice-item-row:last-child{border-bottom:0}
.invoice-item-row:hover{background:rgba(9,43,71,.52)}
.invoice-item-name{
  display:flex;
  gap:9px;
  align-items:center;
  min-width:0;
}
.invoice-item-name>div{min-width:0}
.invoice-item-name strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#e3eef5;
  font-size:11px;
}
.invoice-item-name small{
  display:block;
  margin-top:3px;
  color:#69869a;
  font-size:9px;
}
.invoice-item-row input{
  width:100%;
  min-width:0;
  height:34px;
  padding:0 7px;
  border-radius:8px;
  color:#dcecf5;
  background:#061e34;
  border:1px solid rgba(49,105,145,.46);
  outline:none;
  font-size:11px;
  text-align:right;
}
.invoice-item-row input:focus{border-color:#3389c2}
.invoice-mobile-label>span{display:none}
.invoice-line-total{
  text-align:right;
  color:#e8f4fa;
  font-weight:700;
  font-size:11px;
  white-space:nowrap;
}
.invoice-remove{
  width:30px;
  height:30px;
  border:1px solid transparent;
  border-radius:8px;
  color:#6d8799;
  background:transparent;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.invoice-remove:hover{
  color:#ff8c92;
  background:rgba(121,31,39,.24);
  border-color:rgba(213,74,84,.18);
}
.invoice-items-empty{
  padding:32px 20px;
  text-align:center;
  background:
    radial-gradient(280px 100px at 50% 50%,rgba(24,104,159,.08),transparent 76%);
}
.invoice-empty-icon{
  width:36px;
  height:36px;
  margin:0 auto 8px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:#58bdf7;
  background:#092f50;
  border:1px solid rgba(66,146,199,.20);
  font-size:19px;
}
.invoice-items-empty strong{
  display:block;
  color:#cddde7;
  font-size:11.5px;
}
.invoice-items-empty span{
  display:block;
  margin-top:4px;
  color:#6d879a;
  font-size:10px;
}
.invoice-item-count{
  color:#7a96aa;
  font-size:10px;
}
.invoice-payment-field{
  margin-top:12px;
}
.invoice-totals{
  margin:16px 0 13px;
  border-top:1px solid rgba(55,112,152,.17);
  border-bottom:1px solid rgba(55,112,152,.17);
}
.invoice-totals>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  min-height:36px;
  color:#7891a4;
  font-size:11px;
}
.invoice-totals strong{
  color:#d6e7f0;
  font-size:11.5px;
}
.invoice-total-main{
  min-height:58px!important;
  margin-top:4px;
  border-top:1px solid rgba(55,112,152,.17);
}
.invoice-total-main span{
  color:#a8bac7;
  font-weight:650;
}
.invoice-total-main strong{
  color:#fff;
  font-size:23px;
  letter-spacing:-.035em;
}
.invoice-local-note{
  padding:10px 11px;
  border-radius:9px;
  background:rgba(85,58,15,.18);
  border:1px solid rgba(208,154,61,.16);
}
.invoice-local-note strong{
  display:block;
  color:#e0b25f;
  font-size:10px;
}
.invoice-local-note span{
  display:block;
  margin-top:4px;
  color:#8f846f;
  font-size:9.5px;
  line-height:1.4;
}
.invoice-actions{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:8px;
  margin-top:13px;
}
.invoice-actions>*{
  min-height:44px;
}
.invoice-list-head .primary-btn{
  align-self:center;
}
.invoice-list-panel .table-note{
  display:block;
  margin-top:2px;
}
.invoice-list-panel table td{
  vertical-align:middle;
}

@media(max-width:1120px){
  .invoice-builder{
    grid-template-columns:1fr;
  }
  .invoice-summary-column{
    position:static;
  }
  .invoice-summary-card{
    display:grid;
    grid-template-columns:minmax(190px,.8fr) minmax(260px,1.2fr);
    gap:0 22px;
    align-items:start;
  }
  .invoice-summary-card>.catalog-eyebrow,
  .invoice-summary-card>h2{
    grid-column:1/-1;
  }
  .invoice-payment-field,
  .invoice-local-note{
    grid-column:1;
  }
  .invoice-totals{
    grid-column:2;
    grid-row:3/6;
    margin-top:12px;
  }
  .invoice-actions{
    grid-column:1/-1;
  }
}

@media(max-width:820px){
  .invoice-page-head,
  .invoice-list-head{
    align-items:flex-start;
  }
  .invoice-head-badges{
    justify-content:flex-start;
  }
  .invoice-meta-grid{
    grid-template-columns:1fr 1fr;
  }
  .invoice-customer-field{
    grid-column:1/-1;
  }
  .invoice-number-preview{
    display:none;
  }
  .invoice-item-picker{
    grid-template-columns:1fr;
  }
  .invoice-items-head{
    display:none;
  }
  .invoice-item-row{
    grid-template-columns:1fr 1fr;
    gap:9px;
    padding:12px;
  }
  .invoice-item-name{
    grid-column:1/-1;
  }
  .invoice-mobile-label{
    display:block;
  }
  .invoice-mobile-label>span{
    display:block;
    margin-bottom:5px;
    color:#738da1;
    font-size:9px;
    text-transform:uppercase;
  }
  .invoice-item-row input{
    height:42px;
    font-size:16px;
  }
  .invoice-line-total{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    min-height:42px;
    font-size:14px;
  }
  .invoice-remove{
    position:absolute;
    right:10px;
    top:10px;
  }
  .invoice-item-row{
    position:relative;
  }
  .invoice-item-name{
    padding-right:35px;
  }
  .invoice-summary-card{
    display:block;
  }
  .invoice-actions{
    position:sticky;
    bottom:0;
    z-index:20;
    margin:14px -20px -20px;
    padding:10px 20px calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(5,28,49,.04),rgba(5,28,49,.97) 26%,#051c31 100%);
    border-top:1px solid rgba(65,128,172,.18);
    backdrop-filter:blur(14px);
  }
}

@media(max-width:520px){
  .invoice-meta-grid{
    grid-template-columns:1fr;
  }
  .invoice-customer-field{
    grid-column:auto;
  }
  .invoice-head-badges{
    width:100%;
  }
  .invoice-actions{
    grid-template-columns:1fr;
  }
  .invoice-issue-btn{order:1}
  .invoice-draft-btn{order:2}
}


/* F1 1.2.1 · draft edit, searchable buyer, HR dates, premium mobile invoice item */
.invoice-customer-picker{
  position:relative;
}
.invoice-customer-picker>input[type="search"]{
  width:100%;
  min-height:40px;
  padding:0 36px 0 12px;
  border-radius:9px;
  color:#e4f0f7;
  background:#08223b;
  border:1px solid rgba(39,91,128,.76);
  outline:none;
}
.invoice-customer-picker>input[type="search"]:focus{
  border-color:rgba(68,151,207,.72);
  box-shadow:0 0 0 3px rgba(40,139,205,.08);
}
.invoice-customer-results{
  position:absolute;
  z-index:70;
  left:0;right:0;
  top:calc(100% + 6px);
  max-height:330px;
  overflow:auto;
  padding:6px;
  border-radius:11px;
  background:#061e34;
  border:1px solid rgba(65,135,181,.30);
  box-shadow:0 18px 42px rgba(0,0,0,.38);
}
.invoice-customer-option{
  width:100%;
  display:block;
  padding:9px 10px;
  text-align:left;
  color:#ddecf5;
  border:0;
  border-radius:8px;
  background:transparent;
  cursor:pointer;
}
.invoice-customer-option:hover{background:#0a365a}
.invoice-customer-option strong{
  display:block;
  font-size:11.5px;
}
.invoice-customer-option small{
  display:block;
  margin-top:3px;
  color:#708ca1;
  font-size:9.5px;
}
.invoice-search-result{
  grid-template-columns:minmax(0,1fr) auto!important;
}
.invoice-search-result>span:first-child{
  min-width:0;
}
.invoice-items-head,
.invoice-item-row{
  grid-template-columns:minmax(210px,1.7fr) 92px 104px 92px 84px 110px 34px;
}
.invoice-number-control{
  position:relative;
}
.invoice-number-control>b{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  color:#6e8ca1;
  font-size:10px;
  font-weight:700;
  pointer-events:none;
}
.invoice-number-control:has(>b) input{
  padding-right:24px!important;
}
.invoice-line-total>span{
  display:none;
}
.danger-row-action{
  color:#ffadb7!important;
}
.invoice-row-cancelled{
  opacity:.62;
}
.invoice-row-cancelled td strong{
  text-decoration:line-through;
  text-decoration-color:rgba(159,178,192,.55);
}

/* Mobile: invoice item becomes a premium card */
@media(max-width:820px){
  .invoice-customer-picker>input[type="search"]{
    min-height:46px;
    font-size:16px;
  }

  .invoice-item-row{
    display:grid;
    grid-template-columns:1fr 1fr!important;
    gap:10px;
    margin:10px;
    min-height:0;
    padding:14px!important;
    border:1px solid rgba(62,132,181,.22)!important;
    border-radius:14px;
    background:
      radial-gradient(320px 130px at 100% 0%,rgba(26,120,186,.09),transparent 72%),
      linear-gradient(180deg,rgba(8,43,72,.94),rgba(5,31,53,.94))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 12px 30px rgba(0,0,0,.12);
  }
  .invoice-item-row:last-child{
    border-bottom:1px solid rgba(62,132,181,.22)!important;
  }
  .invoice-item-name{
    grid-column:1/-1;
    display:block!important;
    padding:0 36px 10px 0!important;
    border-bottom:1px solid rgba(65,123,165,.16);
  }
  .invoice-item-name strong{
    font-size:13px!important;
    white-space:normal!important;
    line-height:1.25;
  }
  .invoice-item-name small{
    margin-top:5px!important;
    font-size:9.5px!important;
    letter-spacing:.015em;
  }
  .invoice-mobile-label{
    display:block;
    padding:9px 10px 10px;
    border-radius:10px;
    background:rgba(4,27,47,.58);
    border:1px solid rgba(53,111,151,.18);
  }
  .invoice-mobile-label>span{
    display:block!important;
    margin:0 0 6px!important;
    color:#6f8da2!important;
    font-size:8.5px!important;
    font-weight:750;
    letter-spacing:.075em;
    text-transform:uppercase;
  }
  .invoice-number-control input{
    height:34px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#f0f7fb!important;
    box-shadow:none!important;
    font-size:20px!important;
    font-weight:720;
    letter-spacing:-.02em;
    text-align:left!important;
  }
  .invoice-number-control>b{
    right:0;
    color:#6d8ba0;
    font-size:11px;
  }
  .invoice-number-control:has(>b) input{
    padding-right:20px!important;
  }
  .invoice-line-total{
    grid-column:1/-1;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:54px!important;
    margin-top:2px;
    padding:0 11px;
    border-radius:11px;
    background:linear-gradient(135deg,rgba(5,67,110,.60),rgba(7,48,80,.52));
    border:1px solid rgba(70,154,210,.20);
  }
  .invoice-line-total>span{
    display:block;
    color:#7d9aae;
    font-size:9px;
    font-weight:750;
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .invoice-line-total>strong{
    color:#fff;
    font-size:20px;
    letter-spacing:-.03em;
  }
  .invoice-remove{
    top:12px!important;
    right:12px!important;
    width:32px!important;
    height:32px!important;
    border:1px solid rgba(69,133,177,.20)!important;
    background:rgba(5,29,49,.72)!important;
  }
  .invoice-items-table{
    background:rgba(3,24,42,.32);
  }
}

@media(max-width:520px){
  .invoice-item-row{
    grid-template-columns:1fr 1fr!important;
    gap:8px;
    margin:8px;
    padding:12px!important;
  }
  .invoice-mobile-label{
    padding:8px 9px 9px;
  }
  .invoice-number-control input{
    font-size:18px!important;
  }
}


/* F1 1.2.2 · dropdown stacking, date picker, hidden cancelled invoices */
.invoice-meta-card{
  overflow:visible!important;
  position:relative;
  z-index:40;
}
.invoice-items-card{
  position:relative;
  z-index:1;
}
.invoice-customer-results{
  z-index:120!important;
}
.invoice-date-control{
  position:relative;
}
.invoice-date-control>input[type="text"]{
  width:100%;
  padding-right:44px!important;
}
.invoice-date-picker{
  position:absolute;
  right:1px;
  top:1px;
  bottom:1px;
  width:42px;
  display:grid;
  place-items:center;
  border-left:1px solid rgba(52,109,149,.30);
  border-radius:0 8px 8px 0;
  color:#6eaed7;
  background:rgba(7,39,65,.72);
  overflow:hidden;
  cursor:pointer;
}
.invoice-date-picker svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  pointer-events:none;
}
.invoice-native-date{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  cursor:pointer!important;
  border:0!important;
  padding:0!important;
}
.invoice-list-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.invoice-list-head-actions .secondary-app-btn,
.invoice-list-head-actions .primary-btn{
  min-height:38px;
}
.invoice-row-cancelled{
  opacity:.72!important;
}
.invoice-row-cancelled:hover{
  opacity:.90!important;
}

@media(max-width:820px){
  .invoice-meta-card{
    z-index:55;
  }
  .invoice-list-head-actions{
    width:100%;
    justify-content:flex-start;
  }
  .invoice-list-head-actions>a{
    flex:1 1 auto;
    justify-content:center;
  }
  .invoice-date-control>input[type="text"]{
    padding-right:48px!important;
  }
  .invoice-date-picker{
    width:46px;
  }
}


/* F1 1.3.0 · released pre-fiscal number */
.invoice-row-cancelled td:first-child strong{
  color:#92a7b6;
}
.invoice-row-cancelled td:first-child .table-note{
  text-decoration:none!important;
  color:#667f92;
}


/* F1 workflow fix 1.3.1 */
.catalog-status.ready{
  color:#86cfff;
  border-color:rgba(74,166,226,.28);
  background:rgba(18,75,113,.34);
}


/* F1 dashboard consistency 1.3.2 */
.panel .table-note{
  display:block;
  margin-top:2px;
  color:#6f8ba0;
  font-size:9.5px;
}
.panel table td strong{
  color:#eef7fc;
}


/* F1 API integration 1.4.0 */
.f1-send-action{
  color:#8ed9ff!important;
  border-color:rgba(72,165,226,.34)!important;
  background:rgba(12,68,106,.50)!important;
}
.f1-send-action:hover{
  color:#dff5ff!important;
  background:rgba(15,87,137,.70)!important;
}
.f1-send-action:disabled,
.row-actions button:disabled,
.sheet-actions button:disabled{
  opacity:.42;
  cursor:not-allowed!important;
  transform:none!important;
}


/* F1 central API + tenant operators · 1.5.0 */
.f1-operator-settings-list{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.f1-operator-setting-row{
  display:grid;
  grid-template-columns:minmax(220px,1.35fr) minmax(220px,1fr) auto auto;
  gap:14px;
  align-items:center;
  padding:13px 14px;
  border:1px solid rgba(62,124,166,.20);
  border-radius:12px;
  background:rgba(5,31,53,.46);
}
.f1-operator-user{
  min-width:0;
}
.f1-operator-user strong{
  display:block;
  color:#ecf6fc;
  font-size:12px;
}
.f1-operator-user small{
  display:block;
  margin-top:4px;
  color:#6f8ba0;
  font-size:9.5px;
}
.f1-operator-oib{
  margin:0!important;
}
@media(max-width:980px){
  .f1-operator-setting-row{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:620px){
  .f1-operator-setting-row{
    grid-template-columns:1fr;
    gap:10px;
  }
}


/* F1 invoice detail / tax / print controls · 1.6.0 */
.invoice-number-link{
  color:#eef7fc;
  text-decoration:none;
}
.invoice-number-link:hover{
  color:#76caff;
}
.invoice-number-link.muted{
  color:#7890a1;
}
.invoice-detail-head{
  align-items:flex-start;
}
.invoice-detail-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.invoice-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}
.detail-kv-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.detail-kv-grid>div{
  padding:10px 11px;
  border:1px solid rgba(62,126,169,.18);
  border-radius:10px;
  background:rgba(5,31,53,.45);
  min-width:0;
}
.detail-kv-grid span{
  display:block;
  margin-bottom:5px;
  color:#708da2;
  font-size:8.5px;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.detail-kv-grid strong{
  display:block;
  color:#eef7fc;
  font-size:11.5px;
  overflow-wrap:anywhere;
}
.detail-kv-grid small{
  display:block;
  margin-top:3px;
  color:#7892a5;
  font-size:9.5px;
}
.detail-muted{
  color:#7691a4;
}
.invoice-detail-items{
  margin-bottom:14px;
}
.invoice-detail-table{
  width:100%;
  border-collapse:collapse;
}
.invoice-detail-table th{
  padding:11px 10px;
  color:#78a4c2;
  font-size:9.5px;
  text-align:left;
  background:#103b5c;
}
.invoice-detail-table td{
  padding:11px 10px;
  border-bottom:1px solid rgba(69,123,160,.15);
  color:#cfe0ea;
}
.invoice-detail-bottom{
  align-items:stretch;
}
.tax-breakdown-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.tax-breakdown-list>div{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 10px;
  padding:10px 11px;
  border-radius:10px;
  background:rgba(5,31,53,.45);
  border:1px solid rgba(62,126,169,.18);
}
.tax-breakdown-list small{
  grid-column:1/-1;
  color:#7390a4;
}
.invoice-detail-total-card{
  display:flex;
  flex-direction:column;
}
.invoice-detail-total-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:9px 0;
  border-bottom:1px solid rgba(65,122,160,.14);
}
.invoice-detail-total-row.grand{
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid rgba(61,147,207,.28);
  border-bottom:0;
  font-size:18px;
}
.invoice-fiscal-card{
  margin-bottom:14px;
}
.mono-value{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:10px!important;
}
@media(max-width:820px){
  .invoice-detail-grid{
    grid-template-columns:1fr;
  }
  .detail-kv-grid{
    grid-template-columns:1fr;
  }
  .invoice-detail-actions{
    width:100%;
    justify-content:flex-start;
  }
  .invoice-detail-actions a{
    flex:1 1 auto;
    justify-content:center;
  }
  .invoice-detail-table{
    min-width:720px;
  }
}


/* ================================================================
   F1 1.6.4 · mobile dashboard + invoice actions + premium detail
   ================================================================ */
.dashboard-table-scroll{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
.dashboard-recent-table{
  min-width:760px;
}
.dashboard-invoice-link{
  color:#edf7fd;
  text-decoration:none;
}
.dashboard-invoice-link:hover{color:#64c5ff}
.services-panel,
.article-list,
.service-row,
.dashboard-dynamic-banner{
  min-width:0;
  max-width:100%;
}
.service-row{
  grid-template-columns:auto minmax(0,1fr) auto;
}
.service-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard-dynamic-banner{
  overflow:hidden;
  overflow-wrap:anywhere;
  word-break:normal;
}
.dashboard-dynamic-banner h3,
.dashboard-dynamic-banner p{
  max-width:100%;
  overflow-wrap:anywhere;
}
.dashboard-dynamic-banner .banner-btn{
  max-width:100%;
  white-space:normal;
  text-align:center;
}

.invoice-actions-cell{
  white-space:nowrap;
}
.invoice-icon-action{
  width:31px!important;
  height:31px!important;
  min-width:31px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(67,145,198,.24)!important;
  border-radius:9px!important;
  background:rgba(8,48,78,.62)!important;
  color:#78caff!important;
  cursor:pointer;
}
.invoice-icon-action:hover{
  background:#0e4d7d!important;
  color:#dff5ff!important;
}
.invoice-icon-action svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.invoice-icon-action-danger{
  color:#ff8793!important;
  border-color:rgba(255,102,120,.22)!important;
}

.invoice-premium-hero{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:104px;
  margin-bottom:14px;
  padding:20px 24px;
  border:1px solid rgba(61,128,173,.23);
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 28%,rgba(33,118,255,.34),transparent 36%),
    linear-gradient(115deg,#071a2c 0%,#0b3154 54%,#1164c8 100%);
  box-shadow:0 20px 60px rgba(0,0,0,.12);
}
.invoice-premium-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:radial-gradient(circle,rgba(255,255,255,.24) 1px,transparent 1.2px);
  background-size:28px 28px;
}
.invoice-premium-back,
.invoice-premium-hero-icon,
.invoice-premium-hero-copy{position:relative;z-index:1}
.invoice-premium-back{
  width:39px;height:39px;display:grid;place-items:center;border-radius:11px;
  color:#a9bed0;text-decoration:none;border:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.08)
}
.invoice-premium-back svg,
.invoice-premium-hero-icon svg,
.invoice-card-title svg,
.invoice-success-icon svg,
.invoice-action-card svg{
  width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round
}
.invoice-premium-hero-icon{color:#d3e6f4}
.invoice-premium-hero-copy h1{margin:2px 0 8px;font-size:30px;letter-spacing:-.035em}
.invoice-premium-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#b5ccdc;font-size:11px}
.invoice-payment-pill{padding:5px 9px;border-radius:999px;background:rgba(10,131,255,.72);color:#fff}
.invoice-success-strip{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:13px 15px;
  border:1px solid rgba(56,219,147,.26);border-radius:13px;
  color:#d9fff0;background:linear-gradient(90deg,rgba(5,95,72,.72),rgba(6,56,58,.54));
}
.invoice-success-icon{width:24px;height:24px;display:grid;place-items:center;color:#64efb1}
.invoice-success-icon svg{width:21px;height:21px}
.invoice-jir-chip{margin-left:auto;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.09);font-size:10px;color:#bff7dd}
.invoice-premium-layout{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(300px,.9fr);gap:14px;align-items:start}
.invoice-premium-main,.invoice-premium-side{display:grid;gap:14px;min-width:0}
.invoice-premium-card,
.invoice-total-premium{
  border:1px solid rgba(65,127,167,.22);border-radius:15px;background:linear-gradient(180deg,rgba(8,42,69,.92),rgba(5,29,49,.96));
  box-shadow:0 14px 34px rgba(0,0,0,.08);overflow:hidden
}
.invoice-premium-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(70,124,160,.18)}
.invoice-card-title{display:flex;align-items:center;gap:10px}.invoice-card-title>span{color:#4eb7ff}.invoice-card-title h2{margin:0;font-size:15px}
.invoice-count-badge{min-width:24px;height:24px;display:grid;place-items:center;border:1px solid #2289d3;border-radius:999px;color:#7dcaff;font-size:10px}
.invoice-detail-table-scroll{overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.invoice-premium-table{width:100%;min-width:690px;border-collapse:collapse}
.invoice-premium-table th{padding:10px 12px;text-align:right;color:#82a6bd;font-size:9.5px;font-weight:650;background:rgba(20,68,100,.58)}
.invoice-premium-table th:first-child,.invoice-premium-table td:first-child{text-align:left}
.invoice-premium-table td{padding:12px;border-bottom:1px solid rgba(63,111,143,.15);text-align:right;color:#c9dce8;font-size:10.5px}
.invoice-premium-table td:first-child strong{display:block;color:#f0f7fb}.invoice-premium-table td small{display:block;margin-top:3px;color:#7894a7}
.invoice-tax-chip{display:inline-flex;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.06);color:#dbeaf2;font-size:9.5px}
.invoice-fiscal-premium.is-success{border-color:rgba(36,203,137,.25)}
.invoice-fiscal-premium.is-success .fiscal-head{background:linear-gradient(90deg,rgba(12,108,75,.76),rgba(8,65,65,.52))}
.fiscal-head>span{color:#a8dcca;font-size:10px}
.invoice-fiscal-fields{display:grid;gap:10px;padding:14px}
.invoice-fiscal-fields>div{padding:11px 12px;border-radius:10px;background:rgba(2,20,34,.45);border-left:2px solid #24bd78}
.invoice-fiscal-fields span{display:block;margin-bottom:5px;color:#78a2b9;font-size:9px}
.invoice-fiscal-fields strong{display:block;color:#eaf5fa;overflow-wrap:anywhere}
.invoice-total-premium{overflow:hidden}
.invoice-total-head{display:flex;align-items:center;gap:10px;padding:16px 18px;font-size:23px;font-weight:780;color:#fff;background:linear-gradient(135deg,#0b67c8,#0a4fa1)}
.invoice-total-head span{font-size:16px}
.invoice-total-line{display:flex;justify-content:space-between;gap:15px;padding:10px 17px;border-bottom:1px solid rgba(67,119,154,.14);color:#b8cedb}
.invoice-total-line strong{color:#eef7fb}
.invoice-total-pay{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:8px 15px 15px;padding-top:14px;border-top:1px solid rgba(96,154,191,.24);font-size:15px;font-weight:750}
.invoice-total-pay strong{font-size:25px;color:#43a9ff}
.invoice-info-card .invoice-info-list{padding:6px 14px 14px}
.invoice-info-list>div{padding:11px 4px;border-bottom:1px solid rgba(67,117,150,.14)}
.invoice-info-list>div:last-child{border-bottom:0}.invoice-info-list span{display:block;margin-bottom:4px;color:#7894a8;font-size:9px}.invoice-info-list strong{display:block;color:#e8f3f8}.invoice-info-list small{display:block;margin-top:3px;color:#7f9bae}
.invoice-action-card{display:grid!important;gap:8px;padding:14px!important}
.invoice-action-card>a,.invoice-action-card>button{width:100%;min-height:39px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;border:1px solid rgba(76,142,187,.32);font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.invoice-action-primary{background:#087de0!important;color:white!important}.invoice-action-secondary{background:rgba(7,45,72,.65)!important;color:#c9e8f9!important}.invoice-action-danger{background:rgba(111,35,48,.13)!important;color:#ff8b98!important;border-color:rgba(255,96,117,.32)!important}.invoice-action-back{background:transparent!important;color:#9ab2c3!important;border-color:transparent!important}
.invoice-action-card svg{width:16px;height:16px}
.invoice-note-text{padding:0 16px 16px;color:#b7cad6;line-height:1.6}

@media(max-width:820px){
  .dashboard-table-scroll{padding-bottom:7px!important}
  .dashboard-recent-table{min-width:720px}
  .services-panel{overflow:hidden}
  .article-list{width:100%;overflow:hidden}
  .service-row{width:100%;grid-template-columns:28px minmax(0,1fr) auto;gap:8px}
  .dashboard-dynamic-banner{width:100%;min-height:160px;padding:15px}
  .dashboard-dynamic-banner h3{font-size:17px}
  .dashboard-dynamic-banner p{font-size:10.5px}
  .invoice-list-panel .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .invoice-list-panel table{min-width:980px}
  .invoice-list-panel th:last-child,
  .invoice-list-panel td:last-child{position:sticky;right:0;z-index:4;background:#061f34;box-shadow:-8px 0 18px rgba(3,20,34,.55)}
  .invoice-list-panel th:last-child{z-index:6;background:#113f61}
  .invoice-list-panel .row-menu-btn{margin:auto}
  .invoice-premium-hero{padding:16px 14px;gap:9px;min-height:96px}
  .invoice-premium-back{width:36px;height:36px}
  .invoice-premium-hero-icon{display:none}
  .invoice-premium-hero-copy h1{font-size:22px}
  .invoice-success-strip{padding:11px 12px;font-size:10px}.invoice-jir-chip{margin-left:0}
  .invoice-premium-layout{grid-template-columns:1fr}
  .invoice-premium-side{grid-row:auto}
  .invoice-total-premium{order:-1}
  .invoice-premium-table{min-width:680px}
  .invoice-total-pay strong{font-size:22px}
  .invoice-action-card{position:static}
}


/* ================================================================
   F1 1.6.4a · mobile dashboard containment hotfix
   ================================================================ */
@media(max-width:820px){
  html,
  body,
  .app-shell,
  .main{
    max-width:100%;
    overflow-x:hidden!important;
  }

  .main{
    width:100%;
    min-width:0;
  }

  .hero{
    width:100%;
    max-width:100%;
    align-items:stretch!important;
    overflow:hidden!important;
  }
  .hero-copy{
    width:100%;
    min-width:0;
    align-self:flex-start!important;
    text-align:left!important;
  }
  .hero-copy h1{
    margin:0!important;
    text-align:left!important;
    font-size:32px!important;
    line-height:1!important;
  }

  .content-grid,
  .content-grid > *,
  .content-grid > div,
  .content-grid .panel,
  .content-grid .panel-inner,
  .services-panel{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  .content-grid{
    grid-template-columns:minmax(0,1fr)!important;
    overflow:visible!important;
  }

  .panel:has(.dashboard-table-scroll){
    overflow:hidden!important;
  }
  .dashboard-table-scroll{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain;
    touch-action:pan-x pan-y;
    scrollbar-width:thin;
  }
  .dashboard-recent-table{
    width:720px!important;
    min-width:720px!important;
    max-width:none!important;
    table-layout:auto!important;
  }

  .services-panel{
    overflow:hidden!important;
  }
  .services-panel .panel-inner,
  .article-list,
  .service-list{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .service-row{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-template-columns:28px minmax(0,1fr) auto!important;
  }
  .service-name{
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  .dashboard-dynamic-banner,
  .banner.dashboard-dynamic-banner{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:0!important;
    padding:16px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  .dashboard-dynamic-banner > *,
  .dashboard-dynamic-banner h3,
  .dashboard-dynamic-banner p{
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }
  .dashboard-dynamic-banner p{
    display:block!important;
  }
  .dashboard-dynamic-banner .banner-btn{
    width:fit-content!important;
    max-width:100%!important;
    white-space:normal!important;
  }
}

@media(max-width:520px){
  .hero{
    padding:17px!important;
  }
  .hero-copy h1{
    font-size:30px!important;
  }
  .dashboard-recent-table{
    width:690px!important;
    min-width:690px!important;
  }
  .panel-head,
  .panel-title-wrap,
  .panel-title-wrap > div:last-child{
    min-width:0!important;
  }
  .panel-sub{
    max-width:100%!important;
    white-space:normal!important;
  }
}


/* ================================================================
   F1 1.6.4b · sidebar user card + settings popover
   ================================================================ */
.sidebar-user-wrap{
  position:relative;
  min-width:0;
}

.sidebar-user{
  width:100%;
  min-width:0;
  min-height:58px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 22px;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border:1px solid rgba(68,139,189,.14);
  border-radius:13px;
  background:rgba(5,30,51,.42);
  color:inherit;
  text-align:left;
  cursor:pointer;
  appearance:none;
  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.sidebar-user:hover,
.sidebar-user.is-open{
  background:rgba(10,47,77,.68);
  border-color:rgba(76,159,218,.28);
  box-shadow:0 8px 26px rgba(0,0,0,.16);
}

.sidebar-user .user-copy{
  min-width:0;
}

.sidebar-user .user-copy strong,
.sidebar-user .user-copy span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sidebar-user .chev{
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  justify-self:end;
  transition:
    transform .18s ease,
    color .18s ease;
  transform-origin:center;
}

.sidebar-user.is-open .chev{
  transform:rotate(-90deg);
  color:#6ac7ff;
}

.sidebar-user-menu{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(100% + 9px);
  padding:7px;
  border-radius:13px;
  border:1px solid rgba(68,139,189,.26);
  background:rgba(5,29,50,.985);
  box-shadow:0 18px 44px rgba(0,0,0,.38);
  backdrop-filter:blur(16px);
  opacity:0;
  transform:translateY(6px) scale(.985);
  transform-origin:bottom center;
  transition:
    opacity .16s ease,
    transform .16s ease;
  z-index:150;
}

.sidebar-user-menu.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
}

.sidebar-user-menu[hidden]{
  display:none!important;
}

.sidebar-user-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:0 10px;
  border-radius:9px;
  color:#c5d6e2;
  font-size:11.8px;
  text-decoration:none;
  transition:.16s ease;
}

.sidebar-user-menu a svg{
  width:17px;
  height:17px;
  color:#7eabc8;
}

.sidebar-user-menu a:hover{
  background:#0b3659;
  color:#fff;
}

.sidebar-user-menu a.danger:hover{
  background:rgba(121,40,57,.18);
  color:#ffc0ca;
}

.sidebar-user-menu-divider{
  height:1px;
  margin:5px 7px;
  background:rgba(73,137,181,.18);
}

/* Old separate logout/settings placements must stay hidden. */
.logout-link{
  display:none!important;
}

@media(max-width:820px){
  .sidebar-user-menu{
    bottom:calc(100% + 8px);
  }
}


/* ================================================================
   F1 1.6.4c · mobile left-aligned page hierarchy
   Svi naslovi/podnaslovi/CTA gumbi na mobilnom idu lijevo.
   ================================================================ */
@media(max-width:820px){

  /* Glavna zaglavlja stranica */
  .page-head,
  .catalog-page-head,
  .settings-page-head,
  .invoice-page-head,
  .invoice-list-head{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:12px!important;
    text-align:left!important;
  }

  .page-head > div,
  .catalog-page-head > div,
  .settings-page-head > div,
  .invoice-page-head > div,
  .invoice-list-head > div{
    width:100%!important;
    min-width:0!important;
    text-align:left!important;
  }

  .page-head h1,
  .page-head h2,
  .page-head p,
  .page-head .catalog-eyebrow,
  .catalog-page-head h1,
  .catalog-page-head p,
  .settings-page-head h1,
  .settings-page-head p,
  .invoice-page-head h1,
  .invoice-page-head p,
  .invoice-list-head h1,
  .invoice-list-head p{
    margin-left:0!important;
    margin-right:0!important;
    text-align:left!important;
  }

  /* Primarne akcije više nisu centrirane / full-width same po sebi */
  .page-head > .primary-btn,
  .page-head > .secondary-app-btn,
  .catalog-page-head > .primary-btn,
  .catalog-page-head > .secondary-app-btn,
  .settings-page-head > .primary-btn,
  .invoice-page-head > .primary-btn,
  .invoice-list-head > .primary-btn{
    width:auto!important;
    max-width:100%!important;
    align-self:flex-start!important;
    justify-content:flex-start!important;
    margin-left:0!important;
    margin-right:auto!important;
  }

  /* Naslovi unutar kartica / šifrarnika */
  .catalog-editor-head,
  .catalog-toolbar,
  .article-list-head,
  .settings-card-head{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    text-align:left!important;
  }

  .catalog-editor-head > div,
  .catalog-toolbar > div,
  .article-list-head > div,
  .settings-card-head > div{
    width:100%!important;
    min-width:0!important;
    text-align:left!important;
  }

  .catalog-editor-head h2,
  .catalog-toolbar h2,
  .article-list-head h2,
  .settings-card-head h2,
  .catalog-editor-head p,
  .catalog-toolbar p,
  .article-list-head p,
  .settings-card-head p,
  .catalog-eyebrow{
    text-align:left!important;
  }

  /* "1 prikazano" ide ispod naslova, lijevo */
  .article-list-count{
    display:block!important;
    width:100%!important;
    margin:4px 0 0!important;
    text-align:left!important;
    align-self:flex-start!important;
  }

  /* Gumbi u zaglavljima editora ostaju lijevo */
  .catalog-editor-head .panel-link,
  .catalog-toolbar .panel-link{
    align-self:flex-start!important;
    margin-left:0!important;
    margin-right:auto!important;
  }

  /* Dashboard također ostaje konzistentno lijevo */
  .hero-copy,
  .hero-copy h1,
  .hero-copy p{
    text-align:left!important;
  }

  .hero .primary-btn{
    width:auto!important;
    align-self:flex-start!important;
    justify-content:flex-start!important;
    margin-left:0!important;
    margin-right:auto!important;
  }
}

@media(max-width:520px){
  .page-head h1,
  .catalog-page-head h1,
  .settings-page-head h1,
  .invoice-page-head h1,
  .invoice-list-head h1{
    font-size:30px!important;
    line-height:1.05!important;
  }
}


/* ================================================================
   F1 1.6.4d · WOW compact gradient table headers
   Kompaktniji i vizualno jači header DataTables/kataloga.
   ================================================================ */

/* Base header tone */
.dt-container table.dataTable thead>tr>th,
.dt-container table.dataTable thead>tr>td,
table.dataTable thead>tr>th,
table.dataTable thead>tr>td,
.catalog-table thead th{
  position:relative;
  background:
    linear-gradient(180deg, rgba(24,79,122,.96) 0%, rgba(17,61,97,.97) 52%, rgba(11,46,76,.98) 100%)!important;
  color:#9fc7e6!important;
  border-bottom:1px solid rgba(92,154,201,.24)!important;
  box-shadow:
    inset 0 1px 0 rgba(143,213,255,.08),
    inset 0 -1px 0 rgba(4,23,41,.32);
}

/* Compact rhythm */
table.dataTable thead>tr>th,
table.dataTable thead>tr>td,
.catalog-table thead th{
  height:36px;
  padding-top:6px!important;
  padding-bottom:6px!important;
  padding-left:14px!important;
  padding-right:14px!important;
  font-size:11.5px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.02em;
  text-transform:none;
}

/* Slight glow on first/last cells so the whole band feels premium */
table.dataTable thead>tr>th:first-child,
table.dataTable thead>tr>td:first-child,
.catalog-table thead th:first-child{
  border-top-left-radius:10px;
}

table.dataTable thead>tr>th:last-child,
table.dataTable thead>tr>td:last-child,
.catalog-table thead th:last-child{
  border-top-right-radius:10px;
}

/* Sorting glyphs calmer and better centered */
table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting:after{
  top:50%!important;
  transform:translateY(-50%);
  opacity:.32;
  font-size:9px!important;
}

table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_desc:after{
  opacity:.62;
}

/* Mobile: header stays compact and readable */
@media(max-width:820px){
  table.dataTable thead>tr>th,
  table.dataTable thead>tr>td,
  .catalog-table thead th{
    height:34px;
    padding:6px 10px!important;
    font-size:10.5px!important;
    letter-spacing:.015em;
  }
}


/* ================================================================
   F1 1.6.4e · mobile row actions
   Cijeli red računa otvara action sheet; ••• ostaje sticky.
   ================================================================ */
@media(max-width:820px){
  .invoice-list-panel tbody tr.invoice-mobile-action-row{
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .14s ease, box-shadow .14s ease;
  }

  .invoice-list-panel tbody tr.invoice-mobile-action-row:active,
  .invoice-list-panel tbody tr.invoice-mobile-action-row.is-mobile-tapped{
    background:rgba(18,78,121,.46)!important;
    box-shadow:inset 3px 0 0 rgba(52,169,242,.72);
  }

  /* Action cell and its header form one fixed right-edge rail. */
  .invoice-list-panel th:last-child,
  .invoice-list-panel td:last-child{
    position:sticky!important;
    right:0!important;
    width:68px!important;
    min-width:68px!important;
    max-width:68px!important;
    z-index:8;
    text-align:center!important;
    padding-left:7px!important;
    padding-right:7px!important;
    background:#061f34!important;
    box-shadow:-9px 0 20px rgba(3,20,34,.60);
  }

  /* Instead of a detached "Akcije" label, show the same visual language as •••. */
  .invoice-list-panel th:last-child{
    z-index:10;
    color:transparent!important;
    font-size:0!important;
    background:
      linear-gradient(180deg, rgba(24,79,122,.98) 0%, rgba(17,61,97,.98) 52%, rgba(11,46,76,.99) 100%)!important;
  }
  .invoice-list-panel th:last-child::after{
    content:"•••";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#9fc7e6;
    font-size:15px;
    font-weight:800;
    letter-spacing:2px;
    line-height:1;
  }

  .invoice-list-panel .row-menu-btn{
    width:48px!important;
    min-width:48px!important;
    height:42px!important;
    margin:0 auto!important;
    border-radius:11px;
    background:linear-gradient(180deg,#0d426d,#0a3457)!important;
    border-color:rgba(86,164,219,.30)!important;
    box-shadow:0 5px 14px rgba(0,0,0,.16), inset 0 1px 0 rgba(143,213,255,.08);
  }

  /* Keep the final content cell visible before the sticky rail. */
  .invoice-list-panel table.dataTable tbody td:nth-last-child(2){
    padding-right:12px!important;
  }
}


/* ================================================================
   F1 1.6.4f · mobile row actions cleanup
   Na mobitelu cijeli red otvara bottom sheet, pa se zasebni
   Akcije/••• stupac potpuno skriva radi čišće i šire tablice.
   ================================================================ */
@media(max-width:820px){
  table.dataTable thead th:last-child,
  table.dataTable thead td:last-child,
  table.dataTable tbody td:last-child,
  .catalog-table thead th:last-child,
  .catalog-table tbody td:last-child{
    display:none!important;
  }

  table.dataTable th:last-child,
  table.dataTable td:last-child,
  .catalog-table th:last-child,
  .catalog-table td:last-child{
    min-width:0!important;
    width:0!important;
    max-width:0!important;
    padding:0!important;
    border:0!important;
  }

  table.dataTable tbody tr.mobile-row-action{
    cursor:pointer;
  }

  table.dataTable tbody tr.mobile-row-action:active{
    background:
      linear-gradient(
        90deg,
        rgba(18,91,145,.42),
        rgba(8,45,76,.40)
      )!important;
  }
}


/* ================================================================
   F1 1.7.0 · Kupci / saved customer + Sudski registar lookup
   ================================================================ */
.customer-editor .panel-inner{
  overflow:visible;
}

.customer-info-strip{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin:1px 0 18px;
  padding:12px 14px;
  border:1px solid rgba(45,151,220,.34);
  border-radius:11px;
  background:
    linear-gradient(180deg,rgba(8,57,92,.48),rgba(5,39,66,.35));
  color:#8fcaf2;
}

.customer-info-icon{
  flex:0 0 21px;
  width:21px;
  height:21px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(72,179,255,.76);
  border-radius:50%;
  color:#77c8ff;
  font-size:12px;
  font-weight:800;
  line-height:1;
}

.customer-info-strip div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.customer-info-strip strong{
  color:#dff3ff;
  font-size:12px;
}

.customer-info-strip span:not(.customer-info-icon){
  color:#82a9c3;
  font-size:11px;
  line-height:1.5;
}

.customer-saved-search{
  position:relative;
  margin-bottom:17px;
}

.customer-saved-search>label{
  display:block;
  margin:0 0 6px;
  color:#9bb4c7;
  font-size:11px;
  font-weight:650;
}

.customer-search-box{
  position:relative;
}

.customer-search-box input{
  width:100%;
  height:44px;
  padding:0 42px 0 39px;
  border:1px solid rgba(61,128,175,.30);
  border-radius:10px;
  background:rgba(5,31,53,.72);
  color:#eef8ff;
  outline:none;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}

.customer-search-box input:focus{
  border-color:rgba(41,157,235,.70);
  background:rgba(6,38,65,.88);
  box-shadow:0 0 0 3px rgba(21,156,255,.08);
}

.customer-search-icon{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  color:#6e96b1;
  font-size:20px;
  line-height:1;
  pointer-events:none;
}

.customer-search-spinner,
.lookup-btn-spinner{
  width:15px;
  height:15px;
  border:2px solid rgba(122,200,255,.22);
  border-top-color:#65c3ff;
  border-radius:50%;
  animation:customerSpin .72s linear infinite;
}

.customer-search-spinner{
  position:absolute;
  right:14px;
  top:14px;
}

@keyframes customerSpin{
  to{transform:rotate(360deg)}
}

.customer-search-results{
  position:absolute;
  z-index:120;
  left:0;
  right:0;
  top:calc(100% + 6px);
  padding:6px;
  border:1px solid rgba(59,128,177,.34);
  border-radius:12px;
  background:rgba(5,29,50,.99);
  box-shadow:0 20px 48px rgba(0,0,0,.40);
  backdrop-filter:blur(16px);
}

.customer-search-result{
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:9px 10px;
  border-radius:9px;
  text-decoration:none;
  transition:background .14s ease;
}

.customer-search-result:hover{
  background:rgba(12,58,95,.72);
}

.customer-result-main,
.customer-result-side{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.customer-result-main{
  gap:3px;
}

.customer-result-main strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#edf8ff;
  font-size:12px;
}

.customer-result-main small,
.customer-result-side small{
  color:#6f8ea4;
  font-size:10px;
}

.customer-result-side{
  align-items:flex-end;
  gap:4px;
}

.customer-search-empty{
  padding:14px 11px;
  color:#7795aa;
  font-size:11px;
}

.customer-search-empty.danger{
  color:#e3a0a9;
}

.customer-form-divider{
  height:1px;
  margin:0 0 18px;
  background:linear-gradient(90deg,transparent,rgba(62,126,170,.28),transparent);
}

.customer-oib-row .oib-lookup-btn{
  min-width:164px;
  gap:8px;
}

.customer-lookup-status{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:-1px;
  padding:11px 13px;
  border-radius:10px;
  border:1px solid rgba(67,126,169,.25);
  background:rgba(7,38,63,.58);
}

.customer-lookup-status>div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.customer-lookup-status strong{
  color:#dcecf6;
  font-size:11px;
}

.customer-lookup-status span{
  color:#7694a9;
  font-size:10.5px;
}

.customer-lookup-status.success{
  border-color:rgba(42,177,126,.30);
  background:rgba(12,76,61,.28);
}
.customer-lookup-status.success strong{color:#7ee2bb}

.customer-lookup-status.info{
  border-color:rgba(47,153,224,.34);
  background:rgba(11,65,104,.32);
}
.customer-lookup-status.info strong{color:#88d1ff}

.customer-lookup-status.warning{
  border-color:rgba(218,168,68,.34);
  background:rgba(94,66,16,.22);
}
.customer-lookup-status.warning strong{color:#f0cb76}

.customer-lookup-status.danger{
  border-color:rgba(216,83,105,.34);
  background:rgba(92,34,48,.24);
}
.customer-lookup-status.danger strong{color:#ffabb9}

.customer-lookup-action{
  flex:0 0 auto;
  min-height:32px;
  display:inline-flex;
  align-items:center;
  padding:0 10px;
  border:1px solid rgba(65,151,211,.34);
  border-radius:8px;
  background:#0c3b62;
  color:#9dd8ff;
  text-decoration:none;
  font-size:10.5px;
  font-weight:650;
}

@media(max-width:820px){
  .customer-info-strip{
    text-align:left;
  }

  .customer-search-result{
    align-items:flex-start;
  }

  .customer-oib-row{
    flex-direction:column;
    align-items:stretch;
  }

  .customer-oib-row .oib-lookup-btn{
    width:auto!important;
    min-width:0;
    align-self:flex-start!important;
  }

  .customer-lookup-status{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* ================================================================
   F1 1.7.1 · Novi račun / kupac kao ePoslovanje-style optional block
   ================================================================ */
.invoice-date-grid{
  grid-template-columns:repeat(2,minmax(0,220px));
  justify-content:start;
}
.invoice-buyer-card{
  overflow:visible!important;
  position:relative;
  z-index:35;
  padding:0!important;
}
.invoice-buyer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:15px 16px;
  border-radius:13px 13px 0 0;
  border-bottom:1px solid rgba(48,119,164,.17);
  background:linear-gradient(135deg,rgba(5,66,88,.78),rgba(4,103,91,.70));
}
.invoice-buyer-card:not(.is-enabled) .invoice-buyer-head{
  border-radius:13px;
}
.invoice-buyer-head h2{
  display:flex;
  align-items:center;
  gap:9px;
  margin:4px 0 0;
  color:#eefaff;
  font-size:17px;
}
.invoice-optional-pill{
  display:inline-flex;
  align-items:center;
  min-height:23px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#b8d9e9;
  font-size:9px;
  font-weight:650;
}
.invoice-buyer-switch{
  display:flex;
  align-items:center;
  gap:10px;
  color:#d9eff8;
  font-size:10.5px;
  font-weight:650;
  cursor:pointer;
  white-space:nowrap;
}
.invoice-buyer-switch input{position:absolute;opacity:0;pointer-events:none}
.invoice-switch-ui{
  position:relative;
  width:38px;
  height:22px;
  border-radius:999px;
  background:#0b3e5d;
  box-shadow:inset 0 0 0 1px rgba(100,177,216,.18);
  transition:.18s ease;
}
.invoice-switch-ui::after{
  content:"";
  position:absolute;
  top:3px;left:3px;
  width:16px;height:16px;
  border-radius:50%;
  background:#d8e9f2;
  box-shadow:0 2px 7px rgba(0,0,0,.30);
  transition:.18s ease;
}
.invoice-buyer-switch input:checked + .invoice-switch-ui{
  background:linear-gradient(135deg,#08a16e,#0c7f88);
}
.invoice-buyer-switch input:checked + .invoice-switch-ui::after{transform:translateX(16px);background:#fff}
.invoice-buyer-body{padding:15px 16px 17px}
.invoice-buyer-body[hidden]{display:none!important}
.invoice-buyer-info{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:14px;
  padding:10px 12px;
  border:1px solid rgba(50,153,217,.24);
  border-radius:10px;
  background:rgba(6,48,78,.42);
  color:#86bddd;
}
.invoice-buyer-info>span{
  flex:0 0 20px;
  width:20px;height:20px;
  display:grid;place-items:center;
  border:1px solid rgba(78,180,240,.68);
  border-radius:50%;
  color:#78ccff;
  font-weight:800;font-size:11px;
}
.invoice-buyer-info p{margin:1px 0 0;font-size:10.5px;line-height:1.45}
.invoice-buyer-search-field{margin-bottom:13px}
.invoice-buyer-divider{height:1px;margin:0 0 14px;background:linear-gradient(90deg,transparent,rgba(54,124,169,.27),transparent)}
.invoice-buyer-form{
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:11px 12px;
}
.invoice-buyer-oib{grid-column:1}
.invoice-buyer-name{grid-column:2}
.invoice-buyer-address{grid-column:1/-1}
.invoice-oib-lookup-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.invoice-oib-lookup-row .secondary-app-btn{min-width:150px;white-space:nowrap}
.invoice-buyer-status,
.invoice-buyer-rule{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:12px;
  padding:10px 12px;
  border-radius:9px;
  font-size:10.5px;
  border:1px solid rgba(58,124,170,.24);
  background:rgba(7,39,65,.52);
  color:#809eb3;
}
.invoice-buyer-status strong{font-size:11px;color:#dbeef8}
.invoice-buyer-status.success{border-color:rgba(43,177,126,.30);background:rgba(12,76,61,.28)}
.invoice-buyer-status.success strong{color:#78e0b6}
.invoice-buyer-status.info{border-color:rgba(47,153,224,.30);background:rgba(11,65,104,.28)}
.invoice-buyer-status.info strong{color:#8bd2ff}
.invoice-buyer-status.warning,.invoice-buyer-rule.warning{border-color:rgba(218,168,68,.30);background:rgba(94,66,16,.22);color:#e5c26f}
.invoice-buyer-status.danger,.invoice-buyer-rule.danger{border-color:rgba(216,83,105,.32);background:rgba(92,34,48,.24);color:#ffabb9}
.invoice-buyer-rule.info{border-color:rgba(47,153,224,.25);color:#86b9d8}
.invoice-issue-btn:disabled{opacity:.42;cursor:not-allowed;filter:saturate(.65)}

@media(max-width:820px){
  .invoice-date-grid{grid-template-columns:1fr!important}
  .invoice-buyer-head{align-items:flex-start;flex-direction:column}
  .invoice-buyer-switch{align-self:flex-start}
  .invoice-buyer-form{grid-template-columns:1fr}
  .invoice-buyer-oib,.invoice-buyer-name,.invoice-buyer-address{grid-column:1}
  .invoice-oib-lookup-row{grid-template-columns:1fr}
  .invoice-oib-lookup-row .secondary-app-btn{width:auto!important;min-width:0;justify-self:start}
}


/* ================================================================
   F1 1.7.2 · issue time + due date + detail fiscalization
   ================================================================ */
.invoice-auto-date{
  min-height:72px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  padding:13px 15px;
  border:1px solid rgba(56,124,173,.24);
  border-radius:11px;
  background:
    linear-gradient(180deg,rgba(8,43,72,.62),rgba(5,31,53,.50));
}
.invoice-auto-date-label{
  color:#7899b0;
  font-size:10.5px;
}
.invoice-auto-date strong{
  color:#eaf7ff;
  font-size:13px;
}
.invoice-auto-date small{
  color:#64859c;
  font-size:10px;
}

.invoice-due-field[hidden]{
  display:none!important;
}

.invoice-fiscal-pending-note{
  margin:0 14px 12px;
  padding:11px 13px;
  display:flex;
  flex-direction:column;
  gap:3px;
  border:1px solid rgba(51,153,222,.28);
  border-radius:10px;
  background:rgba(7,56,91,.35);
}
.invoice-fiscal-pending-note strong{
  color:#9bd9ff;
  font-size:11px;
}
.invoice-fiscal-pending-note span{
  color:#7697ad;
  font-size:10.5px;
  line-height:1.45;
}

.invoice-fiscalize-form{
  width:100%;
  margin:0;
}
.invoice-fiscalize-form .invoice-action-fiscalize{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(53,203,145,.46);
  border-radius:9px;
  background:
    linear-gradient(180deg,#12a86d 0%,#08794f 100%);
  color:#fff;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 8px 22px rgba(3,83,54,.18);
}
.invoice-fiscalize-form .invoice-action-fiscalize:hover{
  filter:brightness(1.08);
}
.invoice-fiscalize-form .invoice-action-fiscalize svg{
  width:16px;
  height:16px;
}

@media(max-width:820px){
  .invoice-meta-grid.invoice-date-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .invoice-auto-date{
    min-height:64px;
  }
}


/* ================================================================
   F1 1.7.3 · sidebar live date & time
   ================================================================ */
.sidebar-clock{
  position:relative;
  min-width:0;
  margin:0 0 10px;
  padding:10px 11px 9px;
  border:1px solid rgba(64,132,180,.16);
  border-radius:12px;
  background:
    linear-gradient(180deg,rgba(7,39,65,.62),rgba(5,29,50,.40));
  box-shadow:
    inset 0 1px 0 rgba(120,195,245,.035);
}

.sidebar-clock::before{
  content:"";
  position:absolute;
  left:10px;
  top:10px;
  bottom:10px;
  width:2px;
  border-radius:999px;
  background:linear-gradient(180deg,#21a8ff,#0878c8);
  opacity:.72;
}

.sidebar-clock-date{
  padding-left:10px;
  color:#6f91a8;
  font-size:9.5px;
  font-weight:750;
  letter-spacing:.075em;
  line-height:1.25;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sidebar-clock-time{
  padding-left:10px;
  margin-top:2px;
  color:#eaf7ff;
  font-size:19px;
  font-weight:720;
  letter-spacing:-.03em;
  line-height:1.05;
  font-variant-numeric:tabular-nums;
}

@media(max-width:820px){
  .sidebar-clock{
    padding:9px 10px 8px;
  }

  .sidebar-clock-date{
    font-size:9px;
  }

  .sidebar-clock-time{
    font-size:18px;
  }
}


/* ================================================================
   F1 1.7.4 · sidebar hierarchy polish
   ================================================================ */

.sidebar-legal-name{
  margin-top:5px;
  max-width:100%;
  color:#6f8ea4;
  font-size:10px;
  font-weight:500;
  line-height:1.35;
  letter-spacing:0;
  white-space:normal;
  overflow-wrap:anywhere;
}

.tenant-meta{
  display:none!important;
}

.sidebar-bottom{
  border-top:0!important;
}

.sidebar-clock{
  border-bottom:0!important;
}

.sidebar-user-wrap{
  border-top:0!important;
  padding-top:0!important;
  margin-top:0!important;
}

.sidebar-user .user-copy strong{
  display:-webkit-box!important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  white-space:normal!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  line-height:1.18;
  max-height:2.36em;
  overflow-wrap:anywhere;
}

.sidebar-user .user-copy span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media(min-width:821px){
  .sidebar-user{
    align-items:center;
  }

  .sidebar-user .user-copy{
    min-width:0;
  }
}

@media(max-width:820px){
  .sidebar-legal-name{
    font-size:9.5px;
    line-height:1.3;
  }
}


/* ================================================================
   F1 1.7.5 · Settings mobile compact polish
   ================================================================ */
@media(max-width:820px){

  /* Page heading */
  .settings-page-head{
    margin-bottom:12px!important;
  }

  .settings-page-head h1{
    font-size:29px!important;
    line-height:1.05!important;
    letter-spacing:-.035em;
  }

  .settings-page-head p{
    margin-top:6px!important;
    font-size:11.5px!important;
    line-height:1.45!important;
    color:#7f9db2!important;
  }

  /* Tabs: premium horizontal pills without visible scrollbar */
  .settings-nav{
    display:flex!important;
    gap:6px!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:5px!important;
    margin:0 0 12px!important;
    border:1px solid rgba(55,123,171,.20)!important;
    border-radius:12px!important;
    background:rgba(5,31,52,.55)!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
    scroll-snap-type:x proximity;
  }

  .settings-nav::-webkit-scrollbar{
    display:none!important;
  }

  .settings-nav a{
    flex:0 0 auto!important;
    min-height:34px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 11px!important;
    margin:0!important;
    border:1px solid transparent!important;
    border-radius:9px!important;
    color:#86a6bc!important;
    font-size:10.5px!important;
    font-weight:650!important;
    white-space:nowrap!important;
    text-decoration:none!important;
    scroll-snap-align:start;
  }

  .settings-nav a:hover,
  .settings-nav a:focus{
    background:rgba(12,60,98,.72)!important;
    border-color:rgba(59,143,202,.24)!important;
    color:#dff3ff!important;
  }

  /* Outer settings rhythm */
  .f1-settings{
    gap:10px!important;
  }

  .f1-settings > .f1-status{
    margin:0 0 2px!important;
    padding:10px 11px!important;
    border-radius:10px!important;
    font-size:10.5px!important;
    line-height:1.45!important;
  }

  .settings-anchor{
    scroll-margin-top:74px;
  }

  .f1-card{
    padding:14px!important;
    border-radius:14px!important;
  }

  .settings-card-head{
    gap:8px!important;
    margin-bottom:12px!important;
  }

  .settings-card-head h2,
  .f1-card > h2{
    margin-top:3px!important;
    font-size:19px!important;
    line-height:1.12!important;
    letter-spacing:-.025em;
  }

  .settings-card-head p,
  .f1-card > p{
    margin-top:4px!important;
    font-size:10.5px!important;
    line-height:1.45!important;
  }

  .catalog-eyebrow{
    font-size:9px!important;
    letter-spacing:.14em!important;
  }

  .settings-state{
    min-height:26px!important;
    padding:0 9px!important;
    font-size:9.5px!important;
    align-self:flex-start!important;
  }

  /* Payment methods – compact two-line cards */
  .payment-settings-list{
    display:grid!important;
    gap:8px!important;
  }

  .payment-setting-row{
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr) auto!important;
    grid-template-areas:
      "icon name name"
      "icon active default"!important;
    align-items:center!important;
    gap:7px 10px!important;
    min-height:0!important;
    padding:10px!important;
    border-radius:12px!important;
    background:
      linear-gradient(180deg,rgba(7,44,73,.62),rgba(5,34,58,.46))!important;
  }

  .payment-setting-icon{
    grid-area:icon!important;
    width:38px!important;
    height:38px!important;
    border-radius:10px!important;
    font-size:11px!important;
  }

  .payment-setting-name{
    grid-area:name!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:9px!important;
    min-width:0!important;
  }

  .payment-setting-name > span{
    margin:0!important;
    color:#6e8da3!important;
    font-size:9.5px!important;
  }

  .payment-setting-name input{
    min-width:0!important;
    height:38px!important;
    padding:0 11px!important;
    border-radius:10px!important;
    font-size:13px!important;
  }

  .payment-setting-row > .settings-switch{
    grid-area:active!important;
    justify-self:start!important;
  }

  .payment-setting-row > .settings-radio{
    grid-area:default!important;
    justify-self:end!important;
  }

  .settings-switch,
  .settings-radio{
    min-height:28px!important;
    gap:7px!important;
    margin:0!important;
    font-size:10px!important;
    color:#a8c0d1!important;
  }

  .settings-switch input,
  .settings-radio input{
    margin:0!important;
  }

  .f1-note{
    padding:9px 10px!important;
    border-radius:10px!important;
    font-size:9.5px!important;
    line-height:1.45!important;
  }

  .f1-actions{
    margin-top:10px!important;
    padding-top:10px!important;
  }

  .f1-actions .primary-btn{
    min-height:42px!important;
    border-radius:10px!important;
    font-size:11px!important;
  }

  /* Operators – compact premium mobile card */
  .f1-operator-settings-list{
    display:grid!important;
    gap:8px!important;
  }

  .f1-operator-setting-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "user user"
      "oib oib"
      "active default"!important;
    gap:9px 12px!important;
    padding:11px!important;
    border-radius:12px!important;
    background:
      linear-gradient(180deg,rgba(7,44,73,.66),rgba(5,34,58,.50))!important;
  }

  .f1-operator-user{
    grid-area:user!important;
    min-width:0!important;
    padding-bottom:7px!important;
    border-bottom:1px solid rgba(58,118,158,.14);
  }

  .f1-operator-user strong{
    display:block!important;
    color:#f0f8fd!important;
    font-size:12px!important;
    line-height:1.25!important;
  }

  .f1-operator-user small{
    display:block!important;
    margin-top:2px!important;
    color:#7392a7!important;
    font-size:9.5px!important;
    line-height:1.35!important;
    overflow-wrap:anywhere;
  }

  .f1-operator-oib{
    grid-area:oib!important;
  }

  .f1-operator-oib > span{
    margin-bottom:5px!important;
    font-size:9.5px!important;
  }

  .f1-operator-oib input{
    height:39px!important;
    padding:0 11px!important;
    border-radius:10px!important;
    font-size:13px!important;
    font-variant-numeric:tabular-nums;
  }

  .f1-operator-setting-row > .settings-switch{
    grid-area:active!important;
    justify-self:start!important;
  }

  .f1-operator-setting-row > .settings-radio{
    grid-area:default!important;
    justify-self:end!important;
  }

  /* Tax / generic form fields also tighter */
  .f1-form-grid{
    gap:9px!important;
  }

  .f1-field > span{
    margin-bottom:5px!important;
    font-size:9.5px!important;
  }

  .f1-field input,
  .f1-field select,
  .f1-field textarea{
    min-height:39px!important;
    border-radius:10px!important;
  }

  .tax-mode-grid{
    gap:8px!important;
  }

  .tax-mode-card{
    padding:10px!important;
    border-radius:11px!important;
  }

  .tax-mode-card strong{
    font-size:11px!important;
  }

  .tax-mode-card small{
    font-size:9.5px!important;
    line-height:1.35!important;
  }
}

@media(max-width:420px){
  .payment-setting-name{
    grid-template-columns:1fr!important;
    gap:4px!important;
  }

  .payment-setting-name > span{
    display:none!important;
  }

  .settings-nav a{
    padding:0 10px!important;
  }
}


/* ================================================================
   F1 1.7.6 · Payment methods mobile compact redesign
   ================================================================ */
@media(max-width:820px){

  .payment-settings-list{
    gap:8px!important;
  }

  .payment-setting-row{
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr)!important;
    grid-template-areas:
      "icon name"
      "icon controls"!important;
    align-items:start!important;
    gap:8px 11px!important;
    padding:10px 11px!important;
    min-height:0!important;
    border-radius:12px!important;
    background:
      linear-gradient(180deg,rgba(8,47,78,.72),rgba(5,35,59,.52))!important;
  }

  .payment-setting-icon{
    grid-area:icon!important;
    width:40px!important;
    height:40px!important;
    align-self:start!important;
    border-radius:10px!important;
    font-size:11px!important;
    margin-top:1px!important;
  }

  .payment-setting-name{
    grid-area:name!important;
    display:block!important;
    min-width:0!important;
  }

  .payment-setting-name > span{
    display:none!important;
  }

  .payment-setting-name input{
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    padding:0 12px!important;
    border-radius:10px!important;
    font-size:13px!important;
  }

  /* checkbox + radio formiraju jednu kompaktnu control bar liniju */
  .payment-setting-row::after{
    content:"";
    grid-area:controls;
    height:0;
  }

  .payment-setting-row > .settings-switch,
  .payment-setting-row > .settings-radio{
    min-height:30px!important;
    padding:0 9px!important;
    border:1px solid rgba(58,126,174,.18)!important;
    border-radius:9px!important;
    background:rgba(5,31,52,.42)!important;
    color:#96b3c7!important;
    font-size:10px!important;
    line-height:1!important;
  }

  .payment-setting-row > .settings-switch{
    grid-column:2!important;
    grid-row:2!important;
    justify-self:start!important;
    margin-right:92px!important;
  }

  .payment-setting-row > .settings-radio{
    grid-column:2!important;
    grid-row:2!important;
    justify-self:end!important;
  }

  .payment-setting-row > .settings-switch input,
  .payment-setting-row > .settings-radio input{
    flex:0 0 auto!important;
  }

  .payment-setting-row > .settings-switch:has(input:checked),
  .payment-setting-row > .settings-radio:has(input:checked){
    border-color:rgba(31,157,236,.34)!important;
    background:rgba(9,66,107,.52)!important;
    color:#d9f2ff!important;
  }

  .payment-settings-list + .f1-note{
    margin-top:8px!important;
  }
}

@media(max-width:420px){
  .payment-setting-row{
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:7px 9px!important;
    padding:9px 10px!important;
  }

  .payment-setting-icon{
    width:38px!important;
    height:38px!important;
  }

  .payment-setting-name input{
    height:38px!important;
  }

  .payment-setting-row > .settings-switch,
  .payment-setting-row > .settings-radio{
    min-height:28px!important;
    padding:0 8px!important;
    font-size:9.5px!important;
  }

  .payment-setting-row > .settings-switch{
    margin-right:84px!important;
  }
}


/* ================================================================
   F1 1.7.7 · Additional F1 operators
   ================================================================ */
.manual-operators-section{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(57,122,164,.16);
}

.manual-operators-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}

.manual-operators-head h3{
  margin:3px 0 0;
  color:#eef8ff;
  font-size:15px;
  line-height:1.2;
}

.manual-operators-head p{
  margin:4px 0 0;
  color:#7393a8;
  font-size:10.5px;
  line-height:1.45;
}

.operator-add-btn{
  flex:0 0 auto;
}

.manual-operator-list{
  display:grid;
  gap:9px;
}

.manual-operator-card{
  padding:11px;
  border:1px solid rgba(55,126,175,.20);
  border-radius:12px;
  background:
    linear-gradient(180deg,rgba(7,44,73,.66),rgba(5,34,58,.48));
}

.manual-operator-card.is-new{
  border-color:rgba(36,157,235,.30);
  box-shadow:inset 0 1px 0 rgba(118,205,255,.035);
}

.manual-operator-main{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(100px,.55fr) minmax(180px,.8fr);
  gap:10px;
}

.manual-operator-controls{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid rgba(56,118,158,.14);
}

.manual-operator-remove{
  margin-left:auto;
  min-height:30px;
  padding:0 9px;
  border:1px solid rgba(215,85,104,.22);
  border-radius:8px;
  background:rgba(97,32,46,.16);
  color:#e49ba7;
  font:inherit;
  font-size:9.5px;
  cursor:pointer;
}

.manual-operator-remove:hover{
  background:rgba(121,39,56,.28);
  color:#ffc1ca;
}

/* Linked operators also receive a compact operator code field. */
.f1-operator-setting-row{
  grid-template-columns:minmax(0,1fr) minmax(110px,.55fr) minmax(180px,.8fr) auto auto;
}

.f1-operator-code{
  min-width:0;
}

@media(max-width:820px){
  .manual-operators-section{
    margin-top:11px;
    padding-top:11px;
  }

  .manual-operators-head{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .operator-add-btn{
    width:auto!important;
    align-self:flex-start!important;
  }

  .manual-operator-card{
    padding:10px;
  }

  .manual-operator-main{
    grid-template-columns:minmax(0,1fr) 92px;
    grid-template-areas:
      "name code"
      "oib oib";
    gap:8px;
  }

  .manual-operator-name{grid-area:name}
  .manual-operator-code{grid-area:code}
  .manual-operator-oib{grid-area:oib}

  .manual-operator-controls{
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr);
    gap:7px;
  }

  .manual-operator-controls .manual-operator-remove{
    margin-left:0;
    justify-self:end;
  }

  /* Existing login-linked operator: user header, code+OIB, switches. */
  .f1-operator-setting-row{
    grid-template-columns:minmax(0,1fr) 92px!important;
    grid-template-areas:
      "user user"
      "oib code"
      "active default"!important;
  }

  .f1-operator-setting-row .f1-operator-code{
    grid-area:code!important;
  }

  .f1-operator-setting-row .f1-operator-oib{
    grid-area:oib!important;
  }
}

@media(max-width:420px){
  .manual-operator-main{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:
      "name"
      "code"
      "oib";
  }

  .manual-operator-controls{
    grid-template-columns:1fr 1fr;
  }

  .manual-operator-controls .manual-operator-remove{
    grid-column:1 / -1;
    justify-self:start;
  }

  .f1-operator-setting-row{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:
      "user"
      "oib"
      "code"
      "active"
      "default"!important;
  }
}


/* ================================================================
   F1 1.7.9 · Business premise + cash register settings
   ================================================================ */
.settings-provider-check{
  margin:0 0 12px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(64,130,174,.20);
  border-radius:11px;
  background:rgba(5,33,55,.48);
}
.settings-provider-check::before{
  content:"";
  flex:0 0 auto;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#66889f;
  box-shadow:0 0 0 4px rgba(102,136,159,.08);
}
.settings-provider-check.ok{
  border-color:rgba(31,190,130,.28);
  background:rgba(7,69,53,.22);
}
.settings-provider-check.ok::before{
  background:#24ce8b;
  box-shadow:0 0 0 4px rgba(36,206,139,.09);
}
.settings-provider-check.warn{
  border-color:rgba(242,175,66,.30);
  background:rgba(87,61,16,.18);
}
.settings-provider-check.warn::before{
  background:#f2af42;
  box-shadow:0 0 0 4px rgba(242,175,66,.09);
}
.settings-provider-check strong{
  display:block;
  color:#eaf7ff;
  font-size:11px;
  line-height:1.3;
}
.settings-provider-check span{
  display:block;
  margin-top:2px;
  color:#7797ac;
  font-size:10px;
  line-height:1.45;
}

.premise-settings-grid,
.device-settings-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.premise-address-field{
  grid-column:1 / -1;
}

.settings-number-example{
  margin-top:11px;
  padding:11px 12px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:3px 12px;
  align-items:center;
  border:1px solid rgba(44,132,193,.18);
  border-radius:11px;
  background:linear-gradient(180deg,rgba(7,44,73,.58),rgba(5,33,56,.40));
}
.settings-number-example span{
  color:#7291a6;
  font-size:9.5px;
}
.settings-number-example strong{
  color:#eaf7ff;
  font-size:14px;
  font-variant-numeric:tabular-nums;
}
.settings-number-example small{
  grid-column:1 / -1;
  color:#66869b;
  font-size:9.5px;
  line-height:1.4;
}

@media(max-width:820px){
  .premise-settings-grid,
  .device-settings-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
  }

  .premise-address-field{
    grid-column:auto!important;
  }

  .settings-provider-check{
    padding:9px 10px!important;
    margin-bottom:10px!important;
  }

  .settings-number-example{
    grid-template-columns:1fr!important;
    padding:10px!important;
  }

  .settings-number-example small{
    grid-column:auto!important;
  }
}

/* ================================================================
   F1 1.8.0 · Tips / napojnice
   ================================================================ */
.invoice-action-tip{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(70,185,255,.38);
  border-radius:9px;
  background:linear-gradient(180deg,rgba(18,111,173,.95),rgba(8,75,124,.95));
  color:#fff;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.invoice-action-tip:hover{filter:brightness(1.08)}
.invoice-action-tip svg{width:16px;height:16px}
.invoice-tip-expired{
  padding:9px 10px;
  border:1px solid rgba(126,146,160,.18);
  border-radius:9px;
  color:#718da0;
  font-size:10px;
  text-align:center;
  background:rgba(6,31,50,.32);
}
.invoice-tip-card .invoice-card-title svg{color:#48bfff}
.invoice-tip-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:12px 14px 8px;
}
.invoice-tip-summary>div{
  min-width:0;
  padding:10px 11px;
  border:1px solid rgba(54,125,174,.16);
  border-radius:10px;
  background:rgba(4,31,51,.34);
}
.invoice-tip-summary span{
  display:block;
  color:#718fa4;
  font-size:9.5px;
}
.invoice-tip-summary strong{
  display:block;
  margin-top:3px;
  color:#edf8ff;
  font-size:12px;
}
.invoice-tip-note{
  margin:0;
  padding:4px 14px 13px;
  color:#718fa4;
  font-size:9.8px;
  line-height:1.45;
}

body.modal-open{overflow:hidden}
.app-modal[hidden]{display:none!important}
.app-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.app-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,12,22,.72);
  backdrop-filter:blur(7px);
}
.app-modal-dialog{
  position:relative;
  width:min(520px,100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  border:1px solid rgba(68,146,199,.28);
  border-radius:16px;
  background:linear-gradient(180deg,#082a46 0%,#061e33 100%);
  box-shadow:0 28px 80px rgba(0,0,0,.42);
}
.app-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:16px 17px 13px;
  border-bottom:1px solid rgba(61,126,169,.16);
}
.app-modal-head h2{
  margin:3px 0 0;
  color:#f4faff;
  font-size:21px;
  line-height:1.12;
}
.app-modal-head p{
  margin:5px 0 0;
  color:#7594a9;
  font-size:10.5px;
  line-height:1.45;
}
.app-modal-close{
  flex:0 0 auto;
  width:32px;
  height:32px;
  border:1px solid rgba(64,130,174,.22);
  border-radius:9px;
  background:rgba(5,31,52,.48);
  color:#a9c6d8;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.tip-form{padding:15px 17px 17px}
.tip-amount-control{
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px;
}
.tip-amount-control input{
  border-radius:10px 0 0 10px!important;
}
.tip-amount-control>span{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(64,137,184,.38);
  border-left:0;
  border-radius:0 10px 10px 0;
  color:#b9d8e9;
  background:rgba(8,51,82,.64);
  font-weight:700;
}
.tip-payment-fieldset{
  margin:13px 0 0;
  padding:0;
  border:0;
}
.tip-payment-fieldset legend{
  margin-bottom:7px;
  color:#86a5b9;
  font-size:10px;
}
.tip-payment-option{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  margin-top:6px;
  padding:0 11px;
  border:1px solid rgba(56,126,174,.18);
  border-radius:10px;
  background:rgba(5,34,57,.44);
  color:#b9cfdd;
  font-size:11px;
  cursor:pointer;
}
.tip-payment-option:has(input:checked){
  border-color:rgba(38,157,235,.38);
  background:rgba(8,67,108,.50);
  color:#effaff;
}
.tip-modal-note{
  margin-top:12px;
  padding:9px 10px;
  border:1px solid rgba(63,130,174,.16);
  border-radius:10px;
  color:#7897ab;
  background:rgba(5,31,52,.34);
  font-size:9.8px;
  line-height:1.45;
}
.app-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(58,122,164,.14);
}
.app-modal-actions .primary-btn,
.app-modal-actions .secondary-app-btn{
  min-height:39px;
  padding:0 14px;
}

@media(max-width:820px){
  .invoice-tip-summary{grid-template-columns:minmax(0,1fr)!important;padding:10px!important}
  .invoice-tip-note{padding:2px 10px 11px!important}
  .app-modal{align-items:flex-end;padding:0}
  .app-modal-dialog{
    width:100%;
    max-height:88vh;
    border-radius:18px 18px 0 0;
    border-bottom:0;
  }
  .app-modal-head{padding:14px 14px 12px}
  .tip-form{padding:13px 14px 16px}
  .app-modal-actions{
    position:sticky;
    bottom:0;
    padding-bottom:max(0px,env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(6,30,51,.88),#061e33 28%);
  }
}


/* ================================================================
   F1 1.8.1 · tip polish + invoice-list quick action
   ================================================================ */
.invoice-total-tip{
  margin-top:10px;
  padding-top:10px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  border-top:1px solid rgba(89,151,194,.18);
}
.invoice-total-tip > div:first-child{
  min-width:0;
}
.invoice-total-tip span{
  display:block;
  color:#dff5ff;
  font-size:12px;
  font-weight:750;
}
.invoice-total-tip small{
  display:block;
  margin-top:3px;
  color:#7193aa;
  font-size:9.5px;
  line-height:1.35;
}
.invoice-total-tip-value{
  flex:0 0 auto;
  text-align:right;
}
.invoice-total-tip-value strong{
  display:block;
  color:#eaf9ff;
  font-size:17px;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.invoice-total-tip-value small{
  color:#41cf98;
  font-weight:650;
}

.tip-payment-default-note{
  margin:-2px 0 8px;
  color:#7698ad;
  font-size:10px;
  line-height:1.4;
}
.tip-payment-default-note strong{
  color:#d9f3ff;
}

.invoice-icon-action-tip{
  border-color:rgba(41,188,139,.28)!important;
  color:#55dba9!important;
}
.invoice-icon-action-tip:hover{
  background:rgba(20,105,78,.26)!important;
  border-color:rgba(52,212,155,.42)!important;
  color:#9af0d0!important;
}
.sheet-tip-action{
  color:#64dfb0!important;
}

@media(max-width:820px){
  .invoice-total-tip{
    gap:10px;
  }
  .invoice-total-tip-value strong{
    font-size:16px;
  }
}


/* ================================================================
   F1 1.8.1a · WOW tip summary polish
   ================================================================ */

/* Keep the total card visually self-contained even with long tip metadata. */
.invoice-total-premium{
  overflow:hidden;
}

/* Replace the flat tip row with a premium embedded summary card. */
.invoice-total-tip{
  position:relative;
  margin:14px 12px 12px!important;
  padding:13px 14px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px 16px!important;
  border:1px solid rgba(48,194,145,.24)!important;
  border-radius:13px!important;
  background:
    radial-gradient(circle at 92% 0%, rgba(41,184,255,.10), transparent 42%),
    linear-gradient(135deg, rgba(7,57,74,.88), rgba(5,43,62,.82))!important;
  box-shadow:
    inset 0 1px 0 rgba(167,239,255,.035),
    0 8px 22px rgba(0,0,0,.10)!important;
}

.invoice-total-tip::before{
  content:"";
  position:absolute;
  left:0;
  top:13px;
  bottom:13px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#2fe0a2,#1ea7e8);
  box-shadow:0 0 14px rgba(47,224,162,.22);
}

.invoice-total-tip > div:first-child{
  min-width:0!important;
  padding-left:4px;
}

.invoice-total-tip span{
  position:relative;
  display:flex!important;
  align-items:center;
  gap:7px;
  color:#f2fbff!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:.01em;
}

.invoice-total-tip span::before{
  content:"€";
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  border:1px solid rgba(77,218,169,.28);
  border-radius:7px;
  background:rgba(32,163,119,.12);
  color:#6ce5b8;
  font-size:11px;
  font-weight:850;
}

.invoice-total-tip > div:first-child small{
  display:block!important;
  margin:5px 0 0 29px!important;
  color:#84a6ba!important;
  font-size:9.5px!important;
  line-height:1.35!important;
  white-space:normal!important;
}

.invoice-total-tip-value{
  min-width:112px;
  text-align:right!important;
}

.invoice-total-tip-value strong{
  display:block!important;
  color:#ffffff!important;
  font-size:20px!important;
  font-weight:850!important;
  line-height:1!important;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}

.invoice-total-tip-value small{
  display:inline-block!important;
  margin-top:7px!important;
  padding:4px 7px!important;
  border:1px solid rgba(54,220,155,.20);
  border-radius:999px;
  background:rgba(29,159,111,.14);
  color:#6de7b7!important;
  font-size:8.5px!important;
  font-weight:750!important;
  line-height:1!important;
  white-space:nowrap!important;
}

/* Give the primary amount breathing room before the embedded tip card. */
.invoice-total-pay{
  margin-bottom:0!important;
}

/* Mobile: keep the WOW look, but stack naturally and never overflow. */
@media(max-width:820px){
  .invoice-total-tip{
    margin:12px 10px 10px!important;
    padding:12px 12px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:9px 12px!important;
  }

  .invoice-total-tip-value{
    min-width:92px!important;
  }

  .invoice-total-tip-value strong{
    font-size:18px!important;
  }

  .invoice-total-tip > div:first-child small{
    margin-left:29px!important;
    max-width:190px;
  }
}

@media(max-width:430px){
  .invoice-total-tip{
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
  }

  .invoice-total-tip-value{
    min-width:0!important;
    padding-left:29px;
    text-align:left!important;
  }

  .invoice-total-tip-value strong{
    font-size:19px!important;
  }

  .invoice-total-tip-value small{
    margin-top:6px!important;
  }

  .invoice-total-tip > div:first-child small{
    max-width:none!important;
  }
}


/* ================================================================
   F1 1.8.2 · WOW desktop invoice actions
   ================================================================ */

body.invoice-actions-modal-open{
  overflow:hidden;
}

/* Desktop table becomes cleaner: actions live on the entire row click. */
@media(min-width:821px){
  .invoice-list-panel .invoice-actions-header,
  .invoice-list-panel .invoice-actions-cell{
    display:none!important;
  }

  .invoice-list-panel tbody tr.invoice-desktop-action-row{
    cursor:pointer;
    transition:
      background .16s ease,
      box-shadow .16s ease,
      transform .16s ease;
  }

  .invoice-list-panel tbody tr.invoice-desktop-action-row:hover{
    background:
      linear-gradient(
        90deg,
        rgba(13,70,111,.34),
        rgba(7,43,72,.24)
      )!important;
    box-shadow:
      inset 3px 0 0 rgba(41,164,241,.58),
      inset 0 1px 0 rgba(120,199,249,.03);
  }

  .invoice-list-panel tbody tr.invoice-desktop-action-row:hover td{
    color:#dff4ff;
  }

  .invoice-list-panel tbody tr.invoice-desktop-action-row:active{
    transform:translateY(1px);
  }
}

.invoice-actions-modal[hidden]{
  display:none!important;
}

.invoice-actions-modal{
  position:fixed;
  inset:0;
  z-index:10050;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.invoice-actions-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,10,19,.76);
  backdrop-filter:blur(9px);
}

.invoice-actions-dialog{
  position:relative;
  width:min(620px,100%);
  max-height:calc(100vh - 48px);
  overflow:hidden;
  border:1px solid rgba(76,154,209,.27);
  border-radius:20px;
  background:
    radial-gradient(420px 220px at 100% 0%,rgba(18,132,220,.15),transparent 68%),
    linear-gradient(180deg,#082b48 0%,#061e33 100%);
  box-shadow:
    0 34px 100px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(190,232,255,.04);
  animation:invoiceActionsPop .16s ease-out;
}

@keyframes invoiceActionsPop{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.invoice-actions-dialog-head{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 38px;
  gap:13px;
  align-items:start;
  padding:18px 19px 16px;
  border-bottom:1px solid rgba(73,139,184,.16);
}

.invoice-actions-dialog-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(59,166,236,.24);
  border-radius:13px;
  background:
    linear-gradient(180deg,rgba(12,79,128,.88),rgba(7,52,87,.88));
  color:#7ed1ff;
  box-shadow:inset 0 1px 0 rgba(160,220,255,.06);
}

.invoice-actions-dialog-icon svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.invoice-actions-dialog-copy{
  min-width:0;
}

.invoice-actions-dialog-copy h2{
  margin:2px 0 5px;
  color:#f5fbff;
  font-size:22px;
  line-height:1.1;
  letter-spacing:-.025em;
}

.invoice-actions-dialog-copy strong{
  display:block;
  color:#dcefff;
  font-size:13px;
  line-height:1.3;
}

.invoice-actions-dialog-copy p{
  margin:3px 0 0;
  color:#7998ad;
  font-size:10.5px;
  line-height:1.4;
}

.invoice-actions-dialog-close{
  width:38px;
  height:38px;
  border:1px solid rgba(66,133,180,.22);
  border-radius:11px;
  background:rgba(5,31,52,.52);
  color:#9ebbcf;
  font-size:23px;
  line-height:1;
  cursor:pointer;
}

.invoice-actions-dialog-close:hover{
  color:#fff;
  background:#0b3a60;
}

.invoice-actions-dialog-body{
  max-height:62vh;
  overflow:auto;
  padding:16px;
}

.invoice-actions-dialog-body .sheet-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.invoice-actions-dialog-body .sheet-actions form{
  margin:0;
}

.invoice-actions-dialog-body .invoice-wow-action-wrap{
  min-width:0;
}

.invoice-actions-dialog-body .invoice-wow-action{
  width:100%;
  min-height:82px;
  padding:12px 13px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(62,137,188,.24);
  border-radius:14px;
  background:
    radial-gradient(160px 70px at 100% 0%,rgba(55,169,244,.08),transparent 72%),
    linear-gradient(145deg,rgba(9,56,91,.88),rgba(6,39,66,.88));
  color:#e9f6ff;
  text-decoration:none;
  font:inherit;
  font-size:12px;
  font-weight:760;
  line-height:1.2;
  text-align:left;
  cursor:pointer;
  transition:
    transform .14s ease,
    border-color .14s ease,
    background .14s ease,
    box-shadow .14s ease;
}

.invoice-actions-dialog-body .invoice-wow-action:hover{
  transform:translateY(-1px);
  border-color:rgba(68,174,245,.42);
  background:
    radial-gradient(180px 80px at 100% 0%,rgba(67,184,255,.14),transparent 70%),
    linear-gradient(145deg,rgba(10,67,108,.96),rgba(7,46,76,.96));
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.invoice-wow-action-icon{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:9px;
  border:1px solid rgba(91,174,228,.20);
  background:rgba(13,84,132,.46);
  color:#8ad5ff;
  font-size:11px;
  font-weight:850;
  line-height:1;
}

.invoice-wow-action.is-primary{
  border-color:rgba(27,150,242,.36);
  background:linear-gradient(145deg,#0b6fba,#09558f);
  color:#fff;
}
.invoice-wow-action.is-primary .invoice-wow-action-icon{
  border-color:rgba(255,255,255,.15);
  background:rgba(255,255,255,.10);
  color:#fff;
}

.invoice-wow-action.is-tip{
  border-color:rgba(46,205,151,.30);
  background:
    linear-gradient(145deg,rgba(7,100,77,.78),rgba(6,67,58,.78));
  color:#dffff3;
}
.invoice-wow-action.is-tip .invoice-wow-action-icon{
  border-color:rgba(87,228,181,.24);
  background:rgba(34,176,127,.15);
  color:#75ebc0;
}

.invoice-wow-action.is-warning{
  border-color:rgba(240,176,64,.26);
  color:#ffe0a1;
}

.invoice-wow-action.is-danger{
  grid-column:1 / -1;
  min-height:55px!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  border-color:rgba(236,77,102,.30)!important;
  background:rgba(104,28,44,.17)!important;
  color:#ff9eae!important;
}
.invoice-wow-action.is-danger .invoice-wow-action-icon{
  width:26px;
  height:26px;
  border-color:rgba(236,77,102,.22);
  background:rgba(149,38,57,.18);
  color:#ff8094;
}

.invoice-actions-dialog-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 16px 15px;
  border-top:1px solid rgba(68,133,177,.14);
  background:rgba(4,25,43,.38);
}

.invoice-actions-dialog-foot span{
  color:#66879d;
  font-size:9.8px;
}

.invoice-actions-dialog-foot button{
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(64,133,181,.22);
  border-radius:9px;
  background:#0a3558;
  color:#bcd6e7;
  font:inherit;
  font-size:10.5px;
  cursor:pointer;
}

/* Mobile keeps the existing row-click bottom sheet exactly as before. */
@media(max-width:820px){
  .invoice-actions-modal{
    display:none!important;
  }
}


/* ================================================================
   F1 1.8.2a · WOW invoice actions polish
   ================================================================ */

.invoice-actions-dialog{
  width:min(640px,100%)!important;
  border-color:rgba(79,162,221,.34)!important;
  background:
    radial-gradient(500px 230px at 100% -10%,rgba(25,146,235,.20),transparent 65%),
    radial-gradient(260px 160px at 0% 0%,rgba(38,196,236,.06),transparent 70%),
    linear-gradient(180deg,#082d4b 0%,#061e33 100%)!important;
  box-shadow:
    0 38px 110px rgba(0,0,0,.56),
    inset 0 1px 0 rgba(198,236,255,.055)!important;
}

.invoice-actions-dialog-head{
  padding:19px 20px 17px!important;
}

.invoice-actions-dialog-icon{
  width:47px!important;
  height:47px!important;
  border-radius:14px!important;
}

.invoice-actions-dialog-icon svg{
  width:24px!important;
  height:24px!important;
}

.invoice-actions-dialog-copy h2{
  font-size:24px!important;
  letter-spacing:-.035em!important;
}

.invoice-actions-dialog-copy>strong{
  font-size:14px!important;
  color:#f0f8ff!important;
}

.invoice-actions-customer{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(72,139,184,.13);
}

.invoice-actions-customer[hidden]{
  display:none!important;
}

.invoice-actions-customer>span{
  color:#66889f;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.invoice-actions-customer>strong{
  color:#bcd9e9;
  font-size:10.5px;
  font-weight:700;
}

.invoice-actions-customer>small{
  color:#66889f;
  font-size:9.5px;
}

.invoice-actions-dialog-body{
  padding:17px!important;
}

.invoice-actions-dialog-body .sheet-actions{
  gap:11px!important;
}

.invoice-actions-dialog-body .invoice-wow-action{
  min-height:88px!important;
  padding:13px 14px!important;
  gap:10px!important;
  border-radius:15px!important;
  font-size:12.5px!important;
  letter-spacing:-.005em;
}

.invoice-wow-action-icon{
  width:39px!important;
  height:39px!important;
  border-radius:11px!important;
  background:rgba(13,84,132,.55)!important;
}

.invoice-wow-action-icon svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.invoice-wow-action.is-tip .invoice-wow-action-icon{
  background:rgba(34,176,127,.18)!important;
}

.invoice-wow-action.is-primary .invoice-wow-action-icon{
  background:rgba(255,255,255,.12)!important;
}

/* Storno becomes a real visual danger action, not only a red outline. */
.invoice-actions-dialog-body .invoice-wow-action.is-danger{
  grid-column:1 / -1;
  min-height:62px!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  border:1px solid rgba(255,84,111,.48)!important;
  background:
    linear-gradient(180deg,rgba(183,42,67,.94),rgba(139,28,48,.96))!important;
  color:#fff!important;
  box-shadow:
    0 10px 24px rgba(100,16,33,.22),
    inset 0 1px 0 rgba(255,196,205,.10)!important;
}

.invoice-actions-dialog-body .invoice-wow-action.is-danger:hover{
  transform:translateY(-1px);
  background:
    linear-gradient(180deg,rgba(207,49,78,.98),rgba(157,31,54,.98))!important;
  border-color:rgba(255,116,137,.62)!important;
  box-shadow:
    0 13px 30px rgba(114,16,36,.30),
    inset 0 1px 0 rgba(255,211,218,.12)!important;
}

.invoice-actions-dialog-body .invoice-wow-action.is-danger .invoice-wow-action-icon{
  width:34px!important;
  height:34px!important;
  border-color:rgba(255,255,255,.18)!important;
  background:rgba(255,255,255,.11)!important;
  color:#fff!important;
}

.invoice-actions-dialog-body .invoice-wow-action.is-danger .invoice-wow-action-icon svg{
  width:18px;
  height:18px;
}

.invoice-actions-dialog-foot{
  padding:13px 17px 16px!important;
}

.invoice-actions-dialog-foot span{
  color:#7395aa!important;
}

@media(max-width:820px){
  /* Desktop modal remains disabled; mobile sheet behavior unchanged. */
}


/* ================================================================
   F1 1.8.2b · invoice email action
   ================================================================ */
.invoice-wow-action.is-mail{
  border-color:rgba(67,171,236,.28);
  background:
    linear-gradient(145deg,rgba(9,77,124,.86),rgba(7,52,88,.88));
  color:#e7f7ff;
}
.invoice-wow-action.is-mail .invoice-wow-action-icon{
  border-color:rgba(92,190,247,.22)!important;
  background:rgba(27,126,187,.16)!important;
  color:#84d7ff!important;
}
.invoice-wow-action.is-mail:hover{
  border-color:rgba(84,190,255,.44)!important;
  background:
    linear-gradient(145deg,rgba(11,94,149,.96),rgba(8,63,103,.96))!important;
}
.invoice-wow-action:disabled{
  cursor:not-allowed!important;
  opacity:.44!important;
  filter:saturate(.65);
  transform:none!important;
  box-shadow:none!important;
}
.invoice-actions-customer small:last-child{
  color:#78a9c7;
}


/* ================================================================
   F1 1.8.3 · invoice table readability + processing UX
   ================================================================ */

/* Desktop table: larger and much more balanced. */
@media(min-width:821px){
  .invoice-list-panel table.dataTable tbody td{
    font-size:12.25px!important;
    line-height:1.32!important;
    padding-top:10px!important;
    padding-bottom:10px!important;
  }

  .invoice-list-panel table.dataTable tbody td:first-child strong,
  .invoice-list-panel table.dataTable tbody td:nth-child(6) strong{
    font-size:13px!important;
    font-weight:800!important;
    letter-spacing:-.012em;
  }

  .invoice-list-panel table.dataTable thead th{
    font-size:11.25px!important;
  }

  /* Balanced column geometry after removing the oversized Kupac column. */
  .invoice-list-panel table.dataTable th:nth-child(1),
  .invoice-list-panel table.dataTable td:nth-child(1){width:11%!important}
  .invoice-list-panel table.dataTable th:nth-child(2),
  .invoice-list-panel table.dataTable td:nth-child(2){width:14%!important}
  .invoice-list-panel table.dataTable th:nth-child(3),
  .invoice-list-panel table.dataTable td:nth-child(3){width:20%!important}
  .invoice-list-panel table.dataTable th:nth-child(4),
  .invoice-list-panel table.dataTable td:nth-child(4){width:7%!important;text-align:center}
  .invoice-list-panel table.dataTable th:nth-child(5),
  .invoice-list-panel table.dataTable td:nth-child(5){width:12%!important}
  .invoice-list-panel table.dataTable th:nth-child(6),
  .invoice-list-panel table.dataTable td:nth-child(6){width:12%!important}
  .invoice-list-panel table.dataTable th:nth-child(7),
  .invoice-list-panel table.dataTable td:nth-child(7){width:11%!important}
  .invoice-list-panel table.dataTable th:nth-child(8),
  .invoice-list-panel table.dataTable td:nth-child(8){width:13%!important}

  .invoice-date-cell{
    white-space:nowrap;
  }

  .invoice-date-time{
    display:inline!important;
    margin-left:3px!important;
    color:#7397af!important;
    font-size:10px!important;
  }
}

/* Compact customer type representation. */
.invoice-type-cell{
  min-width:0;
}

.invoice-type-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:43px;
  height:23px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(61,141,195,.24);
  background:rgba(10,60,98,.42);
  color:#9fd8fb;
  font-size:9px;
  font-weight:800;
  letter-spacing:.055em;
  line-height:1;
}

.invoice-type-pill.type-b2c{
  border-color:rgba(70,161,219,.22);
  background:rgba(10,63,104,.38);
  color:#96d3fb;
}

.invoice-type-pill.type-b2b{
  border-color:rgba(49,200,148,.28);
  background:rgba(11,92,70,.31);
  color:#72e7ba;
}

.invoice-type-pill.type-b2g{
  border-color:rgba(174,120,242,.30);
  background:rgba(89,48,137,.27);
  color:#c6a4f7;
}

.invoice-type-customer{
  display:block;
  max-width:240px;
  margin-top:5px;
  overflow:hidden;
  color:#8da9bb;
  font-size:9.5px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Processing feedback shared by fiscalize/retry/reconcile and future actions. */
.invoice-actions-processing{
  padding:10px 16px 0;
}

.invoice-actions-processing[hidden],
.invoice-global-processing[hidden]{
  display:none!important;
}

.invoice-actions-processing-copy{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:8px;
}

.invoice-actions-processing-copy strong{
  color:#cfeeff;
  font-size:10.5px;
  font-weight:700;
}

.invoice-actions-processing-spinner,
.invoice-button-spinner{
  display:inline-block;
  width:15px;
  height:15px;
  flex:0 0 auto;
  border:2px solid rgba(132,204,247,.20);
  border-top-color:#52bfff;
  border-radius:50%;
  animation:invoiceSpin .72s linear infinite;
}

.invoice-button-spinner{
  width:14px;
  height:14px;
  border-color:rgba(255,255,255,.24);
  border-top-color:#fff;
}

@keyframes invoiceSpin{
  to{transform:rotate(360deg)}
}

.invoice-actions-processing-bar,
.invoice-global-processing-bar{
  height:3px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(51,111,151,.24);
}

.invoice-actions-processing-bar span,
.invoice-global-processing-bar span{
  display:block;
  width:42%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#2ca8f0,#54d0ff,#2ca8f0);
  box-shadow:0 0 12px rgba(54,183,246,.34);
  animation:invoiceProgress 1.05s ease-in-out infinite;
}

@keyframes invoiceProgress{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(340%)}
}

.invoice-actions-modal.is-processing .invoice-actions-dialog-body{
  opacity:.56;
  pointer-events:none;
  filter:saturate(.72);
}

.invoice-global-processing{
  position:fixed;
  top:18px;
  left:50%;
  z-index:12000;
  width:min(420px,calc(100vw - 28px));
  transform:translateX(-50%);
  overflow:hidden;
  border:1px solid rgba(65,154,216,.34);
  border-radius:13px;
  background:
    linear-gradient(180deg,rgba(8,49,80,.98),rgba(5,32,55,.98));
  box-shadow:0 18px 55px rgba(0,0,0,.34);
  backdrop-filter:blur(12px);
}

.invoice-global-processing-main{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 13px 9px;
}

.invoice-global-processing-main strong{
  color:#e1f4ff;
  font-size:11px;
  font-weight:750;
}

/* Slightly roomier filters/buttons to match the larger table type. */
@media(min-width:821px){
  .invoice-list-panel .dataTables_wrapper .dataTables_filter,
  .invoice-list-panel .dataTables_wrapper .dt-buttons{
    font-size:10.5px;
  }
}

/* Mobile keeps the familiar stacked date + compact type label. */
@media(max-width:820px){
  .invoice-date-cell span,
  .invoice-date-time{
    display:block!important;
  }

  .invoice-date-time{
    margin:2px 0 0!important;
    color:#7195ad!important;
    font-size:9px!important;
  }

  .invoice-type-customer{
    max-width:170px;
  }

  .invoice-list-panel table.dataTable tbody td{
    font-size:11px!important;
  }

  .invoice-global-processing{
    top:auto;
    bottom:16px;
  }
}


/* ================================================================
   F1 1.8.4 · WOW invoice table v2
   ================================================================ */

@media(min-width:821px){
  .invoice-list-panel table.dataTable{
    table-layout:fixed!important;
  }

  .invoice-list-panel table.dataTable thead th{
    height:42px!important;
    padding:8px 12px!important;
    font-size:11.75px!important;
    font-weight:750!important;
    letter-spacing:.015em;
  }

  .invoice-list-panel table.dataTable tbody td{
    min-height:47px;
    padding:11px 12px!important;
    font-size:12.5px!important;
    line-height:1.32!important;
    vertical-align:middle!important;
  }

  .invoice-list-panel table.dataTable tbody td:first-child strong{
    font-size:13.5px!important;
    font-weight:850!important;
  }

  .invoice-total-cell strong{
    font-size:13.5px!important;
    font-weight:850!important;
    color:#f7fbff;
  }

  /* Final balanced layout:
     Broj | Datum | Vrijeme | Tip | Stavke | Plaćanje | Ukupno | Napojnica | Status | Fiskalizacija */
  .invoice-list-panel table.dataTable th:nth-child(1),
  .invoice-list-panel table.dataTable td:nth-child(1){width:10%!important}

  .invoice-list-panel table.dataTable th:nth-child(2),
  .invoice-list-panel table.dataTable td:nth-child(2){width:10%!important}

  .invoice-list-panel table.dataTable th:nth-child(3),
  .invoice-list-panel table.dataTable td:nth-child(3){width:7%!important}

  .invoice-list-panel table.dataTable th:nth-child(4),
  .invoice-list-panel table.dataTable td:nth-child(4){width:17%!important}

  .invoice-list-panel table.dataTable th:nth-child(5),
  .invoice-list-panel table.dataTable td:nth-child(5){width:6%!important;text-align:center}

  .invoice-list-panel table.dataTable th:nth-child(6),
  .invoice-list-panel table.dataTable td:nth-child(6){width:13%!important}

  .invoice-list-panel table.dataTable th:nth-child(7),
  .invoice-list-panel table.dataTable td:nth-child(7){width:10%!important}

  .invoice-list-panel table.dataTable th:nth-child(8),
  .invoice-list-panel table.dataTable td:nth-child(8){width:10%!important}

  .invoice-list-panel table.dataTable th:nth-child(9),
  .invoice-list-panel table.dataTable td:nth-child(9){width:8%!important}

  .invoice-list-panel table.dataTable th:nth-child(10),
  .invoice-list-panel table.dataTable td:nth-child(10){width:9%!important}

  .invoice-date-cell,
  .invoice-time-cell{
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }

  .invoice-time-cell{
    color:#91b6cf;
    font-size:11.75px!important;
  }
}

/* Payment methods become readable visual chips. */
.payment-method-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:30px;
  padding:0 9px 0 7px;
  border:1px solid rgba(60,133,181,.19);
  border-radius:9px;
  background:rgba(6,39,65,.40);
  color:#c3dce9;
  white-space:nowrap;
}

.payment-method-icon{
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:7px;
  background:rgba(33,115,169,.13);
  color:#75c9fb;
}

.payment-method-icon svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.payment-card .payment-method-icon{
  color:#72bfff;
  background:rgba(26,110,185,.15);
}

.payment-cash .payment-method-icon{
  color:#63deb0;
  background:rgba(32,159,113,.13);
}

.payment-bank .payment-method-icon{
  color:#c1a1f5;
  background:rgba(111,72,174,.14);
}

/* Tip is useful operational info, but not part of the invoice total. */
.invoice-tip-list-cell{
  white-space:nowrap;
}

.invoice-tip-list-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:0 8px 0 6px;
  border:1px solid rgba(47,201,148,.24);
  border-radius:9px;
  background:rgba(10,92,69,.23);
  color:#6de5b8;
}

.invoice-tip-list-icon{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:rgba(35,180,130,.15);
  font-size:9px;
  font-weight:850;
}

.invoice-tip-list-pill strong{
  color:#8becc8!important;
  font-size:11px!important;
  font-weight:800!important;
  font-variant-numeric:tabular-nums;
}

.invoice-tip-none{
  color:#43657b;
}

/* Slightly stronger status pills for the roomier table. */
.invoice-list-panel .catalog-status{
  min-height:27px;
  padding:0 9px;
  font-size:9.5px;
  font-weight:700;
}

/* Type block keeps buyer context only when useful. */
.invoice-type-customer{
  max-width:210px!important;
  margin-top:5px!important;
  font-size:9.75px!important;
}

/* Mobile: keep horizontal table compact and avoid oversized chips. */
@media(max-width:820px){
  .invoice-list-panel table.dataTable tbody td{
    font-size:11px!important;
  }

  .payment-method-chip{
    padding:0 7px 0 5px;
    gap:5px;
  }

  .payment-method-icon{
    width:21px;
    height:21px;
  }

  .invoice-tip-list-pill{
    padding-right:6px;
  }
}


/* ================================================================
   F1 1.8.4a · customer snapshot + table alignment polish
   ================================================================ */

@media(min-width:821px){
  /* Tip should read naturally from the left edge, not float in the middle. */
  .invoice-list-panel table.dataTable th:nth-child(4),
  .invoice-list-panel table.dataTable td:nth-child(4){
    text-align:left!important;
  }

  /* Monetary total is easier to scan when right aligned. */
  .invoice-list-panel table.dataTable th:nth-child(7),
  .invoice-list-panel table.dataTable td:nth-child(7){
    text-align:right!important;
  }

  .invoice-list-panel table.dataTable th:nth-child(7){
    padding-right:16px!important;
  }

  .invoice-list-panel table.dataTable td:nth-child(7){
    padding-right:16px!important;
  }
}

/* Slightly stronger pills after the table typography increase. */
.invoice-type-pill{
  min-width:47px!important;
  height:26px!important;
  padding:0 9px!important;
  font-size:10px!important;
  font-weight:850!important;
  letter-spacing:.045em!important;
}

.invoice-list-panel .catalog-status{
  min-height:29px!important;
  padding:0 10px!important;
  font-size:10.25px!important;
  font-weight:760!important;
}

/* Keep secondary buyer name understated under B2B/B2G. */
.invoice-type-customer{
  margin-top:6px!important;
  font-size:9.75px!important;
  line-height:1.25!important;
}


/* ================================================================
   F1 1.8.6 · send invoice email modal
   ================================================================ */
.invoice-mail-modal[hidden]{display:none!important}
.invoice-mail-modal{
  position:fixed; inset:0; z-index:13000;
  display:grid; place-items:center; padding:18px;
}
.invoice-mail-backdrop{
  position:absolute; inset:0;
  background:rgba(0,15,27,.76);
  backdrop-filter:blur(7px);
}
.invoice-mail-dialog{
  position:relative; width:min(560px,100%); overflow:hidden;
  border:1px solid rgba(73,153,204,.30);
  border-radius:22px;
  background:
    radial-gradient(circle at 15% 0%,rgba(36,134,196,.13),transparent 31%),
    linear-gradient(180deg,#082b48 0%,#06223a 100%);
  box-shadow:0 28px 90px rgba(0,0,0,.48);
}
.invoice-mail-head{
  display:grid; grid-template-columns:48px minmax(0,1fr) 38px;
  gap:12px; align-items:center; padding:18px 20px;
  border-bottom:1px solid rgba(81,145,183,.17);
}
.invoice-mail-head-icon{
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid rgba(71,176,238,.30); border-radius:13px;
  background:linear-gradient(145deg,rgba(21,114,176,.30),rgba(10,70,112,.20));
  color:#74cbff;
}
.invoice-mail-head-icon svg,
.invoice-mail-input-wrap svg,
.invoice-mail-submit-icon svg{
  width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.invoice-mail-head-copy span{
  display:block; margin-bottom:3px; color:#58c3ff;
  font-size:9px; font-weight:850; letter-spacing:.16em;
}
.invoice-mail-head-copy h3{
  margin:0; color:#f6fbff; font-size:22px;
  font-weight:820; letter-spacing:-.025em;
}
.invoice-mail-head-copy small{
  display:block; margin-top:3px; color:#87a9bd; font-size:10px;
}
.invoice-mail-close{
  width:36px; height:36px; border:1px solid rgba(76,139,177,.20);
  border-radius:10px; background:rgba(5,33,55,.62);
  color:#8fb0c4; cursor:pointer; font-size:24px; line-height:1;
}
.invoice-mail-form{padding:20px}
.invoice-mail-recipient label{
  display:block; margin-bottom:7px; color:#d9edf8;
  font-size:11px; font-weight:720;
}
.invoice-mail-input-wrap{
  display:grid; grid-template-columns:38px minmax(0,1fr);
  align-items:center; overflow:hidden;
  border:1px solid rgba(70,151,203,.34); border-radius:12px;
  background:#092d4b; transition:.16s ease;
}
.invoice-mail-input-wrap:focus-within{
  border-color:#2da9f4; box-shadow:0 0 0 3px rgba(45,169,244,.10);
}
.invoice-mail-input-wrap>span{display:grid; place-items:center; color:#65c8ff}
.invoice-mail-input-wrap svg{width:17px;height:17px}
.invoice-mail-input-wrap input{
  min-width:0; height:46px; border:0!important; outline:0!important;
  background:transparent!important; color:#f5fbff!important;
  box-shadow:none!important; font-size:14px;
}
.invoice-mail-recipient>small{
  display:block; margin-top:7px; color:#759cb5;
  font-size:9.5px; line-height:1.45;
}
.invoice-mail-save{
  display:flex; gap:10px; align-items:flex-start;
  margin-top:15px; padding:11px 12px;
  border:1px solid rgba(64,135,180,.17); border-radius:11px;
  background:rgba(5,37,61,.42); cursor:pointer;
}
.invoice-mail-save[hidden]{display:none!important}
.invoice-mail-save input{margin-top:3px}
.invoice-mail-save span{display:block}
.invoice-mail-save strong{display:block;color:#cce7f5;font-size:10.5px}
.invoice-mail-save small{display:block;margin-top:2px;color:#6f95ac;font-size:9px}
.invoice-mail-preview{
  display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:15px;
}
.invoice-mail-preview>div{
  padding:10px 11px; border:1px solid rgba(68,138,181,.17);
  border-radius:10px; background:rgba(4,31,52,.45);
}
.invoice-mail-preview span{
  display:block; color:#668da5; font-size:8.5px;
  text-transform:uppercase; letter-spacing:.09em;
}
.invoice-mail-preview strong{
  display:block; margin-top:4px; overflow:hidden; color:#d5ebf7;
  font-size:10px; text-overflow:ellipsis; white-space:nowrap;
}
.invoice-mail-progress{
  margin-top:15px; padding:11px 12px;
  border:1px solid rgba(57,164,226,.22); border-radius:11px;
  background:rgba(7,59,95,.35);
}
.invoice-mail-progress[hidden]{display:none!important}
.invoice-mail-progress>div:first-child{
  display:flex; gap:9px; align-items:center;
  color:#d9f2ff; font-size:10px;
}
.invoice-mail-progress-bar{
  height:3px; margin-top:9px; overflow:hidden;
  border-radius:999px; background:rgba(56,111,148,.24);
}
.invoice-mail-progress-bar span{
  display:block; width:42%; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,#2ca8f0,#54d0ff,#2ca8f0);
  animation:invoiceProgress 1.05s ease-in-out infinite;
}
.invoice-mail-actions{
  display:flex; justify-content:flex-end; gap:9px;
  margin-top:20px; padding-top:15px;
  border-top:1px solid rgba(77,141,179,.15);
}
.invoice-mail-actions button{
  min-height:42px; border-radius:11px; padding:0 15px;
  font-size:11px; font-weight:750; cursor:pointer;
}
.invoice-mail-cancel{
  border:1px solid rgba(86,145,179,.25);
  background:rgba(6,36,59,.62); color:#9fbacc;
}
.invoice-mail-submit{
  display:inline-flex; gap:8px; align-items:center; justify-content:center;
  min-width:150px; border:1px solid rgba(47,173,245,.40);
  background:linear-gradient(135deg,#1598e7,#0876d8);
  color:#fff; box-shadow:0 8px 24px rgba(8,118,216,.20);
}
.invoice-mail-submit:disabled{opacity:.68;cursor:wait}
.invoice-mail-submit-icon{display:grid;place-items:center}
.invoice-mail-submit-icon svg{width:16px;height:16px}
body.invoice-mail-modal-open{overflow:hidden}

@media(max-width:620px){
  .invoice-mail-modal{padding:10px;align-items:end}
  .invoice-mail-dialog{width:100%;border-radius:20px 20px 14px 14px}
  .invoice-mail-head{grid-template-columns:42px minmax(0,1fr) 36px;padding:15px}
  .invoice-mail-head-icon{width:40px;height:40px}
  .invoice-mail-head-copy h3{font-size:19px}
  .invoice-mail-form{padding:15px}
  .invoice-mail-preview{grid-template-columns:1fr}
  .invoice-mail-actions{display:grid;grid-template-columns:1fr 1.35fr}
  .invoice-mail-actions button{width:100%}
}


/* ================================================================
   F1 1.8.6a · mail submit isolation + PDF action
   ================================================================ */
.invoice-mail-attachment-card a{
  display:inline-flex;
  align-items:center;
  margin-top:7px;
  color:#62c8ff;
  font-size:9.5px;
  font-weight:750;
  text-decoration:none;
}
.invoice-mail-attachment-card a:hover{
  color:#a5e2ff;
  text-decoration:underline;
}

/* PDF action gets its own cool blue treatment in the WOW action sheet. */
.invoice-wow-action.invoice-pdf-action{
  border-color:rgba(92,163,222,.28)!important;
  background:linear-gradient(145deg,rgba(13,73,112,.72),rgba(7,49,79,.78))!important;
}
.invoice-wow-action.invoice-pdf-action:hover{
  border-color:rgba(92,188,246,.46)!important;
  background:linear-gradient(145deg,rgba(18,92,139,.78),rgba(8,59,94,.84))!important;
}


/* ================================================================
   F1 1.8.7 · true branded PDF
   ================================================================ */
.invoice-mail-progress.is-error{
  border-color:rgba(255,83,112,.34)!important;
  background:rgba(111,24,43,.28)!important;
}
.invoice-mail-progress.is-error .invoice-actions-processing-spinner{
  display:none!important;
}
.invoice-mail-progress.is-error strong{
  color:#ffb4c0!important;
}


/* ================================================================
   F1 1.8.7a · multipart mail upload
   ================================================================ */
.invoice-mail-progress.is-success{
  border-color:rgba(35,201,145,.34)!important;
  background:rgba(9,91,69,.28)!important;
}
.invoice-mail-progress.is-success .invoice-actions-processing-spinner{
  display:none!important;
}
.invoice-mail-progress.is-success strong{
  color:#83edc7!important;
}


/* ================================================================
   F1 1.8.7e · branded PDF blank-page fix
   ================================================================ */
/*
  html2canvas/html2pdf cannot capture a document inside display:none.
  Keep the renderer fully laid out, but far outside the visible viewport.
*/
.invoice-mail-pdf-frame{
  position:fixed!important;
  left:-20000px!important;
  top:0!important;
  width:1200px!important;
  height:1800px!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  border:0!important;
  pointer-events:none!important;
  z-index:-1!important;
}


/* ================================================================
   F1 1.8.8 · invoice table desktop typography/export polish
   ================================================================ */
@media(min-width:821px){
  .invoice-list-panel .dataTables_wrapper,
  .invoice-list-panel table.dataTable,
  .invoice-list-panel table.dataTable th,
  .invoice-list-panel table.dataTable td{
    font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Arial,sans-serif!important;
  }

  .invoice-list-panel table.dataTable thead th{
    font-size:11.5px!important;
    line-height:1.2!important;
    font-weight:760!important;
    letter-spacing:.005em!important;
  }

  .invoice-list-panel table.dataTable tbody td{
    font-size:11.75px!important;
    line-height:1.28!important;
    font-weight:500!important;
    vertical-align:middle!important;
  }

  .invoice-list-panel .invoice-number-link,
  .invoice-list-panel .invoice-number-link strong,
  .invoice-list-panel .invoice-date-cell,
  .invoice-list-panel .invoice-time-cell,
  .invoice-list-panel .invoice-payment-cell,
  .invoice-list-panel .invoice-total-cell,
  .invoice-list-panel .invoice-tip-list-cell{
    font-size:11.75px!important;
    line-height:1.28!important;
  }

  .invoice-list-panel .invoice-number-link strong,
  .invoice-list-panel .invoice-total-cell strong{
    font-weight:800!important;
  }

  .invoice-type-cell{
    min-width:255px!important;
    text-align:left!important;
  }

  .invoice-type-line{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    min-width:0!important;
    width:100%!important;
  }

  .invoice-type-pill{
    flex:0 0 auto!important;
    min-width:48px!important;
    height:27px!important;
    padding:0 10px!important;
    font-size:10.75px!important;
    line-height:27px!important;
    font-weight:800!important;
    letter-spacing:.025em!important;
  }

  .invoice-type-customer{
    display:block!important;
    min-width:0!important;
    max-width:300px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    margin:0!important;
    color:#9fc4dc!important;
    font-size:10.75px!important;
    line-height:1.25!important;
    font-weight:520!important;
  }

  .invoice-list-panel .payment-method-chip{
    min-height:30px!important;
    font-size:11.25px!important;
    font-weight:600!important;
  }

  .invoice-list-panel .catalog-status{
    min-height:29px!important;
    padding:0 11px!important;
    font-size:10.75px!important;
    line-height:29px!important;
    font-weight:750!important;
  }

  .invoice-list-panel .invoice-tip-list-pill{
    min-height:29px!important;
    font-size:10.75px!important;
    font-weight:750!important;
  }

  .invoice-list-panel table.dataTable th:nth-child(4),
  .invoice-list-panel table.dataTable td:nth-child(4){
    text-align:left!important;
  }

  .invoice-list-panel table.dataTable th:nth-child(7),
  .invoice-list-panel table.dataTable td:nth-child(7){
    text-align:right!important;
  }
}


/* ================================================================
   F1 1.8.8c · invoice detail actions = WOW popup visual
   ================================================================ */
.invoice-action-card{
  display:grid!important;
  gap:10px!important;
  padding:14px!important;
}

.invoice-action-card > a,
.invoice-action-card > button,
.invoice-action-card > form > button{
  width:100%!important;
  min-height:52px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:11px!important;
  padding:9px 12px!important;
  border-radius:13px!important;
  border:1px solid rgba(62,137,188,.24)!important;
  background:
    radial-gradient(160px 70px at 100% 0%,rgba(55,169,244,.08),transparent 72%),
    linear-gradient(145deg,rgba(9,56,91,.88),rgba(6,39,66,.88))!important;
  color:#e9f6ff!important;
  text-decoration:none!important;
  font:inherit!important;
  font-size:12px!important;
  font-weight:760!important;
  line-height:1.2!important;
  text-align:left!important;
  cursor:pointer!important;
  transition:
    transform .14s ease,
    border-color .14s ease,
    background .14s ease,
    box-shadow .14s ease!important;
}

.invoice-action-card > a:hover,
.invoice-action-card > button:hover,
.invoice-action-card > form > button:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(68,174,245,.42)!important;
  background:
    radial-gradient(180px 80px at 100% 0%,rgba(67,184,255,.14),transparent 70%),
    linear-gradient(145deg,rgba(10,67,108,.96),rgba(7,46,76,.96))!important;
  box-shadow:0 10px 24px rgba(0,0,0,.12)!important;
}

.invoice-action-card > a > span,
.invoice-action-card > button > span,
.invoice-action-card > form > button > span{
  width:32px!important;
  height:32px!important;
  flex:0 0 32px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:9px!important;
  border:1px solid rgba(91,174,228,.20)!important;
  background:rgba(13,84,132,.46)!important;
  color:#8ad5ff!important;
}

.invoice-action-card > a > span svg,
.invoice-action-card > button > span svg,
.invoice-action-card > form > button > span svg{
  width:18px!important;
  height:18px!important;
}

/* POS + PDF use the same neutral card language as the list popup */
.invoice-action-primary,
.invoice-action-secondary{
  background:
    radial-gradient(160px 70px at 100% 0%,rgba(55,169,244,.08),transparent 72%),
    linear-gradient(145deg,rgba(9,56,91,.88),rgba(6,39,66,.88))!important;
  color:#e9f6ff!important;
}

/* Tip mirrors the green WOW popup action */
.invoice-action-tip{
  border-color:rgba(43,201,145,.36)!important;
  background:
    radial-gradient(170px 70px at 100% 0%,rgba(61,225,172,.12),transparent 72%),
    linear-gradient(145deg,rgba(6,91,70,.96),rgba(5,72,58,.96))!important;
  color:#9cf3d2!important;
}

.invoice-action-tip > span{
  border-color:rgba(72,224,170,.24)!important;
  background:rgba(17,130,96,.48)!important;
  color:#80edc6!important;
}

.invoice-action-tip:hover{
  border-color:rgba(78,232,179,.48)!important;
  background:
    radial-gradient(180px 80px at 100% 0%,rgba(76,237,183,.16),transparent 70%),
    linear-gradient(145deg,rgba(7,106,81,.98),rgba(5,80,64,.98))!important;
}

/* Full red storno, like WOW popup */
.invoice-action-danger{
  border-color:rgba(255,91,116,.54)!important;
  background:
    radial-gradient(190px 80px at 100% 0%,rgba(255,143,158,.10),transparent 70%),
    linear-gradient(145deg,#a91f3d,#861b35)!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(124,18,47,.16)!important;
}

.invoice-action-danger > span{
  border-color:rgba(255,255,255,.18)!important;
  background:rgba(255,255,255,.09)!important;
  color:#fff!important;
}

.invoice-action-danger:hover{
  border-color:rgba(255,132,149,.72)!important;
  background:
    radial-gradient(190px 80px at 100% 0%,rgba(255,168,180,.14),transparent 70%),
    linear-gradient(145deg,#bb2547,#941d39)!important;
}

/* Fiscalize stays primary blue */
.invoice-action-fiscalize{
  border-color:rgba(27,150,242,.40)!important;
  background:linear-gradient(145deg,#0b6fba,#09558f)!important;
  color:#fff!important;
}
.invoice-action-fiscalize > span{
  border-color:rgba(255,255,255,.15)!important;
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
}

.invoice-action-back{
  min-height:38px!important;
  justify-content:center!important;
  border-color:transparent!important;
  background:transparent!important;
  color:#8da9bc!important;
  box-shadow:none!important;
}
.invoice-action-back > svg{
  width:15px!important;
  height:15px!important;
}
.invoice-action-back:hover{
  transform:none!important;
  border-color:transparent!important;
  background:rgba(8,47,76,.28)!important;
  box-shadow:none!important;
  color:#c8e1ef!important;
}

@media(max-width:820px){
  .invoice-action-card{
    gap:8px!important;
    padding:12px!important;
  }

  .invoice-action-card > a,
  .invoice-action-card > button,
  .invoice-action-card > form > button{
    min-height:50px!important;
    border-radius:12px!important;
    font-size:11.5px!important;
  }

  .invoice-action-card > a > span,
  .invoice-action-card > button > span,
  .invoice-action-card > form > button > span{
    width:30px!important;
    height:30px!important;
    flex-basis:30px!important;
  }
}


/* ================================================================
   F1 1.8.8d · mobile row popup + detail mail action
   ================================================================ */
.invoice-mobile-action-row,
.invoice-desktop-action-row{
  cursor:pointer;
}

.invoice-action-mail{
  border-color:rgba(45,170,241,.32)!important;
  background:
    radial-gradient(170px 70px at 100% 0%,rgba(76,196,255,.12),transparent 72%),
    linear-gradient(145deg,rgba(9,73,116,.96),rgba(7,52,87,.96))!important;
  color:#bce8ff!important;
}

.invoice-action-mail > span{
  border-color:rgba(91,195,250,.26)!important;
  background:rgba(14,102,157,.46)!important;
  color:#8ed8ff!important;
}

.invoice-action-mail:hover{
  border-color:rgba(80,196,255,.48)!important;
  background:
    radial-gradient(180px 80px at 100% 0%,rgba(80,205,255,.17),transparent 70%),
    linear-gradient(145deg,rgba(11,86,136,.98),rgba(7,61,100,.98))!important;
}

.invoice-action-mail.is-disabled,
.invoice-action-mail:disabled{
  opacity:.46!important;
  cursor:not-allowed!important;
  transform:none!important;
  box-shadow:none!important;
}

@media(max-width:820px){
  .invoice-mobile-action-row{
    -webkit-tap-highlight-color:rgba(41,164,232,.10);
    touch-action:manipulation;
  }

  .invoice-mobile-action-row:active td{
    background:rgba(19,82,121,.16)!important;
  }

  .invoice-actions-dialog{
    max-height:min(88vh,720px)!important;
    overflow:auto!important;
  }
}


/* ================================================================
   F1 1.8.8e · mobile invoice actions popup restore
   ================================================================ */
/*
  Legacy 1.8.2 CSS explicitly hid the new WOW actions modal on mobile:
    @media(max-width:820px){ .invoice-actions-modal{display:none!important} }

  1.8.8d already restored the delegated mobile row click in JS, but this
  old rule still kept the modal invisible. Override it only when open.
*/
@media(max-width:820px){
  .invoice-actions-modal:not([hidden]){
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    padding:0!important;
  }

  .invoice-actions-modal .invoice-actions-backdrop{
    background:rgba(0,10,19,.78)!important;
    backdrop-filter:blur(8px)!important;
  }

  .invoice-actions-modal .invoice-actions-dialog{
    width:100%!important;
    max-width:none!important;
    max-height:min(88dvh,760px)!important;
    margin:0!important;
    overflow:auto!important;
    border-left:0!important;
    border-right:0!important;
    border-bottom:0!important;
    border-radius:22px 22px 0 0!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
    animation:invoiceActionsMobileUp .20s ease-out!important;
  }

  .invoice-actions-dialog-head{
    position:sticky!important;
    top:0!important;
    z-index:2!important;
    background:
      radial-gradient(420px 180px at 100% 0%,rgba(25,146,235,.14),transparent 68%),
      linear-gradient(180deg,#082d4b 0%,#072741 100%)!important;
  }

  .invoice-actions-dialog-body{
    padding-bottom:8px!important;
  }

  .invoice-actions-dialog-foot{
    position:sticky!important;
    bottom:0!important;
    z-index:2!important;
    background:#061e33!important;
    padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
  }

  @keyframes invoiceActionsMobileUp{
    from{opacity:0;transform:translateY(28px)}
    to{opacity:1;transform:translateY(0)}
  }
}


/* ================================================================
   F1 1.8.8f · invoice detail compact polish + unified actions
   ================================================================ */

/* Success strip: JIR is intentionally shown only in fiscal data below. */
.invoice-success-strip{
  grid-template-columns:auto 1fr!important;
}

/* Compact total card */
.invoice-total-premium{
  overflow:hidden!important;
  border-radius:16px!important;
}

.invoice-total-head{
  min-height:52px!important;
  padding:0 16px!important;
  font-size:17px!important;
  gap:8px!important;
}

.invoice-total-head span{
  font-size:15px!important;
  font-weight:780!important;
}

.invoice-total-line{
  min-height:41px!important;
  padding:0 16px!important;
  font-size:12px!important;
}

.invoice-total-line > span{
  color:#b6d0e0!important;
  font-size:11.5px!important;
  font-weight:520!important;
}

.invoice-total-line > strong{
  font-size:12.5px!important;
  font-weight:760!important;
}

.invoice-total-pay{
  margin:10px 12px 12px!important;
  min-height:54px!important;
  padding:0 12px!important;
  border:1px solid rgba(103,183,239,.24)!important;
  border-radius:12px!important;
  background:
    radial-gradient(180px 70px at 100% 0%,rgba(54,167,255,.15),transparent 72%),
    linear-gradient(145deg,rgba(13,63,99,.88),rgba(9,47,78,.88))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}

.invoice-total-pay > span{
  font-size:12px!important;
  font-weight:760!important;
  letter-spacing:.01em!important;
}

.invoice-total-pay > strong{
  font-size:21px!important;
  line-height:1!important;
  font-weight:850!important;
  color:#49a8ff!important;
}

.invoice-total-tip{
  margin:0 12px 12px!important;
  padding:10px 12px!important;
  border-radius:11px!important;
  font-size:11px!important;
}

/* Compact information card */
.invoice-info-card .invoice-premium-card-head{
  min-height:48px!important;
  padding:0 15px!important;
}

.invoice-info-card .invoice-card-title h2{
  font-size:13px!important;
}

.invoice-info-list{
  padding:4px 15px 8px!important;
}

.invoice-info-list > div{
  padding:10px 0!important;
  gap:2px!important;
}

.invoice-info-list > div > span{
  font-size:9px!important;
  line-height:1.15!important;
  text-transform:uppercase!important;
  letter-spacing:.045em!important;
  color:#729bb4!important;
}

.invoice-info-list > div > strong{
  font-size:12.5px!important;
  line-height:1.25!important;
  font-weight:760!important;
  color:#f1f8fc!important;
}

.invoice-info-list > div > small{
  margin-top:2px!important;
  font-size:10px!important;
  line-height:1.25!important;
  color:#82aac2!important;
}

/* One unified action launcher */
.invoice-detail-actions-launcher{
  margin:0!important;
}

.invoice-detail-actions-button{
  width:100%!important;
  min-height:64px!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr) 18px!important;
  align-items:center!important;
  gap:11px!important;
  padding:10px 13px!important;
  border:1px solid rgba(50,165,238,.34)!important;
  border-radius:15px!important;
  background:
    radial-gradient(240px 90px at 100% 0%,rgba(42,174,255,.18),transparent 70%),
    linear-gradient(145deg,rgba(9,79,126,.98),rgba(7,57,95,.98))!important;
  color:#fff!important;
  text-align:left!important;
  cursor:pointer!important;
  box-shadow:0 12px 28px rgba(0,0,0,.12)!important;
  transition:.16s ease!important;
}

.invoice-detail-actions-button:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(70,190,255,.52)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.16)!important;
}

.invoice-detail-actions-icon{
  width:36px!important;
  height:36px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(104,203,255,.26)!important;
  border-radius:10px!important;
  background:rgba(14,111,169,.48)!important;
  color:#9ee0ff!important;
}

.invoice-detail-actions-icon svg{
  width:19px!important;
  height:19px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.7!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.invoice-detail-actions-copy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:2px!important;
}

.invoice-detail-actions-copy strong{
  font-size:13px!important;
  font-weight:800!important;
}

.invoice-detail-actions-copy small{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:9.5px!important;
  color:#9bc6de!important;
}

.invoice-detail-actions-arrow{
  font-size:24px!important;
  line-height:1!important;
  color:#8fd6ff!important;
}

/* Detail uses the same WOW action grid as the invoice list popup. */
.invoice-detail-actions-modal .invoice-actions-dialog-body{
  padding-top:18px!important;
}

.invoice-detail-actions-modal .invoice-wow-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:11px!important;
}

.invoice-detail-actions-modal .invoice-wow-action{
  width:100%!important;
  min-height:91px!important;
}

.invoice-detail-fiscalize-action{
  display:contents!important;
}

.invoice-detail-fiscalize-action .invoice-wow-action{
  width:100%!important;
}

.invoice-detail-actions-modal .invoice-wow-storno{
  width:100%!important;
  min-height:58px!important;
  margin-top:11px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  border:1px solid rgba(255,111,130,.52)!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,#b62745,#941f3b)!important;
  color:#fff!important;
  font:inherit!important;
  font-size:12px!important;
  font-weight:800!important;
  cursor:pointer!important;
}

.invoice-detail-actions-modal .invoice-wow-storno .invoice-wow-action-icon{
  background:rgba(255,255,255,.09)!important;
  border-color:rgba(255,255,255,.18)!important;
  color:#fff!important;
}

.invoice-detail-actions-modal .invoice-wow-action.is-disabled{
  opacity:.42!important;
  cursor:not-allowed!important;
}

@media(max-width:820px){
  .invoice-total-premium{
    border-radius:14px!important;
  }

  .invoice-total-pay{
    margin:9px 10px 10px!important;
  }

  .invoice-info-list{
    padding-left:13px!important;
    padding-right:13px!important;
  }

  .invoice-detail-actions-button{
    min-height:60px!important;
    border-radius:14px!important;
  }

  .invoice-detail-actions-modal .invoice-wow-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .invoice-detail-actions-modal .invoice-wow-action{
    min-height:90px!important;
  }
}


/* ================================================================
   F1 1.8.8g · hero metadata + total spacing polish
   ================================================================ */

/* Give the first total row some breathing room under the blue header. */
.invoice-total-premium .invoice-total-head + .invoice-total-line{
  margin-top:6px!important;
}

.invoice-total-premium .invoice-total-line{
  padding-left:16px!important;
  padding-right:16px!important;
}

/* Hero metadata: time/date on the left, operational state on the far right. */
.invoice-premium-hero-copy{
  min-width:0!important;
  width:100%!important;
}

.invoice-premium-meta{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin-top:8px!important;
}

.invoice-hero-time{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  min-height:28px!important;
  padding:0 10px!important;
  border:1px solid rgba(101,170,214,.18)!important;
  border-radius:9px!important;
  background:rgba(5,39,66,.36)!important;
  color:#b8d7e9!important;
  font-size:10.5px!important;
  font-weight:560!important;
  letter-spacing:.005em!important;
  white-space:nowrap!important;
}

.invoice-hero-time-icon{
  width:15px!important;
  height:15px!important;
  display:grid!important;
  place-items:center!important;
  color:#79c9f6!important;
}

.invoice-hero-time-icon svg{
  width:14px!important;
  height:14px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.invoice-hero-state{
  margin-left:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}

.invoice-premium-meta .invoice-payment-pill,
.invoice-premium-meta .catalog-status{
  min-height:28px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 10px!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:750!important;
}

/* Slightly refine the amount block bottom spacing. */
.invoice-total-pay{
  margin-top:11px!important;
  margin-bottom:12px!important;
}

/* Mobile: keep the same hierarchy but allow wrapping naturally. */
@media(max-width:820px){
  .invoice-premium-meta{
    align-items:flex-start!important;
    flex-wrap:wrap!important;
    row-gap:8px!important;
  }

  .invoice-hero-time{
    order:1!important;
  }

  .invoice-hero-state{
    order:2!important;
    width:100%!important;
    margin-left:0!important;
    justify-content:flex-start!important;
  }
}


/* ================================================================
   F1 1.8.8h · total-row centering + mobile table no-scroll polish
   ================================================================ */

/* First total row must breathe exactly like the other rows. */
.invoice-total-premium .invoice-total-head + .invoice-total-line{
  margin-top:0!important;
}

.invoice-total-premium .invoice-total-line{
  min-height:42px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}

.invoice-total-premium .invoice-total-line > span,
.invoice-total-premium .invoice-total-line > strong{
  display:flex!important;
  align-items:center!important;
  min-height:42px!important;
  line-height:1.2!important;
}

/* Mobile detail tables: fit the viewport instead of forcing a scrollbar. */
@media(max-width:820px){
  .invoice-detail-table-scroll{
    overflow-x:visible!important;
    overflow-y:visible!important;
  }

  .invoice-premium-table{
    width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
  }

  .invoice-premium-table th,
  .invoice-premium-table td{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }

  /* Items: keep the four business-critical columns visible. */
  .invoice-items-table th:nth-child(3),
  .invoice-items-table td:nth-child(3),
  .invoice-items-table th:nth-child(5),
  .invoice-items-table td:nth-child(5),
  .invoice-items-table th:nth-child(6),
  .invoice-items-table td:nth-child(6){
    display:none!important;
  }

  .invoice-items-table th,
  .invoice-items-table td{
    padding:9px 7px!important;
    font-size:9.5px!important;
    line-height:1.25!important;
  }

  .invoice-items-table th:nth-child(1),
  .invoice-items-table td:nth-child(1){
    width:44%!important;
    text-align:left!important;
  }

  .invoice-items-table th:nth-child(2),
  .invoice-items-table td:nth-child(2){
    width:16%!important;
    text-align:right!important;
  }

  .invoice-items-table th:nth-child(4),
  .invoice-items-table td:nth-child(4){
    width:20%!important;
    text-align:right!important;
  }

  .invoice-items-table th:nth-child(7),
  .invoice-items-table td:nth-child(7){
    width:20%!important;
    text-align:right!important;
  }

  .invoice-items-table td:first-child strong{
    display:block!important;
    font-size:9.75px!important;
    line-height:1.25!important;
  }

  .invoice-items-table td:first-child small{
    display:block!important;
    margin-top:2px!important;
    font-size:8.5px!important;
    line-height:1.2!important;
  }

  /* Tax table can keep all four columns with compact spacing. */
  .invoice-tax-table th,
  .invoice-tax-table td{
    padding:9px 6px!important;
    font-size:9px!important;
    line-height:1.2!important;
  }

  .invoice-tax-table th:nth-child(1),
  .invoice-tax-table td:nth-child(1){
    width:28%!important;
    text-align:left!important;
  }

  .invoice-tax-table th:nth-child(2),
  .invoice-tax-table td:nth-child(2),
  .invoice-tax-table th:nth-child(3),
  .invoice-tax-table td:nth-child(3),
  .invoice-tax-table th:nth-child(4),
  .invoice-tax-table td:nth-child(4){
    width:24%!important;
    text-align:right!important;
  }

  .invoice-tax-table .invoice-tax-chip{
    display:inline-flex!important;
    max-width:100%!important;
    padding:4px 6px!important;
    font-size:8px!important;
    white-space:nowrap!important;
  }
}


/* ================================================================
   F1 1.8.9 · fiscal storno / credit note
   ================================================================ */
.catalog-status.storno{
  border-color:rgba(255,89,112,.42)!important;
  background:rgba(151,30,55,.24)!important;
  color:#ff9aac!important;
}

.invoice-storno-strip{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  margin:0 0 14px;
  padding:10px 14px;
  border:1px solid rgba(255,92,115,.34);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(111,23,44,.42),rgba(62,18,35,.30));
  color:#ffd4da;
}

.invoice-storno-strip > span{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  flex:0 0 28px;
  border-radius:8px;
  background:rgba(255,255,255,.07);
  color:#ff8da0;
}

.invoice-storno-strip > span svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.invoice-storno-strip strong{
  font-size:11.5px;
  font-weight:800;
}

.invoice-storno-strip a{
  margin-left:auto;
  color:#ffb6c2;
  font-size:10.5px;
  font-weight:700;
  text-decoration:none;
}

.invoice-storno-strip.is-credit-note{
  border-color:rgba(255,171,70,.35);
  background:linear-gradient(145deg,rgba(111,63,17,.34),rgba(65,39,15,.28));
  color:#ffe0b2;
}

.invoice-detail-storno-form{
  margin:11px 0 0;
}

.invoice-detail-storno-form .invoice-wow-storno{
  margin-top:0!important;
}

.invoice-wow-storno.is-done{
  text-decoration:none!important;
  background:linear-gradient(145deg,#753047,#592438)!important;
}

@media(max-width:820px){
  .invoice-storno-strip{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .invoice-storno-strip a{
    width:100%;
    margin-left:38px;
  }
}

/* 1.8.9a: related fiscal invoices, note and detail */
.invoice-storno-ref{display:inline-flex;max-width:100%;margin-top:5px;padding:4px 7px;border-radius:7px;border:1px solid rgba(240,99,118,.38);background:rgba(145,30,54,.19);color:#ff9eb2!important;font-size:10px;font-weight:750;text-decoration:none;white-space:normal}
.invoice-storno-ref:hover{background:rgba(145,30,54,.36)}
.invoice-list-note{display:block;max-width:245px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:5px;color:#86a9c2;font-size:10px}
.invoice-storno-detail-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.invoice-storno-detail-copy small{font-size:11px;font-weight:500;line-height:1.4;color:#f1bac3}
.invoice-storno-detail-copy code{font-size:10px;overflow-wrap:anywhere;color:inherit}
.invoice-storno-strip:has(.invoice-storno-detail-copy){align-items:flex-start}
@media(max-width:820px){.invoice-storno-strip:has(.invoice-storno-detail-copy) a{width:auto;margin-left:38px}.invoice-list-note{max-width:135px}}

/* 1.8.9b: invoice date/time consolidated, preserve full storno references */
@media (min-width:821px) {
  .invoice-list-panel table.dataTable th:nth-child(1),
  .invoice-list-panel table.dataTable td:nth-child(1){width:24%!important;max-width:none!important;text-align:left!important}
  .invoice-list-panel table.dataTable th:nth-child(2),
  .invoice-list-panel table.dataTable td:nth-child(2){width:12%!important;text-align:left!important}
  .invoice-list-panel table.dataTable th:nth-child(3),
  .invoice-list-panel table.dataTable td:nth-child(3){width:16%!important;text-align:left!important}
  .invoice-list-panel table.dataTable th:nth-child(4),
  .invoice-list-panel table.dataTable td:nth-child(4){width:5%!important;text-align:center!important}
  .invoice-list-panel table.dataTable th:nth-child(5),
  .invoice-list-panel table.dataTable td:nth-child(5){width:11%!important;text-align:left!important}
  .invoice-list-panel table.dataTable th:nth-child(6),
  .invoice-list-panel table.dataTable td:nth-child(6){width:9%!important;text-align:right!important}
  .invoice-list-panel table.dataTable th:nth-child(7),
  .invoice-list-panel table.dataTable td:nth-child(7){width:7%!important}
  .invoice-list-panel table.dataTable th:nth-child(8),
  .invoice-list-panel table.dataTable td:nth-child(8){width:8%!important}
  .invoice-list-panel table.dataTable th:nth-child(9),
  .invoice-list-panel table.dataTable td:nth-child(9){width:8%!important}
}
.invoice-list-panel .invoice-number-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.invoice-list-panel .invoice-number-main .invoice-number-link,
.invoice-list-panel .invoice-number-main .invoice-number-link strong{
  width:auto!important;max-width:none!important;white-space:nowrap!important;
  overflow:visible!important;text-overflow:clip!important;flex:0 0 auto;
}
.invoice-list-panel .invoice-number-main .invoice-storno-ref{
  display:inline-flex!important;align-items:center;max-width:none!important;
  margin:0!important;white-space:nowrap!important;flex:0 0 auto!important;
}
.invoice-list-panel .invoice-datetime-cell{white-space:nowrap!important;font-variant-numeric:tabular-nums}
.invoice-list-panel .invoice-datetime-date{font-weight:600}
.invoice-list-panel .invoice-datetime-time{margin-left:5px;color:#8dbfdd;font-size:inherit}
.invoice-list-panel .invoice-number-cell .invoice-list-note{display:block;margin-top:5px}
@media (max-width:820px){
  .invoice-list-panel .invoice-number-main{flex-wrap:wrap;align-items:flex-start;gap:5px 7px}
  .invoice-list-panel .invoice-number-main .invoice-storno-ref{white-space:normal!important;max-width:100%!important}
  .invoice-list-panel .invoice-datetime-cell{white-space:normal!important}
  .invoice-list-panel .invoice-datetime-time{display:block;margin-left:0}
}

/* Dashboard WOW 2.0 · isolated layout / no changes to RCC dynamic banner */
.sidebar-user{grid-template-columns:minmax(0,1fr) 22px!important;padding:10px 13px!important}
.dashboard-v2 .dash-hero{background:radial-gradient(700px 190px at 94% 10%,rgba(19,120,240,.23),transparent 76%),linear-gradient(125deg,#04192c,#092e51);border-color:rgba(63,152,217,.29);min-height:112px}
.dash-eyebrow{font-size:9px;font-weight:800;letter-spacing:.15em;color:#65c5ff;margin-bottom:7px}
.dashboard-v2 .dash-hero p{font-size:11.5px;color:#8aaec7;margin:7px 0 0}
.dashboard-v2 .dash-kpis{gap:13px}.dashboard-v2 .kpi-card{min-height:140px;padding:17px 18px;background-image:radial-gradient(190px 100px at 100% 0%,rgba(40,143,255,.10),transparent),linear-gradient(145deg,rgba(9,45,75,.96),rgba(3,27,48,.96))}
.dashboard-v2 .kpi-card.kpi-green{background:linear-gradient(145deg,#083e49,#042437)}.dashboard-v2 .kpi-card.kpi-purple{background:linear-gradient(145deg,#243d75,#102742)}.dashboard-v2 .kpi-card.kpi-teal{background:linear-gradient(145deg,#075252,#072a3a)}
.dashboard-v2 .kpi-value{font-size:clamp(22px,2vw,29px);position:relative;z-index:1}.dash-kpi-sep{font-size:17px;color:#6a93ad}.dashboard-v2 .kpi-meta{font-size:10.5px}.dash-kpi-mark{position:absolute;right:17px;bottom:13px;font-size:35px;color:rgba(101,181,245,.08);font-weight:800}
.dash-top-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(285px,.75fr);gap:14px;margin-top:16px}.dash-top-side{display:grid;grid-template-rows:auto 1fr;gap:14px;min-width:0}.dash-chart-panel .panel-inner{padding:20px}.dash-chart-panel .panel-head{margin-bottom:19px}.dashboard-v2 .panel h2{font-size:15px}.dashboard-v2 .panel-icon{width:40px;height:40px;border-radius:11px}.dashboard-v2 .panel-icon svg{width:19px;height:19px}.dashboard-v2 .panel-sub{font-size:10.5px}.dash-switch{display:flex;padding:4px;border-radius:10px;border:1px solid rgba(54,122,171,.23);background:#041d33;gap:3px}.dash-switch button{border:0;background:transparent;color:#7d9eb5;padding:7px 10px;border-radius:7px;font-size:10.5px;cursor:pointer}.dash-switch button.active{background:#0c568d;color:#fff}.dash-chart-summary{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}.dash-chart-summary span{font-size:10px;color:#83a1b5}.dash-chart-summary strong{font-size:23px;letter-spacing:-.035em}.dash-chart-summary small{font-size:10px;color:#6c9cbd}
.dash-bars{height:195px;display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;align-items:end;gap:7px;border-bottom:1px solid rgba(95,160,202,.20);padding:0 0 2px;min-width:0}.dash-bar-col{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:end;min-width:0}.dash-bar-shaft{height:calc(100% - 23px);width:100%;display:flex;align-items:end;justify-content:center}.dash-bar{width:min(72%,38px);min-height:3px;border-radius:5px 5px 1px 1px;background:linear-gradient(180deg,#45bcff,#087ad6);box-shadow:0 0 16px rgba(28,149,246,.14)}.dash-bar.negative{background:linear-gradient(180deg,#f18a8d,#b33e62)}.dash-bar-col span{height:23px;display:flex;align-items:end;justify-content:center;color:#7090a7;font-size:9px;white-space:nowrap}.dash-chart-foot{margin-top:14px;font-size:9.5px;color:#7391a7}
.dash-status-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.dash-status-grid>div{padding:12px;border:1px solid rgba(64,133,178,.19);background:rgba(4,28,49,.6);border-radius:10px}.dash-status-grid span{display:block;font-size:10px;color:#7f9cb0}.dash-status-grid strong{display:block;font-size:23px;margin-top:6px;color:#d4e6f4}.dash-status-grid strong.good{color:#56e3b3}.dash-status-grid strong.warn{color:#efc17d}.dash-status-grid strong.danger{color:#ff899d}.dash-payments{display:grid;gap:2px}.dash-payment-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 2px;border-bottom:1px solid rgba(61,119,159,.16);font-size:11px}.dash-payment-row:last-child{border:0}.dash-pay-icon{display:grid;place-items:center;width:23px;height:23px;border-radius:8px;background:#0d4970;color:#5bbdff}.dash-pay-icon.cash{background:#074946;color:#57e4b1}.dash-payment-row small{display:block;color:#7193aa;font-size:9px;margin-top:3px}.dash-payment-row strong{font-size:11.5px}.dash-empty{color:#7996aa;font-size:11px;padding:14px 0}
.dash-bottom-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(285px,.75fr);gap:14px;margin-top:14px}.dash-bottom-side{min-width:0}.dash-bottom-side .service-row{grid-template-columns:28px minmax(0,1fr) auto}.dash-panel-bottom{text-align:right;margin-top:12px}.dash-recent-panel{overflow:hidden}.dash-table-wrap{padding:0 12px 13px;overflow-x:auto}.dash-recent-table{width:100%;min-width:0;table-layout:auto}.dash-recent-table td,.dash-recent-table th{padding:12px 9px;font-size:10.5px}.dash-recent-table th{font-size:9.5px}.dash-recent-table td:nth-child(2) small{display:block;color:#719bb5;font-size:9px;margin-top:3px}.dash-recent-table .dash-amount{font-weight:780;white-space:nowrap}.dash-storno-tag{display:block;margin-top:4px;font-size:8px;color:#ff91a0;letter-spacing:.05em}.dash-recent-table .catalog-status{font-size:9px;min-height:22px;padding:0 7px}
.dashboard-v2 .dashboard-dynamic-banner{margin-top:14px}
@media(max-width:1120px){.dash-top-grid,.dash-bottom-grid{grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr)}}
@media(max-width:980px){.dash-top-grid,.dash-bottom-grid{grid-template-columns:1fr}.dash-top-side{grid-template-columns:1fr 1fr;grid-template-rows:auto}.dash-bottom-side{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:12px}.dashboard-v2 .dashboard-dynamic-banner{margin-top:0}}
@media(max-width:680px){.dash-top-side,.dash-bottom-side{grid-template-columns:1fr}.dashboard-v2 .dashboard-dynamic-banner{margin-top:0}.dash-chart-panel .panel-inner{padding:14px}.dash-bars{gap:4px;height:170px}.dash-chart-panel:has(.dash-switch button[data-period="30"].active) .dash-bar-col span{display:none}.dash-chart-panel:has(.dash-switch button[data-period="30"].active) .dash-bar-shaft{height:100%}.dash-recent-table th:nth-child(4),.dash-recent-table td:nth-child(4){display:none}.dash-recent-table td,.dash-recent-table th{padding:10px 5px;font-size:9px;white-space:normal}.dash-recent-table .catalog-status{font-size:8px}.dash-recent-table td:first-child strong{white-space:nowrap}.dash-recent-table .dash-amount{white-space:nowrap}}
@media(max-width:520px){.dashboard-v2 .dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}.dashboard-v2 .kpi-card{min-height:126px;padding:12px}.dashboard-v2 .kpi-icon{width:37px;height:37px}.dashboard-v2 .kpi-value{font-size:clamp(17px,4.2vw,24px)}.dashboard-v2 .kpi-top{gap:7px}.dashboard-v2 .kpi-label{font-size:10px}.dashboard-v2 .kpi-meta{font-size:9px}.dashboard-v2 .dash-hero{padding:18px}}


/* Dashboard WOW 2.0.2: refined F1 cards + payment methods */
.dashboard-v2 .dash-status-grid>div{
  position:relative;isolation:isolate;overflow:hidden;min-height:82px;
  padding:13px 14px;border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.dashboard-v2 .dash-status-grid>div::after{
  content:"";position:absolute;inset:auto -18px -32px auto;
  width:92px;height:92px;border-radius:50%;pointer-events:none;
  background:var(--dash-glow,rgba(72,146,203,.12));filter:blur(28px);opacity:.65;
}
.dashboard-v2 .dash-status-grid>div:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.14)}
.dashboard-v2 .dash-status-grid>div>span{position:relative;z-index:1;font-size:10px;letter-spacing:.01em;color:#afc9da}
.dashboard-v2 .dash-status-grid>div>strong{position:relative;z-index:1;margin-top:9px;font-size:25px;line-height:1.1;font-weight:800;letter-spacing:-.035em}
.dashboard-v2 .dash-status-grid .dash-status-success{
  --dash-glow:rgba(30,232,168,.23);border-color:rgba(54,215,160,.31);
  background:radial-gradient(ellipse at 95% 95%,rgba(24,157,114,.21),transparent 70%),linear-gradient(135deg,#0b383e,#08283c 75%);
}
.dashboard-v2 .dash-status-grid .dash-status-pending{
  --dash-glow:rgba(247,184,75,.23);border-color:rgba(236,166,67,.28);
  background:radial-gradient(ellipse at 95% 95%,rgba(183,112,30,.19),transparent 70%),linear-gradient(135deg,#283341,#09263e 78%);
}
.dashboard-v2 .dash-status-grid .dash-status-error{
  --dash-glow:rgba(255,91,126,.24);border-color:rgba(237,95,123,.29);
  background:radial-gradient(ellipse at 95% 95%,rgba(170,49,83,.20),transparent 70%),linear-gradient(135deg,#32253b,#10243c 78%);
}
.dashboard-v2 .dash-status-grid .dash-status-storno{
  --dash-glow:rgba(164,128,255,.25);border-color:rgba(151,124,233,.28);
  background:radial-gradient(ellipse at 95% 95%,rgba(120,70,181,.22),transparent 70%),linear-gradient(135deg,#292b50,#10253e 78%);
}
.dashboard-v2 .dash-status-grid .dash-status-storno strong{color:#c4b5ff}
.dashboard-v2 .dash-payments{gap:9px}
.dashboard-v2 .dash-payment-row{
  grid-template-columns:37px minmax(0,1fr) auto;
  min-height:57px;gap:11px;padding:10px 12px;
  border:1px solid rgba(72,141,186,.19);border-radius:11px;
  background:linear-gradient(120deg,rgba(9,46,73,.75),rgba(5,31,52,.57));
  transition:background .17s ease,border-color .17s ease;
}
.dashboard-v2 .dash-payment-row:hover{border-color:rgba(87,172,228,.36);background:linear-gradient(120deg,rgba(12,61,96,.78),rgba(6,38,62,.70))}
.dashboard-v2 .dash-payment-row .dash-pay-icon{
  width:35px;height:35px;border-radius:10px;
  border:1px solid rgba(67,163,225,.23);
  background:linear-gradient(145deg,#0d5084,#092f51);color:#79caff;
}
.dashboard-v2 .dash-payment-row .dash-pay-icon.cash{
  border-color:rgba(53,214,161,.23);
  background:linear-gradient(145deg,#096658,#073b40);color:#75edbc;
}
.dashboard-v2 .dash-payment-row .dash-pay-icon.bank{
  background:linear-gradient(145deg,#3a4b8a,#142e57);color:#c2ceff;
}
.dashboard-v2 .dash-payment-row .dash-pay-icon svg{
  width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;
}
.dashboard-v2 .dash-payment-row>span:nth-child(2){font-size:11.5px;font-weight:630;color:#e3f1fa}
.dashboard-v2 .dash-payment-row small{font-size:9.5px;font-weight:450;color:#819db0;margin-top:4px}
.dashboard-v2 .dash-payment-row>strong{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;color:#f7fbff}
@media(max-width:420px){
 .dashboard-v2 .dash-status-grid>div{min-height:77px;padding:10px}
 .dashboard-v2 .dash-status-grid>div>strong{font-size:22px}
 .dashboard-v2 .dash-payment-row{grid-template-columns:32px minmax(0,1fr) auto;padding:9px;gap:8px}
 .dashboard-v2 .dash-payment-row .dash-pay-icon{width:31px;height:31px}
 .dashboard-v2 .dash-payment-row>strong{font-size:11px}
}