*{box-sizing:border-box}
:root{
  --black:#0b0b0b;
  --black2:#151515;
  --yellow:#f5c400;
  --yellow2:#ffd84a;
  --yellow-soft:#fff4bd;
  --bg:#f3f3f0;
  --card:#ffffff;
  --line:#deddd5;
  --text:#1b1b1b;
  --muted:#77766f;
  --danger:#b42318;
  --success:#166534;
}
body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}
.topbar{height:68px;background:linear-gradient(90deg,var(--black),#171717);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:3px solid var(--yellow);box-shadow:0 2px 12px rgba(0,0,0,.16)}
.brand-top{font-size:15px;letter-spacing:.3px}.brand-top strong{font-size:21px;color:var(--yellow);letter-spacing:1px}.brand-top span{opacity:.68;margin-left:5px}
.top-user{display:flex;gap:16px;align-items:center;font-size:13px}.top-user a{color:var(--yellow2);text-decoration:none;font-weight:600}.top-user a:hover{text-decoration:underline}
.primary{background:var(--yellow);color:#0b0b0b;border:0;border-radius:8px;padding:10px 15px;font-weight:800;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.primary:hover{background:var(--yellow2)}
.layout{display:flex;min-height:calc(100vh - 68px)}
aside{width:225px;background:var(--black2);border-right:1px solid #262626;padding:20px 12px}
.side-title{font-size:12px;color:#8f8e88;text-transform:uppercase;margin:0 10px 12px;letter-spacing:.7px}
.nav{display:block;width:100%;text-align:left;border:0;background:transparent;padding:11px 12px;border-radius:8px;margin:3px 0;cursor:pointer;color:#ddd}
.nav.active,.nav:hover{background:rgba(245,196,0,.14);color:var(--yellow2)}
main{flex:1;padding:24px;overflow:auto}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;position:relative}.toolbar h1{font-size:22px;margin:0;color:#181818}.toolbar h1#monthTitle{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.toolbar button{border:1px solid #cfcfc5;background:#fff;border-radius:7px;padding:8px 12px;cursor:pointer}.toolbar button:hover{border-color:var(--yellow);background:#fffdf1}
.calendar{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 2px 9px rgba(0,0,0,.05)}
.calendar-head{display:grid;grid-template-columns:repeat(7,1fr);background:#faf9f2;border-bottom:1px solid var(--line)}
.calendar-head div{padding:10px;font-size:12px;color:#6a6962;font-weight:800;text-transform:uppercase}
.week{position:relative;min-height:calc(34px + (var(--event-rows, 1) * 30px));border-bottom:1px solid #ecebe5}.week:last-child{border-bottom:0}
.week-days{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr)}
.day{border-right:1px solid #efeee9;padding:8px;position:relative}.day:last-child{border-right:0}.daynum{font-size:12px;color:#737169;font-weight:600}
/* Highlight today's full calendar cell on desktop and mobile */
.day.today{background:var(--yellow-soft);box-shadow:inset 0 0 0 2px rgba(245,196,0,.72)}
.day.today .daynum{color:#111;font-weight:900}
.outside{background:#fbfbfa;color:#b8b7b0}
.week-events{position:absolute;z-index:2;left:0;right:0;top:29px;bottom:5px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:26px;gap:4px 0;padding:0 2px;pointer-events:none}
.event{pointer-events:auto;align-self:start;height:23px;padding:4px 9px;background:var(--yellow);color:#161616;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border-radius:0;box-shadow:0 1px 0 rgba(0,0,0,.12)}
.event.rounded-left{border-radius:6px 0 0 6px}.event.rounded-right{border-radius:0 6px 6px 0}.event.rounded-left.rounded-right{border-radius:6px}
.event.out{background:#202020;color:var(--yellow2);border:1px solid #3a3a3a}.event.returned{background:#e6f4e9;color:var(--success);border:1px solid #cce5d2}.event.draft{background:#ecebe5;color:#55534c}.event.cancelled{background:#f6d7d4;color:var(--danger)}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 2px 9px rgba(0,0,0,.04)}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px 14px;border-bottom:1px solid #ecebe5;font-size:14px}
th{background:#faf9f2;color:#6a6962;font-size:12px;text-transform:uppercase}tr:hover td{background:#fffdf0}
.actions{white-space:nowrap}.hidden{display:none}.danger-link{border:0;background:transparent;color:var(--danger);cursor:pointer;margin-left:8px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;padding:20px;z-index:20}.modal.hidden{display:none}
.modal-box{background:#fff;width:min(760px,100%);max-height:90vh;overflow:auto;border-radius:12px;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.35);border-top:4px solid var(--yellow)}
.modal-box.compact{width:min(600px,100%)}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{margin:0}.modal-head button{border:0;background:none;font-size:28px;cursor:pointer;color:#444}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}label{display:block;font-size:13px;font-weight:700;margin:12px 0;color:#373631}
input,select,textarea{display:block;width:100%;margin-top:6px;border:1px solid #cccabf;border-radius:7px;padding:9px;font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:#c29c00;box-shadow:0 0 0 3px rgba(245,196,0,.18)}
textarea{min-height:70px}.check{display:flex;align-items:center;gap:8px}.check input{width:auto;margin:0}
.equipment-row{display:grid;grid-template-columns:1fr 120px 40px;gap:8px;margin-bottom:8px;align-items:end}
.secondary{border:1px solid #cfcfc5;background:#fff;border-radius:7px;padding:8px 12px;cursor:pointer}.secondary:hover{background:#fffdf0;border-color:var(--yellow)}
.remove{border:0;background:#fbe5e3;color:var(--danger);border-radius:7px;padding:9px;cursor:pointer}
.availability{display:block;margin-top:5px;font-size:11px;color:#6d6b62;font-weight:600}.availability.zero{color:var(--danger)}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.form-actions button{border:0;border-radius:7px;padding:10px 14px;cursor:pointer}
.form-actions button:not(.primary){background:#efeee8}
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0b0b0b,#1b1b1b);padding:20px}
.login-box{width:min(430px,100%);background:#fff;border:1px solid #deddd5;border-top:5px solid var(--yellow);border-radius:14px;padding:30px;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.brand{font-weight:800;letter-spacing:.3px;margin-bottom:24px}.brand strong{color:#111;font-size:30px;letter-spacing:1px}.brand span{font-weight:400;color:#77766f;margin-left:6px}
.login-box h1{margin:0 0 8px}.muted{color:#6d6b62;font-size:13px;line-height:1.5}.full{width:100%;margin-top:10px}
.error-box,.success-box{padding:10px 12px;border-radius:8px;margin-bottom:14px;font-size:13px}.error-box{background:#fee2e2;color:#991b1b}.success-box{background:#dcfce7;color:#166534}
small{font-weight:400;font-size:11px;color:#6d6b62}
@media(max-width:900px){aside{width:70px}.side-title{display:none}.nav{font-size:0}.nav::first-letter{font-size:18px}main{padding:14px}.week{min-height:calc(32px + (var(--event-rows, 1) * 24px))}.event{font-size:10px}.grid2{grid-template-columns:1fr}}


.mobile-menu-toggle{display:none}

/* ---------- Mobile adaptation ---------- */
@media (max-width: 700px){
  html{font-size:16px}
  body{padding-bottom:0;overflow-x:hidden}
  .topbar{
    height:58px;
    padding:0 14px;
    position:sticky;
    top:0;
    z-index:15;
  }
  .brand-top strong{font-size:19px}
  .brand-top span{font-size:12px}
  .top-user{gap:10px;font-size:12px}
  .top-user span{max-width:125px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .layout{display:block;min-height:calc(100vh - 58px)}
  .mobile-menu-toggle{
    display:flex;
    position:fixed;
    right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom));
    z-index:30;
    align-items:center;
    gap:0;
    border:1px solid #d8d5ca;
    background:#fff;
    color:#181818;
    border-radius:999px;
    padding:10px 13px;
    box-shadow:0 5px 20px rgba(0,0,0,.18);
    font-weight:700;
    font-size:20px;
    cursor:pointer;
  }
  aside{
    display:none;
    position:fixed;
    right:12px;
    bottom:calc(62px + env(safe-area-inset-bottom));
    left:auto;
    width:min(240px, calc(100vw - 24px));
    height:auto;
    padding:8px;
    flex-direction:column;
    gap:2px;
    z-index:29;
    border:1px solid #292929;
    border-radius:14px;
    background:#171717;
    box-shadow:0 8px 28px rgba(0,0,0,.28);
  }
  aside.mobile-open{display:flex}
  .side-title{display:none}
  .nav{
    width:100%;
    min-width:0;
    margin:0;
    padding:11px 12px;
    text-align:left;
    font-size:14px;
    line-height:1.2;
    color:#ddd;
    border-radius:9px;
  }
  .nav.active,.nav:hover{background:rgba(245,196,0,.16);color:var(--yellow2)}

  main{
    width:100%;
    padding:14px 10px 24px;
    overflow:visible;
  }
  .toolbar{
    gap:10px;
    margin-bottom:12px;
    align-items:center;
  }
  .toolbar h1{font-size:20px}
  .toolbar>div{display:flex;gap:5px}
  .toolbar button{min-height:42px;padding:9px 11px}
  .toolbar .primary{white-space:nowrap}

  /* Mobile calendar: all 7 days fit on screen, no horizontal swipe */
  #calendar.calendar{
    width:100%;
    overflow:hidden;
    -webkit-overflow-scrolling:auto;
    border-radius:9px;
  }
  #calendar .calendar-head,
  #calendar .week{min-width:0;width:100%}
  #calendar .calendar-head div{padding:8px 2px;font-size:9px;text-align:center}
  /* Compact mobile calendar: the week height follows the real booking rows. */
  #calendar .week{
    min-height:calc(30px + (var(--event-rows, 1) * 14px));
  }
  #calendar .day{padding:7px 3px}
  #calendar .daynum{font-size:11px;text-align:center}
  #calendar .week-events{
    top:27px;
    bottom:auto;
    grid-auto-rows:13px;
    row-gap:1px;
    padding:0 1px;
  }
  #calendar .event{
    height:11px;
    padding:1px 2px;
    font-size:7px;
    line-height:9px;
    margin:0 !important;
  }
  #calendar .day.today{
    background:var(--yellow-soft);
    box-shadow:inset 0 0 0 2px rgba(245,196,0,.72);
  }
  #calendar .day.today .daynum{
    color:#111;
    font-weight:900;
  }

  /* Tables become compact mobile cards */
  .card{border-radius:9px;box-shadow:none;overflow:visible;background:transparent}
  table,tbody{display:block;width:100%}
  thead{display:none}
  tr{
    display:block;
    background:#fff;
    border:1px solid var(--line);
    border-radius:9px;
    margin:0 0 10px;
    box-shadow:0 1px 5px rgba(0,0,0,.04);
    overflow:hidden;
  }
  tr:hover td{background:#fff}
  td{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-bottom:1px solid #efeee9;
    font-size:14px;
    min-height:42px;
  }
  td:last-child{border-bottom:0}
  td::before{
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    flex:0 0 38%;
    max-width:42%;
  }
  #stockBody td:nth-child(1)::before{content:"Оборудование"}
  #stockBody td:nth-child(2)::before{content:"Категория"}
  #stockBody td:nth-child(3)::before{content:"Всего"}
  #stockBody td:nth-child(4)::before{content:"Единица"}
  #stockBody td:nth-child(5)::before{content:"Действия"}

  #projectsBody td:nth-child(1)::before{content:"Проект"}
  #projectsBody td:nth-child(2)::before{content:"Ответственный"}
  #projectsBody td:nth-child(3)::before{content:"Даты"}
  #projectsBody td:nth-child(4)::before{content:"Время погрузки"}
  #projectsBody td:nth-child(5)::before{content:"Действие"}

  #usersBody td:nth-child(1)::before{content:"Имя"}
  #usersBody td:nth-child(2)::before{content:"Логин"}
  #usersBody td:nth-child(3)::before{content:"Роль"}
  #usersBody td:nth-child(4)::before{content:"Статус"}
  #usersBody td:nth-child(5)::before{content:"Действия"}

  .actions{white-space:normal;text-align:right}
  .actions button,.danger-link{min-height:38px;margin:0 0 4px 5px}
  .danger-link{padding:8px 0}

  /* Full-screen friendly forms */
  .modal{align-items:flex-end;padding:0}
  .modal-box,.modal-box.compact{
    width:100%;
    max-width:none;
    max-height:94vh;
    border-radius:16px 16px 0 0;
    padding:17px 14px calc(18px + env(safe-area-inset-bottom));
    border-top-width:4px;
  }
  .modal-head{
    position:sticky;
    top:-17px;
    background:#fff;
    padding:3px 0 12px;
    z-index:2;
  }
  .modal-head h2{font-size:19px}
  .modal-head button{font-size:32px;padding:0 7px;min-width:42px;min-height:42px}
  .grid2{grid-template-columns:1fr;gap:0}
  label{font-size:13px;margin:10px 0}
  input,select,textarea{min-height:44px;padding:10px}
  textarea{min-height:90px}
  .equipment-row{
    grid-template-columns:minmax(0,1fr) 92px 42px;
    gap:6px;
    padding:9px;
    margin-bottom:8px;
    background:#faf9f2;
    border:1px solid #ecebe5;
    border-radius:8px;
  }
  .equipment-row label{margin:0}
  .availability{font-size:10px}
  .remove{min-height:44px}
  .form-actions{
    position:sticky;
    bottom:0;
    margin:14px -14px -18px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);
    border-top:1px solid #ecebe5;
    z-index:2;
  }
  .form-actions button{min-height:44px;flex:1}
  .secondary{min-height:44px}

  .login-page{padding:14px;align-items:center}
  .login-box{
    width:100%;
    padding:22px 18px;
    border-radius:12px;
  }
  .brand{margin-bottom:20px}
  .brand strong{font-size:28px}
  .login-box h1{font-size:24px}
}

/* Very small phones */
@media (max-width:380px){
  .brand-top span{display:none}
  .top-user span{max-width:80px}
  .toolbar{align-items:flex-start}
  .toolbar h1{font-size:18px}
  .toolbar .primary{font-size:12px;padding:8px 9px}
  #calendar .calendar-head,#calendar .week{min-width:0}
  .equipment-row{grid-template-columns:minmax(0,1fr) 78px 40px}
}

.modal-head-actions{display:flex;align-items:center;gap:8px}
.modal-head-actions button{white-space:nowrap}
.toolbar{flex-wrap:wrap}
.toolbar .primary{margin-left:auto}
.equipment-row select optgroup{font-weight:800}
@media (max-width:600px){
  .toolbar h1#monthTitle{position:static;transform:none;order:2;width:100%;text-align:center;margin:2px 0 0}
  .toolbar > div{order:1}
  .toolbar > .primary{order:3}
  .toolbar .primary{width:100%;margin-left:0}
  .modal-head-actions .secondary{font-size:13px;padding:9px 12px}
}

.equipment-summary{margin:14px 0 4px}.equipment-category-block{border:1px solid #e7e5dc;border-radius:9px;overflow:hidden;margin:10px 0;background:#fff}.equipment-category-title{padding:8px 11px;background:#faf9f2;font-size:12px;font-weight:800;text-transform:uppercase;color:#57564f}.equipment-category-items>div{display:flex;justify-content:space-between;gap:12px;padding:9px 11px;border-top:1px solid #efeee9;font-size:13px}.equipment-category-items b{white-space:nowrap}.equipment-summary:empty{display:none}
@media print{.equipment-summary{display:block}}

.danger{border:0;background:var(--danger);color:#fff!important;border-radius:7px;padding:10px 14px;cursor:pointer}.danger:hover{filter:brightness(.95)}

@media (min-width:701px){
  #printBookingBtn,#editBookingBtn{font-size:12px;padding:7px 10px}
}
@media (max-width:700px){
  .toolbar h1#monthTitle{font-size:20px}
}

/* Equipment selection / shipment sections */
.selected-equipment-section{margin-bottom:4px}
.selected-equipment-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 2px}
.selected-equipment-head strong{font-size:13px;color:#373631}
#equipmentRows.collapsed{display:none}
.shipment-divider{display:flex;align-items:center;gap:10px;margin:14px 0 2px}
.shipment-line{height:1px;background:#e1dfd7;flex:1}

.shipment-title{font-size:15px;font-weight:800;color:#222;white-space:nowrap;letter-spacing:.1px}

/* mobile vertical booking spacing */
@media (max-width: 768px) {
  .booking, .event, .reservation, .calendar-event, .booking-card, .event-card {
    margin-top: 0 !important;
    margin-bottom: 1px !important;
  }
  .booking + .booking,
  .event + .event,
  .reservation + .reservation,
  .calendar-event + .calendar-event,
  .booking-card + .booking-card,
  .event-card + .event-card {
    margin-top: 0 !important;
  }
}

/* Google Calendar is part of the main navigation. */
.google-nav{margin-top:12px;border-top:1px solid #2b2b2b;padding-top:14px;border-radius:8px}
@media(max-width:700px){.google-nav{margin-top:12px;border-top:1px solid #2b2b2b;padding-top:14px}}

.role-list-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #e5e5e5}.role-list-item:last-child{border-bottom:0}.role-list-item small{display:block;color:#777;margin-top:3px}.permission-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0 18px}.permission-check{display:flex;align-items:center;gap:8px;padding:9px 10px;background:#f7f7f5;border-radius:8px}.permission-check input{width:auto;margin:0}.actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}@media(max-width:700px){.permission-list{grid-template-columns:1fr}.role-list-item{align-items:flex-start;flex-direction:column}}