@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800&display=swap');

/* ──────────────────────────────────────────────────────────────────────────
   VigoLager — Farbsystem (Grün / Blau / Orange) + Hell-/Dunkelmodus
   Alte Variablennamen (--vl-forest, --vl-mint, --vl-lime, --vl-teal,
   --vl-amber …) bleiben als Aliase erhalten, damit bestehende Inline-Styles
   in den PHP-Seiten automatisch die neue Palette (inkl. Dark-Mode) ziehen.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Marken-Akzentfarben */
  --vl-green:      #1fa052;
  --vl-green-dk:    #157a3e;
  --vl-green-text:  #157a3e;
  --vl-blue:        #2f6fe0;
  --vl-blue-dk:     #1f4fb0;
  --vl-orange:      #ef8a1c;
  --vl-orange-dk:   #c66e0f;
  --vl-red:         #d64545;

  /* Dunkle Fläche (Sidebar / Header) — bleibt in beiden Modi dunkel,
     jetzt als Grün→Blau-Verlauf statt Violett */
  --vl-dark:        #0e2a22;
  --vl-dark2:       #123b52;

  /* Strukturelle Töne — hell */
  --vl-bg:          #f3f6f4;
  --vl-surface:     #ffffff;
  --vl-surface-alt: #f5faf7;
  --vl-surface-hover:#eaf4ff;
  --vl-ink:         #1b2420;
  --vl-text-muted:  #64766c;
  --vl-text-faint:  #93a79c;
  --vl-gray:        #dde6e0;
  --vl-shadow:        rgba(14,42,34,.10);
  --vl-shadow-strong: rgba(14,42,34,.22);
  --vl-shadow-dark-el: rgba(0,0,0,.32); /* for elements already on the dark sidebar */

  /* Aliase für ältere Bezeichner, die noch in PHP-Inline-Styles vorkommen */
  --vl-forest: var(--vl-dark);
  --vl-mint:   var(--vl-blue);
  --vl-lime:   var(--vl-green);
  --vl-teal:   var(--vl-blue);
  --vl-amber:  var(--vl-orange);

  color-scheme: light;
}

/* Dunkelmodus — per Umschalter (data-theme="dark") oder, ohne explizite
   Wahl, nach Systemeinstellung (prefers-color-scheme) */
:root[data-theme="dark"] {
  --vl-green:      #35c777;
  --vl-green-dk:    #27a35f;
  --vl-green-text:  #4fe08f;
  --vl-blue:        #5c92ef;
  --vl-blue-dk:     #3f72d6;
  --vl-orange:      #ffa23e;
  --vl-orange-dk:   #e8872a;
  --vl-red:         #ef6464;

  --vl-dark:        #081712;
  --vl-dark2:       #0d2436;

  --vl-bg:          #101814;
  --vl-surface:     #192620;
  --vl-surface-alt: #1e2c25;
  --vl-surface-hover:#223326;
  --vl-ink:         #e8f1ec;
  --vl-text-muted:  #9fb3a8;
  --vl-text-faint:  #6c8278;
  --vl-gray:        #2b3a33;
  --vl-shadow:        rgba(0,0,0,.45);
  --vl-shadow-strong: rgba(0,0,0,.6);
  --vl-shadow-dark-el: rgba(0,0,0,.55);

  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --vl-green:      #35c777;
    --vl-green-dk:    #27a35f;
    --vl-green-text:  #4fe08f;
    --vl-blue:        #5c92ef;
    --vl-blue-dk:     #3f72d6;
    --vl-orange:      #ffa23e;
    --vl-orange-dk:   #e8872a;
    --vl-red:         #ef6464;

    --vl-dark:        #081712;
    --vl-dark2:       #0d2436;

    --vl-bg:          #101814;
    --vl-surface:     #192620;
    --vl-surface-alt: #1e2c25;
    --vl-surface-hover:#223326;
    --vl-ink:         #e8f1ec;
    --vl-text-muted:  #9fb3a8;
    --vl-text-faint:  #6c8278;
    --vl-gray:        #2b3a33;
    --vl-shadow:        rgba(0,0,0,.45);
    --vl-shadow-strong: rgba(0,0,0,.6);
    --vl-shadow-dark-el: rgba(0,0,0,.55);

    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif; background:var(--vl-bg); color:var(--vl-ink); }
body { transition: background-color .2s ease, color .2s ease; }
a { color: var(--vl-blue); text-decoration:none; }
a:hover { text-decoration:underline; }

.vl-shell { display:flex; min-height:100vh; }
.vl-sidebar {
  width:252px; flex-shrink:0; padding:20px 14px 24px;
  background:linear-gradient(165deg, var(--vl-dark) 0%, var(--vl-dark2) 100%); color:rgba(255,255,255,.92);
  box-shadow: 2px 0 24px var(--vl-shadow-dark-el);
  position: relative; z-index: 5; overflow: hidden;
}
.vl-sidebar::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(520px 260px at -10% -10%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(420px 220px at 110% 15%, rgba(255,255,255,.045), transparent 55%);
}
.vl-sidebar .logo-wrap { text-align:center; padding:14px 8px 18px; }
.vl-sidebar .logo-wrap .logo-card {
  display:inline-block; background:#fff; border-radius:10px; padding:10px 16px;
  box-shadow:0 6px 16px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.08) inset;
  transition: transform .18s ease, box-shadow .18s ease;
}
.vl-sidebar .logo-wrap .logo-card:hover { transform: translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.4); }
.vl-sidebar .logo-wrap img { max-width:150px; width:100%; display:block; }
.vl-sidebar .app-title-row { display:flex; align-items:center; justify-content:center; gap:8px; margin:-6px 0 14px; }
.vl-sidebar .app-title { text-align:center; color:#fff; font-weight:800; font-size:1.05rem; letter-spacing:.3px; }

/* ── Theme-Umschalter (Hell/Dunkel) ──────────────────────────────────────── */
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center; gap:0;
  width:30px; height:30px; border-radius:999px; border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08); color:#fff; cursor:pointer; font-size:.9rem; line-height:1;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  flex-shrink: 0;
}
.theme-toggle:hover { background:rgba(255,255,255,.18); transform: translateY(-1px); box-shadow:0 5px 12px rgba(0,0,0,.3); }
.theme-toggle:active { transform: translateY(0); box-shadow: inset 0 2px 5px rgba(0,0,0,.35); }
.login-card .theme-toggle { border-color: var(--vl-gray); background:var(--vl-surface-alt); color:var(--vl-ink); box-shadow:0 2px 6px var(--vl-shadow); }
.login-card .theme-toggle:hover { background:var(--vl-surface-hover); }

/* 3D-Menü, modernisiert: jeder Punkt ist eine eigene "schwebende" Karte mit
   Icon-Chip, spürbarer Tiefe im Ruhezustand und freiem Anheben bei Hover/Fokus. */
.vl-nav { list-style:none; margin:0 0 16px; padding:0; perspective: 800px; }
.vl-nav li { margin:7px 0; }
.vl-nav a {
  display:flex; align-items:center; gap:10px; padding:9px 10px 9px 9px; border-radius:12px;
  color:rgba(255,255,255,.86); font-size:.84rem; font-weight:600; letter-spacing:.1px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 3px 8px rgba(0,0,0,.22);
  transition: transform .2s cubic-bezier(.22,.9,.3,1.2), box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.vl-nav a:hover {
  background:rgba(255,255,255,.085); border-color:rgba(255,255,255,.16); text-decoration:none;
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 10px 20px rgba(0,0,0,.34), 0 1px 0 rgba(255,255,255,.08) inset;
}
.vl-nav a:active { transform: translateY(0) scale(.99); box-shadow: inset 0 3px 8px rgba(0,0,0,.4); }
.vl-nav a.active {
  background:linear-gradient(135deg, var(--vl-green) 0%, var(--vl-blue) 100%); color:#fff; border-color:transparent;
  box-shadow: 0 12px 24px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.25) inset;
  transform: translateY(-2px);
}
.vl-nav a.active:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 15px 28px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.28) inset; }

.nav-icon {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:27px; height:27px; border-radius:9px; font-size:.92rem; line-height:1;
  background:rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 2px rgba(0,0,0,.2);
  transition: background .2s ease, transform .2s ease;
}
.vl-nav a:hover .nav-icon { background:rgba(255,255,255,.17); transform: translateY(-1px); }
.vl-nav a.active .nav-icon { background:rgba(255,255,255,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.nav-label { flex:1; min-width:0; }

.vl-sidebar hr { border:none; border-top:1px solid rgba(255,255,255,.13); margin:16px 0; }
.vl-sidebar h4 { font-size:.68rem; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.5); margin:0 0 9px; font-weight:700; }

.region-switch { display:flex; flex-direction:column; gap:5px; }
.region-switch a {
  display:flex; justify-content:space-between; align-items:center; padding:8px 11px; border-radius:9px; font-size:.78rem;
  color:rgba(255,255,255,.82); background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  transition: transform .18s cubic-bezier(.22,.9,.3,1.2), box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.region-switch a.active { background:linear-gradient(135deg, var(--vl-blue) 0%, var(--vl-blue-dk) 100%); color:#fff; font-weight:700; border-color:transparent; box-shadow:0 8px 16px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.2); transform: translateY(-1px); }
.region-switch a:hover { text-decoration:none; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.16); transform: translateY(-2px); box-shadow:0 8px 16px rgba(0,0,0,.28); }

.vl-main { flex:1; padding:26px 34px 60px; max-width:1500px; }

.vl-header {
  background:linear-gradient(120deg, var(--vl-dark) 0%, var(--vl-blue-dk) 55%, var(--vl-dark) 100%);
  border-radius:14px; padding:22px 28px; margin-bottom:22px; position:relative; overflow:hidden;
  box-shadow: 0 10px 28px var(--vl-shadow-strong);
}
.vl-header::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.09) 1.5px, transparent 1.5px);
  background-size: 16px 16px; opacity:.5;
}
.vl-header::after {
  content:'· · · · · · · · · · · · · · · · · · · ·'; position:absolute; top:8px; right:18px;
  color:var(--vl-orange); opacity:.4; font-size:1.3rem; letter-spacing:4px; line-height:1.8; width:280px; word-break:break-all;
}
.vl-header h1 { color:#fff; font-size:1.45rem; font-weight:800; margin:0 0 4px; position:relative; }
.vl-header p { color:rgba(255,255,255,.88); font-size:.85rem; margin:0; position:relative; }

.section-header {
  font-size:.85rem; font-weight:700; color:var(--vl-green-text); border-left:4px solid var(--vl-green);
  padding-left:10px; margin:22px 0 10px; letter-spacing:.3px; text-transform:uppercase;
}

.metric-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:1100px){ .metric-row{ grid-template-columns:repeat(2,1fr);} }
.metric-card {
  background:var(--vl-surface); border-radius:12px; padding:15px 14px 11px; text-align:center;
  border:1px solid var(--vl-gray); box-shadow:0 3px 12px var(--vl-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.metric-card:hover { transform: translateY(-3px); box-shadow:0 12px 26px var(--vl-shadow-strong); }
.metric-label { font-size:.62rem; font-weight:700; color:var(--vl-text-muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.metric-value { font-size:1.4rem; font-weight:800; color:var(--vl-ink); }
.metric-sub { font-size:.62rem; color:var(--vl-text-faint); margin-top:4px; }
.b-green{border-top:3px solid var(--vl-green);} .b-amber{border-top:3px solid var(--vl-orange);}
.b-teal{border-top:3px solid var(--vl-blue);} .b-red{border-top:3px solid var(--vl-red);} .b-blue{border-top:3px solid var(--vl-blue);}
.c-green{color:var(--vl-green-text);} .c-amber{color:var(--vl-orange-dk);} .c-red{color:var(--vl-red);} .c-teal{color:var(--vl-blue);}

.flash { border-radius:8px; padding:10px 14px; margin-bottom:14px; font-size:.85rem; box-shadow:0 2px 8px var(--vl-shadow); }
.flash-ok { background:rgba(31,160,82,.12); border:1px solid rgba(31,160,82,.35); color:var(--vl-green-text); }
.flash-error { background:rgba(214,69,69,.12); border:1px solid rgba(214,69,69,.35); color:var(--vl-red); }

.toolbar {
  display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin-bottom:16px;
  background:var(--vl-surface); padding:14px 16px; border-radius:10px; border:1px solid var(--vl-gray);
  box-shadow:0 2px 10px var(--vl-shadow);
}
.toolbar .field { display:flex; flex-direction:column; gap:3px; }
.toolbar label { font-size:.68rem; text-transform:uppercase; color:var(--vl-text-muted); font-weight:700; letter-spacing:.5px; }

select, input[type=text], input[type=number], input[type=date], input[type=password], textarea {
  padding:7px 10px; border-radius:7px; border:1px solid var(--vl-gray); font-size:.85rem;
  background:var(--vl-surface); color:var(--vl-ink); font-family:inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
select:focus, input:focus, textarea:focus { outline:none; border-color:var(--vl-blue); box-shadow:0 0 0 3px rgba(47,111,224,.22); }
textarea { font-family:inherit; }

.btn {
  background:var(--vl-green); color:#fff; border:none; border-radius:999px; font-weight:700; padding:8px 17px;
  cursor:pointer; font-size:.8rem; display:inline-block;
  box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.15) inset;
  transition: transform .13s ease, box-shadow .13s ease, background .15s ease;
}
.btn:hover { background:var(--vl-green-dk); color:#fff; text-decoration:none; transform: translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.22); }
.btn:active { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(0,0,0,.3); }
.btn-secondary { background:var(--vl-surface); color:var(--vl-ink); border:1px solid var(--vl-gray); box-shadow:0 2px 6px var(--vl-shadow); }
.btn-secondary:hover { background:var(--vl-surface-hover); color:var(--vl-ink); }
.btn-danger { background:var(--vl-red); color:#fff; }
.btn-danger:hover { background:#b93a3a; color:#fff; }
.btn-sm { padding:4px 11px; font-size:.72rem; }

table.data-table {
  width:100%; border-collapse:collapse; background:var(--vl-surface); border-radius:10px; overflow:hidden;
  border:1px solid var(--vl-gray); font-size:.82rem; box-shadow:0 3px 12px var(--vl-shadow);
}
table.data-table th {
  background:linear-gradient(135deg, var(--vl-dark) 0%, var(--vl-dark2) 100%); color:#fff;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.4px; text-align:left; padding:8px 10px;
}
table.data-table th a { color:#fff; }
table.data-table td { padding:7px 10px; border-top:1px solid var(--vl-gray); vertical-align:middle; }
table.data-table tr:nth-child(even) td { background:var(--vl-surface-alt); }
table.data-table tr:hover td { background:var(--vl-surface-hover); }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.center { text-align:center; }

.badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:.68rem; font-weight:700; }
.badge-green { background:rgba(31,160,82,.16); color:var(--vl-green-text); }
.badge-amber { background:rgba(239,138,28,.18); color:var(--vl-orange-dk); }
.badge-red { background:rgba(214,69,69,.15); color:var(--vl-red); }
.badge-gray { background:var(--vl-surface-alt); color:var(--vl-text-muted); border:1px solid var(--vl-gray); }

.form-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; background:var(--vl-surface);
  padding:20px 22px; border-radius:12px; border:1px solid var(--vl-gray); box-shadow:0 3px 12px var(--vl-shadow);
}
.form-grid.cols-3 { grid-template-columns:1fr 1fr 1fr; }
@media (max-width:800px){ .form-grid{ grid-template-columns:1fr; } }
.form-grid label { font-size:.72rem; text-transform:uppercase; color:var(--vl-text-muted); font-weight:700; letter-spacing:.5px; display:block; margin-bottom:4px; }
.form-grid .full { grid-column:1 / -1; }
.form-actions { display:flex; gap:10px; margin-top:18px; grid-column:1/-1; }

.pagination { display:flex; gap:6px; margin-top:14px; flex-wrap:wrap; }
.pagination a, .pagination span { padding:5px 11px; border-radius:6px; font-size:.78rem; border:1px solid var(--vl-gray); background:var(--vl-surface); transition: transform .13s ease, box-shadow .13s ease; }
.pagination a:hover { transform: translateY(-1px); box-shadow:0 3px 8px var(--vl-shadow); text-decoration:none; }
.pagination .current { background:var(--vl-blue); color:#fff; border-color:var(--vl-blue); font-weight:700; }

.info-box { background:rgba(47,111,224,.1); border:1px solid rgba(47,111,224,.3); color:var(--vl-blue-dk); border-radius:8px; padding:13px 16px; font-size:.85rem; }
.warn-box { background:rgba(239,138,28,.12); border:1px solid rgba(239,138,28,.35); color:var(--vl-orange-dk); border-radius:8px; padding:13px 16px; font-size:.85rem; }

.progress-bar { background:var(--vl-gray); border-radius:6px; height:9px; overflow:hidden; }
.progress-bar > div { background:linear-gradient(90deg,var(--vl-green),var(--vl-blue)); height:100%; }

footer.vl-footer { margin-top:36px; color:var(--vl-text-faint); font-size:.72rem; text-align:center; }

.tabs { display:flex; gap:4px; margin-bottom:14px; border-bottom:2px solid var(--vl-gray); }
.tabs a { padding:8px 16px; font-size:.82rem; font-weight:600; color:var(--vl-text-muted); border-bottom:2px solid transparent; margin-bottom:-2px; transition: color .15s ease, border-color .15s ease; }
.tabs a.active { color:var(--vl-green-text); border-bottom-color:var(--vl-green); }
.tabs a:hover { text-decoration:none; color:var(--vl-green-text); }

/* chart text/gridlines — theme-aware via CSS classes (inline SVG respects the page cascade) */
.chart-grid { stroke: var(--vl-gray); }
.chart-axis { fill: var(--vl-text-muted); }
.chart-label { fill: var(--vl-ink); }

/* ── Mobile / tablet responsiveness (Techniker per Handy/Tablet) ────────── */
@media (max-width: 900px) {
  .vl-shell { flex-direction: column; }
  .vl-sidebar { width: 100%; padding: 12px 14px 14px; }
  .vl-sidebar .logo-wrap { padding: 4px 8px 10px; }
  .vl-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
  .vl-nav li { margin: 0; }
  .vl-nav a { padding: 8px 10px; font-size: .78rem; }
  .region-switch { flex-direction: row; flex-wrap: wrap; }
  .region-switch a { flex: 1 1 auto; justify-content: center; gap: 6px; }
  .vl-main { padding: 16px 14px 40px; }
  .metric-row { grid-template-columns: 1fr 1fr; }
  .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; padding: 16px; }
  table.data-table { font-size: .78rem; }
  /* Bigger touch targets for on-the-go counting */
  select, input[type=text], input[type=number], input[type=date], input[type=password], textarea, .btn {
    font-size: 16px; /* prevents iOS auto-zoom on focus */
    padding: 10px 12px;
  }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar .field { width: 100%; }
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Live article search dropdown (Zugang/Abgang/Umbuchung/Inventur) ────── */
.vl-search-suggest {
  position: absolute; z-index: 40; top: 100%; left: 0; right: 0;
  background: var(--vl-surface); border: 1px solid var(--vl-gray); border-radius: 8px;
  box-shadow: 0 10px 28px var(--vl-shadow-strong); max-height: 280px; overflow-y: auto;
  margin-top: 4px;
}
.vl-search-item {
  display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid var(--vl-gray); font-size: .82rem;
}
.vl-search-item:last-child { border-bottom: none; }
.vl-search-item:hover { background: var(--vl-surface-hover); }
.vl-search-artnr { font-weight: 700; color: var(--vl-dark2); white-space: nowrap; }
.vl-search-desc { color: var(--vl-text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-search-stock { color: var(--vl-text-faint); font-size: .74rem; white-space: nowrap; }

/* ── Kompakter Embed-Modus (?embed=1) — z. B. in einem SharePoint-iframe ──
   Schlankere Sidebar und weniger Außenabstand, da die Portal-Seite drumherum
   bereits eigene Navigation/Branding mitbringt. Rein additiv — ohne
   body.vl-embedded ändert sich nichts am normalen Layout. */
body.vl-embedded .vl-sidebar { width: 208px; padding:14px 11px 16px; }
body.vl-embedded .vl-sidebar .logo-wrap { padding:4px 6px 10px; }
body.vl-embedded .vl-sidebar .logo-wrap .logo-card { padding:7px 12px; }
body.vl-embedded .vl-sidebar .logo-wrap img { max-width:108px; }
body.vl-embedded .vl-sidebar .app-title { font-size:.92rem; }
body.vl-embedded .vl-nav a { padding:7px 9px; font-size:.78rem; }
body.vl-embedded .nav-icon { width:23px; height:23px; font-size:.8rem; }
body.vl-embedded .vl-sidebar h4 { font-size:.62rem; }
body.vl-embedded .vl-main { padding:16px 20px 32px; }
body.vl-embedded .vl-header { padding:16px 20px; border-radius:10px; margin-bottom:16px; }
body.vl-embedded .vl-header h1 { font-size:1.2rem; }
body.vl-embedded .login-card { box-shadow:none; width:100%; max-width:380px; min-height:auto; }