/* Система заказа пропусков — оформление в стилистике rrg.ru:
   акцент #ec691f, белый контентный блок, оранжевые плашки разделов,
   оранжевые шапки таблиц, flash-сообщения как в их CSS */

:root{
  --orange:#ec691f;
  --orange-dark:#d0590f;
  --orange-tint:#fdf1e9;
  --text:#333;
  --text-soft:#666;
  --line:#ddd;
  --bar:#f0f0ef;
  --side:#ccc;
  --page:#f2f2f2;
  --ok-bg:#e6efc2; --ok-line:#c6d880; --ok-text:#264409;
  --err-bg:#fbe3e4; --err-line:#fbc2c4; --err-text:#8a1f11;
  --warn-bg:#fff6bf; --warn-line:#ffd324; --warn-text:#514721;
}

*{box-sizing:border-box}
html{background:var(--page)}
body{
  margin:0;padding:0;background:var(--page);color:var(--text);
  font:12px Verdana,Tahoma,Arial,sans-serif;line-height:160%;
  -webkit-text-size-adjust:100%;text-size-adjust:100%
}
a{color:var(--orange);text-decoration:none}
a:hover{color:var(--orange-dark)}
img{max-width:100%}
.hidden{display:none !important}

/* ---------------- каркас страницы ---------------- */
/* Ширина подстраивается под экран: от телефона до широкого монитора */
.shell{width:100%;max-width:1400px;margin:0 auto;background:#fff;box-shadow:0 0 26px rgba(0,0,0,.09)}

/* ---------------- шапка, как на rrg.ru: эмблема и название — фото — контакты ---------------- */
.hero{
  display:flex;align-items:center;gap:clamp(14px,2.2vw,34px);
  background:#fff;padding:clamp(12px,1.5vw,20px) clamp(12px,1.8vw,26px) clamp(14px,1.6vw,22px)
}
.hero-brand{display:flex;align-items:center;gap:14px;flex:0 1 320px;min-width:210px}
.logo{width:64px;height:64px;flex:0 0 64px;display:block}
.brand-text{font:clamp(17px,1.7vw,23px)/1.25 Tahoma,Verdana,sans-serif;color:#222;letter-spacing:.5px}
.brand-mark{color:var(--orange);font-weight:bold}

/* Фото кадрировано широко (753x270, 2.79:1): здание по центру, кровля у верхнего края.
   Обрамление — «оранжевый клин»: сверху слева оранжевый треугольник, фото срезано по той же
   диагонали, правый край ленты срезан наискось (получается пара диагоналей). Растворение в белом:
   слева широкое с тёплым оттенком, справа узкое. Хотите ещё меньше — уменьшите последнее число
   clamp() здесь и в блоках @media. */
.hero-photo{position:relative;flex:1 1 auto;min-width:0}
.hero-photo::before{
  content:'';position:absolute;left:-16px;top:-16px;width:144px;height:144px;z-index:2;
  background:var(--orange);clip-path:polygon(0 0,100% 0,0 100%)
}
.hero .hero-img{
  display:block;width:100%;height:clamp(130px,16vw,230px);
  object-fit:cover;object-position:50% 6%;
  clip-path:polygon(120px 0,100% 0,calc(100% - 18px) 100%,0 100%,0 120px)
}
.hero-fade{position:absolute;top:0;bottom:0;z-index:1;pointer-events:none}
.hero-fade-left{
  left:0;width:20%;
  background:linear-gradient(90deg,#fff 16%,rgba(253,241,233,.72) 48%,rgba(255,255,255,0))
}
.hero-fade-right{right:0;width:7%;background:linear-gradient(270deg,#fff 26%,rgba(255,255,255,0))}

.hero-contacts{flex:0 0 clamp(180px,19vw,250px);text-align:right}
.hero-contacts::before{content:'';display:block;width:58px;height:3px;background:var(--orange);margin:0 0 9px auto}
.hero-phone{
  display:block;font:bold clamp(16px,1.7vw,22px)/1.2 Tahoma,Verdana,sans-serif;
  color:var(--orange);letter-spacing:.3px
}
.hero-phone:hover{color:var(--orange-dark)}
.hero-addr{display:block;margin:5px 0 3px;font:11px Verdana,sans-serif;color:var(--text)}
.hero-mail{font:12px Verdana,sans-serif}

.hero-strip{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;
  padding:12px clamp(12px,1.8vw,26px);background:#fff;
  border-top:1px solid var(--line);border-bottom:3px solid var(--orange)
}
.hero-strip .hero-title{font:bold clamp(14px,1.5vw,19px) Tahoma,Verdana,sans-serif;color:#222;letter-spacing:.6px}
.hero-nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.hero-nav-item{
  position:relative;padding-left:15px;font:11px Verdana,sans-serif;
  color:var(--text-soft);text-transform:uppercase;letter-spacing:.5px
}
.hero-nav-item::before{
  content:'';position:absolute;left:0;top:4px;width:8px;height:8px;
  border-radius:50%;background:var(--orange)
}

.main{padding:clamp(14px,2.2vw,28px) clamp(12px,1.8vw,26px) clamp(20px,2.4vw,36px)}

/* ---------------- заголовки ---------------- */
.zagolovok{
  min-height:40px;line-height:40px;background:var(--orange);color:#fff;
  font:bold clamp(15px,1.6vw,20px) Tahoma,Verdana,sans-serif;padding:6px 14px 6px 20px;margin:0 0 16px
}
.zagolovok .zagolovok-out{
  float:right;font:11px Verdana,sans-serif;font-weight:normal;
  text-transform:uppercase;letter-spacing:.5px;padding-top:5px
}
h1{font:clamp(20px,2.2vw,27px) Tahoma,Verdana,sans-serif;font-weight:normal;color:var(--orange);margin:0 0 14px}
h2{font:clamp(15px,1.5vw,18px) Arial,Helvetica,sans-serif;font-weight:normal;color:var(--text);margin:0 0 12px}
h3{font:bold clamp(13px,1.2vw,15px) Verdana,sans-serif;color:var(--text);margin:18px 0 10px}
.mostorg{font:bold clamp(13px,1.2vw,15px) Verdana,sans-serif;color:var(--text)}

/* ---------------- панели ---------------- */
.box,.admin-container{
  border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:5px;
  padding:16px 18px 18px;margin:0 0 22px;background:#fff
}
.box{max-width:440px;margin:0 auto 22px}
.panel-head{display:flex;align-items:stretch;justify-content:space-between;gap:12px;flex-wrap:wrap}
.panel-head .zagolovok{flex:1;min-width:260px}
.panel-head .btn-exit{margin:0}
.cols{display:flex;gap:26px;flex-wrap:wrap}
.col-narrow{flex:1;min-width:300px;max-width:360px}
.col-wide{flex:2.2;min-width:340px}

.expiry-alert{
  background:var(--warn-bg);border:2px solid var(--warn-line);color:var(--warn-text);
  padding:10px 12px;margin:0 0 16px;font-size:12px
}

/* ---------------- вкладки ---------------- */
.tabs{
  display:flex;flex-wrap:wrap;background:var(--bar);
  border:1px solid #e3e3e1;border-left:3px solid var(--orange);margin:0 0 18px
}
.tab-btn{
  margin:0;padding:12px 20px;background:transparent;border:0;border-bottom:3px solid transparent;
  border-radius:0;color:#333;font:600 12px Verdana,Tahoma,Arial,sans-serif;
  letter-spacing:.5px;text-transform:uppercase
}
.tab-btn:hover{background:#e6e6e3;color:var(--orange)}
.tab-btn.active{background:#fff;color:var(--orange);border-bottom-color:var(--orange)}

/* ---------------- формы ---------------- */
input,select,textarea{
  display:block;width:100%;padding:9px 10px;margin:0 0 10px;background:#fff;color:var(--text);
  border:1px solid #ccc;border-radius:4px;font:12px Verdana,Tahoma,Arial,sans-serif
}
input:focus,select:focus,textarea:focus{border-color:var(--orange);outline:0;box-shadow:0 0 7px rgba(236,105,31,.28)}
input[type=checkbox]{width:auto;display:inline-block;margin:0 6px 0 0;padding:0}
input[type=date]{max-width:210px}
.form-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.form-row input,.form-row select{flex:1;min-width:150px;margin:0}
.form-row label{font-size:12px;color:var(--text-soft);white-space:nowrap}
.field-label{
  display:block;margin:0 0 4px;font:11px Verdana,sans-serif;color:var(--text-soft);
  text-transform:uppercase;letter-spacing:.5px
}
.table-input{
  width:100%;padding:6px 7px;margin:0;font:11px Verdana,sans-serif;
  border:1px solid #ccc;border-radius:3px
}

/* ---------------- кнопки ---------------- */
button{
  display:inline-block;width:auto;margin:0 8px 10px 0;padding:12px 18px;
  background:var(--orange);border:1px solid var(--orange);border-radius:5px;color:#fff;
  font:600 12px Verdana,Tahoma,Arial,sans-serif;letter-spacing:.5px;text-transform:uppercase;
  cursor:pointer;transition:all .3s
}
button:hover{background:var(--orange-dark);border-color:var(--orange-dark);color:#fff}
button:disabled{opacity:.5;cursor:default}
button:disabled:hover{background:var(--orange);border-color:var(--orange)}
.btn-success{background:var(--orange);border-color:var(--orange);color:#fff}
.btn-danger{background:#c0392b;border-color:#c0392b;color:#fff}
.btn-danger:hover{background:#992d22;border-color:#992d22}
.btn-secondary{background:#fff;border:2px solid #e6e8eb;color:#4c5667}
.btn-secondary:hover{background:#f4f5f8;border-color:#e6e8eb;color:#4c5667}
.btn-warning{background:var(--warn-line);border-color:var(--warn-line);color:var(--warn-text)}
.btn-warning:hover{background:#f2b900;border-color:#f2b900;color:#3f3508}
.btn-sm{padding:7px 12px;font-size:11px;margin:0 6px 0 0}
.btn-block{width:100%}

/* ---------------- сообщения ---------------- */
.msg{margin:12px 0;padding:10px 12px;border:2px solid var(--line);background:#fafafa;font-size:12px}
.msg:empty{display:none}
.msg-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-text)}
.msg-error{background:var(--err-bg);border-color:var(--err-line);color:var(--err-text)}
#error{margin:0 0 12px}
#error:not(:empty){
  background:var(--err-bg);border:2px solid var(--err-line);color:var(--err-text);
  padding:10px 12px;font-weight:bold
}
.hint{color:var(--text-soft);font-size:12px;margin:6px 0 16px}

/* ---------------- таблицы ---------------- */
table{border-collapse:collapse;width:100%;margin:0 0 14px}
th{
  background:var(--orange);color:#fff;font:bold 11px Verdana,sans-serif;text-align:left;
  padding:9px 8px;border:0
}
td{
  padding:8px;font:11px Verdana,sans-serif;color:var(--text);
  border-top:1px solid var(--line);vertical-align:top;background:#fff
}
tbody tr:nth-child(even) td{background:#f4f4f3}
tbody tr.row-issued td{background:#fff}
tbody tr.row-new td{background:var(--warn-bg);font-weight:bold}
tbody tr.row-new td b{color:var(--warn-text)}
td b{font-weight:bold}
td i{font-style:normal;font-size:10px;color:var(--text-soft)}

/* ---------------- группы пропусков ---------------- */
.groups-bar{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:10px 12px;
  background:var(--bar);border:1px solid #e3e3e1;border-left:3px solid var(--orange)
}
.groups-bar .btn-refresh{margin:0 8px 0 0}
.groups-filter{font-size:12px;color:var(--text);margin:0 10px 0 0}
.btn-collapse-all{margin:0 6px 0 0}
.groups-summary{
  margin-left:auto;font:bold 11px Verdana,sans-serif;color:var(--text);
  text-transform:uppercase;letter-spacing:.5px
}

h3.section-new,h3.section-old{
  min-height:40px;line-height:40px;margin:20px 0 12px;padding:6px 14px 6px 20px;
  background:var(--orange);color:#fff;font:bold clamp(15px,1.6vw,20px) Tahoma,Verdana,sans-serif
}
h3.section-old{background:#7c7c7a}
.groups-divider{border:0;border-top:2px dashed var(--orange);opacity:.45;margin:26px 0 4px}

.group-card{
  border:1px solid var(--line);border-left:4px solid var(--side);border-radius:5px;
  padding:12px 14px 4px;margin:0 0 14px;background:#fff
}
.group-card.group-new{border-left:6px solid var(--orange);background:var(--orange-tint)}
.group-card.group-quiet{opacity:.92;background:#fbfbfa}
.group-card.group-collapsed{border-style:dashed;background:#f7f7f6;padding-bottom:10px}
.group-card table{margin-top:12px}

/* выданные пропуска — свёрнутый блок (у организации, поста выдачи и администратора) */
.issued-block{
  margin:12px 0 4px;padding:10px 12px 12px;background:#f4f4f3;
  border:1px solid var(--line);border-left:3px solid var(--side);border-radius:4px
}
.issued-block.issued-open{background:#fff}
.issued-block table{margin-top:10px}
.issued-toggle{margin:0 10px 0 0}
.issued-note{font-size:11px;color:var(--text-soft)}

/* архив старых пропусков: самый нижний блок страницы, по умолчанию свёрнут */
.archive-block{
  margin:14px 0 6px;padding:12px 12px 12px;background:#f4f4f3;
  border:1px solid var(--line);border-left:4px solid #7c7c7a;border-radius:5px
}
.archive-block.archive-open{background:#fff}
.archive-block table{margin-top:10px}
.archive-block .section-archive{margin:0 0 10px}
.archive-toggle{margin:0 10px 0 0}
.archive-note{display:inline-block;font-size:11px;color:var(--text-soft)}
h3.section-archive{
  min-height:34px;line-height:34px;padding:4px 14px 4px 18px;margin:0 0 10px;
  background:#7c7c7a;color:#fff;font:bold clamp(14px,1.4vw,17px) Tahoma,Verdana,sans-serif
}
tbody tr.row-old td{background:#efefee;color:#5b5b59}
tbody tr.row-old td b{color:#5b5b59}
.group-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.group-name{font:bold clamp(13px,1.2vw,15px) Verdana,sans-serif;color:var(--text)}
.group-last{font-size:11px;color:var(--text-soft);margin-left:auto}
.group-collapsed-note{color:var(--text-soft);font-size:12px;margin:8px 0 0}
.group-toggle{background:#fff;border:2px solid #e6e8eb;color:#4c5667}
.group-toggle:hover{background:#f4f5f8;border-color:#e6e8eb;color:#4c5667}
.group-issue-all{margin-left:8px}
.group-issue-cancel{margin-left:4px}

.badge{
  display:inline-block;padding:5px 10px;border-radius:3px;background:#dcdcdc;color:#333;
  font:bold 10px Verdana,sans-serif;text-transform:uppercase;letter-spacing:.5px
}
.badge-new{background:var(--orange);color:#fff}
.badge-total{background:#e9e9e7;color:#555}
.badge-old{background:#e2e2e0;color:#5b5b59}

/* ---------------- подвал ---------------- */
.footer{
  background:#333;color:#c9c9c9;padding:18px 24px;border-top:3px solid var(--orange);
  font:11px Verdana,sans-serif;line-height:175%
}
.footer b{color:#fff}
.footer a{color:#f4915a}
.footer a:hover{color:#ffbc8e}
.footer-org{font:bold 14px Tahoma,Verdana,sans-serif;color:#fff;margin-bottom:6px}

/* ---------------- адаптивность: телефон -> планшет -> монитор ---------------- */

/* Широкий монитор: используем экран полнее, чуть крупнее текст и кнопки */
@media (min-width:1400px){
  .shell{max-width:1620px}
  body{font-size:13px}
  td{font-size:12px;padding:9px}
  th{font-size:12px;padding:10px 9px}
  .tab-btn{font-size:13px;padding:13px 22px}
  button{font-size:13px}
  .groups-summary{font-size:12px}
  .badge{font-size:11px}
  .hero-addr{font-size:12px}
  .hint,.msg{font-size:13px}
}

/* Ноутбук/планшет: колонки уже, отступы меньше */
@media (max-width:1100px){
  .cols{gap:20px}
  .col-narrow{min-width:260px}
  .col-wide{min-width:300px}
  .group-card,.issued-block,.archive-block{padding-left:12px;padding-right:12px}
}

@media (max-width:900px){
  .hero{flex-wrap:wrap;gap:14px 18px}
  .hero-brand{flex:1 1 100%;min-width:0}
  .hero-photo{flex:1 1 100%}
  .hero-contacts{flex:1 1 100%;text-align:left}
  .hero .hero-img{height:clamp(120px,24vw,240px)}
  .logo{width:48px;height:48px;flex-basis:48px}
  .cols{flex-direction:column;gap:18px}
  .col-narrow,.col-wide{max-width:none;min-width:0}
  .groups-summary{margin-left:0;width:100%}
  .group-last{margin-left:0;width:100%}
  .hero,.hero-strip{padding-left:16px;padding-right:16px}
  .box{max-width:none}
  .zagolovok .zagolovok-out{float:none;display:block;padding-top:2px}
  #tableContainer,#usersTableContainer{overflow-x:auto}
  #tableContainer table,#usersTableContainer table{min-width:760px}
}

/* Телефон: таблицы становятся карточками (подпись колонки вместо шапки),
   кнопки и поля — под палец, шрифт в полях 16px (иначе браузер увеличивает картинку) */
@media (max-width:760px){
  #tableContainer,#usersTableContainer{overflow:visible}
  #tableContainer table,#usersTableContainer table{min-width:0}
  .hero{padding:12px 14px 14px}
  .logo{width:42px;height:42px;flex-basis:42px}
  .footer{padding:16px 14px}
  .hero .hero-img{height:clamp(110px,32vw,180px);clip-path:polygon(96px 0,100% 0,calc(100% - 14px) 100%,0 100%,0 96px)}
  .hero-photo::before{left:-10px;top:-10px;width:112px;height:112px}
  .box,.admin-container{padding:14px 14px 16px;margin-bottom:18px}
  .tabs{flex-direction:column}
  .tab-btn{width:100%;text-align:left;border-bottom:0;border-left:3px solid transparent}
  .tab-btn.active{border-left-color:var(--orange)}
  .groups-bar{flex-direction:column;align-items:stretch;padding:10px}
  .groups-bar .btn-collapse-all,.groups-bar .btn-refresh,.issued-toggle,.archive-toggle,
  .group-toggle,.group-issue-all,.group-issue-cancel{width:100%;margin:0 0 8px}
  .groups-filter{margin:0 0 8px}
  .group-head{gap:6px}
  .badge{margin:0 4px 4px 0}
  input,select,textarea{font-size:16px;padding:12px 12px}
  input[type=date]{max-width:none}
  .table-input{font-size:14px;padding:10px 10px;min-height:44px}
  button{padding:12px 16px;font-size:13px;min-height:44px;margin-bottom:10px}
  .btn-sm{padding:11px 14px;font-size:12px;min-height:44px}
  .expiry-alert,.msg{font-size:13px}

  /* таблицы-карточки */
  table.t-pass,table.t-archive,table.t-journal,table.t-user,table.t-users{display:block}
  table.t-pass thead,table.t-archive thead,table.t-journal thead,table.t-user thead,table.t-users thead{display:none}
  table.t-pass tbody,table.t-archive tbody,table.t-journal tbody,table.t-user tbody,table.t-users tbody{display:block}
  table.t-pass tr,table.t-archive tr,table.t-journal tr,table.t-user tr,table.t-users tr{
    display:block;border:1px solid var(--line);border-radius:4px;padding:8px 10px;margin:0 0 10px;background:#fff
  }
  table.t-pass td,table.t-archive td,table.t-journal td,table.t-user td,table.t-users td{
    display:block;border:0;padding:3px 0;background:transparent
  }
  tbody tr:nth-child(even){background:#f4f4f3}
  tbody tr.row-issued{background:#fff}
  tbody tr.row-new{background:var(--warn-bg)}
  tbody tr.row-old{background:#efefee}
  table.t-pass td[colspan],table.t-archive td[colspan],table.t-journal td[colspan],
  table.t-user td[colspan],table.t-users td[colspan]{
    font-weight:bold;padding-left:0
  }
  table.t-pass td[colspan]::before,table.t-archive td[colspan]::before,table.t-journal td[colspan]::before,
  table.t-user td[colspan]::before,table.t-users td[colspan]::before{content:none}
  table.t-pass td,table.t-archive td,table.t-journal td,table.t-user td,table.t-users td{position:relative;padding-left:112px}
  table.t-pass td::before,table.t-archive td::before,table.t-journal td::before,
  table.t-user td::before,table.t-users td::before{
    content:attr(data-label);position:absolute;left:0;top:3px;width:106px;
    font:bold 10px Verdana,sans-serif;color:var(--text-soft);text-transform:uppercase;letter-spacing:.4px
  }
}

@media (max-width:420px){
  .hero .hero-img{height:clamp(96px,28vw,120px);clip-path:polygon(72px 0,100% 0,calc(100% - 12px) 100%,0 100%,0 72px)}
  .hero-photo::before{left:-8px;top:-8px;width:86px;height:86px}
  .hero-addr{font-size:10px}
  .hero-contacts::before{margin:0 0 9px 0}
  table.t-pass td,table.t-archive td,table.t-journal td,table.t-user td,table.t-users td{padding-left:96px}
  table.t-pass td::before,table.t-archive td::before,table.t-journal td::before,
  table.t-user td::before,table.t-users td::before{width:90px;font-size:9px}
  .footer{font-size:10px}
}

/* ---------------- постоянные пропуска ---------------- */

/* вкладка меняет цвет, когда есть необработанные заявки (стадия «Получено») */
.tab-btn.tab-alert{background:var(--orange);color:#fff;border-bottom-color:var(--orange-dark)}
.tab-btn.tab-alert:hover{background:var(--orange-dark);color:#fff}
.tab-badge{
  display:inline-block;margin:0 0 0 8px;padding:2px 8px;border-radius:10px;
  background:#fff;color:var(--orange);font:bold 11px Verdana,sans-serif;vertical-align:middle
}
.tab-btn:not(.tab-alert) .tab-badge{display:none}

.perm-page{margin:0 0 10px}
.perm-bar{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:10px 12px;
  background:var(--bar);border:1px solid #e3e3e1;border-left:3px solid var(--orange)
}
.perm-summary{font:bold 11px Verdana,sans-serif;color:var(--text);text-transform:uppercase;letter-spacing:.5px}
tbody tr.row-inwork td{background:#fff}
tbody tr.row-inwork td b{color:var(--text)}

/* четыре стадии исполнения: пройденные, текущая и оставшиеся */
.stage-chain{display:inline-flex;flex-wrap:wrap;gap:5px}
.stage{
  padding:4px 9px;border-radius:3px;font:bold 10px Verdana,sans-serif;letter-spacing:.4px;
  text-transform:uppercase;border:1px solid var(--line);background:#f4f4f3;color:#8a8a88
}
.stage-done{background:#e7f3e8;border-color:#b7d9bb;color:#2f6b39}
.stage-current{background:var(--orange);border-color:var(--orange);color:#fff}
.stage-todo{background:#f4f4f3;border-color:var(--line);color:#8a8a88}

.btn-stage{background:#fff;border:1px solid #d8d8d6;color:#4c5667}
.btn-stage:hover{background:var(--orange-tint);border-color:var(--orange);color:var(--orange-dark)}
.btn-stage.stage-current{background:var(--orange);border-color:var(--orange);color:#fff}
.btn-stage.stage-current:disabled{opacity:1}
.perm-issued .archive-note{margin:0 0 4px}

/* фильтр списка и выгрузка постоянных пропусков в CSV (для бухгалтерии) */
.perm-filter{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:9px 12px;
  background:#faf9f8;border:1px dashed #d8d8d6
}
.perm-filter-label{font:11px Verdana,sans-serif;color:var(--text-soft);text-transform:uppercase;letter-spacing:.4px}
.perm-select,.perm-date{
  font:12px Verdana,sans-serif;padding:5px 7px;border:1px solid #d8d8d6;border-radius:3px;background:#fff;color:var(--text)
}
.perm-export{margin-left:auto}
.perm-reset{margin-left:4px}

/* срок действия постоянного пропуска: действует, истекает, просрочен */
.badge-valid{background:#e7f3e8;border-color:#b7d9bb;color:#2f6b39}
.badge-expiring{background:#fff4e0;border-color:#f0c98a;color:#8a5310}
.badge-expired{background:#fdeaea;border-color:#e6b3b3;color:#a33232}
.valid-info{font:11px Verdana,sans-serif;color:var(--text-soft);margin-left:6px}
tbody tr.row-expired td{background:#fff7f7}
tbody tr.row-expired td:first-child{box-shadow:inset 3px 0 0 #d08585}
.btn-renew{border-color:var(--orange);color:var(--orange-dark)}
.btn-renew:hover{background:var(--orange-tint)}

@media (max-width:760px){
  .perm-export{margin-left:0;width:100%}
  .perm-select,.perm-date{flex:1 1 130px}
  table.t-perm{display:block}
  table.t-perm thead{display:none}
  table.t-perm tbody{display:block}
  table.t-perm tr{
    display:block;border:1px solid var(--line);border-radius:4px;padding:8px 10px;margin:0 0 10px;background:#fff
  }
  table.t-perm td{
    display:block;border:0;background:transparent;position:relative;padding:3px 0 3px 112px
  }
  table.t-perm td::before{
    content:attr(data-label);position:absolute;left:0;top:3px;width:106px;
    font:bold 10px Verdana,sans-serif;color:var(--text-soft);text-transform:uppercase;letter-spacing:.4px
  }
  .stage{padding:6px 10px;font-size:11px}
}

@media (max-width:420px){
  table.t-perm td{padding-left:96px}
  table.t-perm td::before{width:90px;font-size:9px}
}