/* Windows 95 vibes */
html,body{margin:0;padding:0;font-family: Tahoma, Verdana, sans-serif;background:#008080;}
.app{max-width:1100px;margin:20px auto;background:#c0c0c0;border:2px solid #000;box-shadow:4px 4px #404040;}
.titlebar{background:linear-gradient(#000080,#000060);color:#fff;padding:6px 10px;display:flex;align-items:center;justify-content:space-between;}
.titlebar .title{font-weight:bold;}
.window{padding:10px;}
.tabs{display:flex;gap:4px;margin:10px 0;flex-wrap:wrap;}
.tab{background:#e0e0e0;border:2px solid #fff;border-right-color:#808080;border-bottom-color:#808080;padding:6px 10px;cursor:pointer;text-decoration:none;color:#000;}
.tab.active{background:#fff;}
.tab.unread{background:#bdf4bd;}
.tab.unread.active{background:#cfffcc;}
.tab .badge{display:inline-block;padding:0 6px;border:1px solid #808080;margin-left:6px;}

/* Panels: großes Seiten-Panel mit min-height, Unter-Panels kompakt */
.panel{background:#fff;border:2px solid #808080;padding:10px;}
.window > .panel{min-height:420px;}
.panel.compact{min-height:auto;margin-bottom:10px;}

.btn{background:#e0e0e0;border:2px solid #fff;border-right-color:#808080;border-bottom-color:#808080;padding:4px 8px;cursor:pointer;text-decoration:none;color:#000;display:inline-block}
.btn:active{border:2px solid #808080;border-right-color:#fff;border-bottom-color:#fff;}
.input{border:2px inset #fff;background:#fff;padding:4px;}
.table{width:100%;border-collapse:collapse;}
.table th,.table td{border:1px solid #808080;padding:6px;background:#f8f8f8}
.notice{background:#ffffaa;border:1px solid #808000;padding:6px;margin-bottom:10px}

/* Scrollbarer Bereich für Message-Table */
.scroll-panel{max-height:420px; overflow:auto; border:1px solid #808080}

/* Simple Win95-Modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,0.3); display:none; align-items:center; justify-content:center; z-index:999;}
.modal{background:#c0c0c0; border:2px solid #000; box-shadow:4px 4px #404040; width:600px; max-width:90%;}
.modal .titlebar{background:linear-gradient(#000080,#000060); color:#fff; padding:6px 10px; display:flex; justify-content:space-between; align-items:center;}
.modal .content{padding:10px; background:#fff; border:2px solid #808080;}
.modal .actions{padding:10px; display:flex; gap:8px; justify-content:flex-end}
.modal-open{display:flex;}

/* Numeric right align helper (optional) */
.num{ text-align:right; }

/* ===== Mobile Tweaks ===== */
@media (max-width: 720px) {
  .app{ margin:0; border-width:0; box-shadow:none; }
  .panel{ padding:8px; }
  .titlebar{ padding:10px; font-size:14px; }

  /* Tabs: horizontal scrollbar, große Touch-Ziele */
  .tabs{ overflow-x:auto; white-space:nowrap; gap:6px; }
  .tab{ display:inline-block; padding:10px 12px; font-size:14px; }

  /* Inputs/Buttons: volle Breite in Formularen */
  form .input, form .btn, select.input, input.input, textarea.input {
    width:100%;
  }
  form[style*="grid-template-columns"]{
    grid-template-columns: 1fr;  /* einspaltig */
  }

  /* Modal: mobil quasi Vollbild */
  .modal{ width:95%; max-width:none; }
  .modal .content{ max-height:60vh; overflow:auto; }

  /* Tabellen als „Cards“ stapeln */
  .table.resp { border:0; }
  .table.resp thead{ display:none; }
  .table.resp tr{
    display:block;
    background:#f8f8f8;
    border:1px solid #808080;
    margin-bottom:10px;
    padding:8px;
  }
  .table.resp td{
    display:flex;
    justify-content:space-between;
    gap:10px;
    border:0;
    border-bottom:1px dotted #ccc;
    padding:6px 0;
    background:transparent;
  }
  .table.resp td:last-child{ border-bottom:0; }
  .table.resp td::before{
    content: attr(data-label);
    font-weight:bold;
  }

  .num{ text-align:right; }
}

/* Unterreiter-Layout */
.tabs.top { margin-bottom: 6px; }
.tabs.sub { margin-top: 0; }