/* Base styles */

:root{
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: rgba(15,23,42,.65);
  --subtle: rgba(15,23,42,.45);
  --line: rgba(15,23,42,.12);
  --line-soft: rgba(15,23,42,.06);
  --btn: #2b6cb0;
  --btn-hover: #255a94;
  --btn2: rgba(15,23,42,.06);
  --danger: #d9534f;
  --off: #94a3b8;
  --pub: #8ba989;
  --selected-bg: rgba(43,108,176,0.04);

  --radius: 14px;
  --shadow: 0 10px 30px rgba(15,23,42,.12);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans";

  --status-active-bg:    rgba(139,169,137,0.18);
  --status-active-fg:    #4f7a52;
  --status-active-dot:   #6c9e70;
  --status-draft-bg:     rgba(184,160,100,0.18);
  --status-draft-fg:     #8a6d2a;
  --status-draft-dot:    #c2a455;
  --status-done-bg:      rgba(122,143,166,0.18);
  --status-done-fg:      #4d6378;
  --status-done-dot:     #7a8fa6;
  --status-cancelled-bg: rgba(217,83,79,0.14);
  --status-cancelled-fg: #b23c38;
  --status-cancelled-dot:#d9534f;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.4;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

.container{
  width: min(1300px, 92vw);
  margin: 18px auto 36px;
}

@media (max-width: 767px){
  .container{
    width: 100%;
    margin: 12px 0 24px;
  }

  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="time"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select{
    font-size: 16px;
  }

  .topbar__inner{
    width: 100%;
    padding: 10px 12px;
  }

  .brand{
    font-size: 20px;
    line-height: 1.2;
  }

  .page-title{
    padding: 0 12px;
  }

  .page-title h1{
    font-size: 18px;
  }

  .card, .block{
    padding: 12px;
  }

  .card > h2,
  .block > h2,
  .project-create-title{
    font-size: 18px !important;
    line-height: 1.2;
  }
}


.page-title h1{
  margin: 0 0 6px;
  font-size: 28px;
}

@media (max-width: 768px){
  .page-title h1{
    font-size: 20px;
  }
}


.page-title .meta{
  display:flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
}


.sep{
  border: none;
  height: 1px;
  background: var(--line);
  margin: 16px 0;
}

.card, .block{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}

.form-row{
  display:flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.form-group, .field{
  display:flex;
  flex-direction: column;
  gap: 6px;
}

label{
  font-size: 13px;
  color: var(--muted);
}

.hint-text{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

input[type="text"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="datetime-local"],
input[type="date"],
input[type="time"],
select,
textarea{
  width: 280px;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: #000000;
  outline: none;
}

textarea{
  min-height: 110px;
  width: 100%;
}

input.small{ width: 220px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--btn);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
}
.btn:hover{ filter: brightness(1.06); text-decoration:none; }
.btn:active{ transform: translateY(1px); }

.btn-ghost{
  background: transparent;
  color: var(--text);
}

.btn-ok{
  background: #2f855a;
}

.error-text{
  margin-top: 6px;
  color: var(--danger);
  font-size: 12px;
}

.messages{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.alert{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 1.4;
}

.alert-success{
  background: rgba(47, 133, 90, 0.12);
  border-color: rgba(47, 133, 90, 0.35);
  color: #2f855a;
}

.alert-error{
  background: rgba(217, 83, 79, 0.12);
  border-color: rgba(217, 83, 79, 0.35);
  color: #b23c38;
}

.alert-warning{
  background: rgba(237, 137, 54, 0.12);
  border-color: rgba(237, 137, 54, 0.35);
  color: #c05621;
}

.alert-info, .alert-debug{
  background: rgba(43, 108, 176, 0.12);
  border-color: rgba(43, 108, 176, 0.35);
  color: #2b6cb0;
}

.form-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

.form-grid-2__full{
  grid-column: 1 / -1;
}

@media (max-width: 768px){
  .form-grid-2{
    grid-template-columns: 1fr;
  }
}

.tbl{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
}

.tbl th, .tbl td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.tbl th{
  text-align: left;
  font-size: 13px;
  color: var(--muted);
  background: rgba(255,255,255,.03);
}

.tbl tr:last-child td{ border-bottom: none; }

.tbl .tbl-subhead td{
  font-weight: 700;
  background: rgba(255,255,255,.06);
}



/* --- LOGIN layout (только страница входа) --- */
.auth-page{
  min-height: calc(100vh - 110px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.auth-card{
  width: min(620px, 92vw);
}
.auth-card input[type="text"],
.auth-card input[type="password"]{
  width: 100%;
}

@media (max-width: 767px){
  :root{
    --mobile-edge: 8px;
  }


  .topbar__inner{
    padding-left: 4px !important;
    padding-right: var(--mobile-edge) !important;
  }

  .page-title{
    padding-left: var(--mobile-edge) !important;
    padding-right: var(--mobile-edge) !important;
  }

  .container h1,
  .container h2,
  .container h3{
    padding-left: var(--mobile-edge);
    padding-right: var(--mobile-edge);
  }

  .card h1,
  .card h2,
  .card h3,
  .block h1,
  .block h2,
  .block h3{
    padding-left: 0;
    padding-right: 0;
  }
}
.check-row{
  display:flex;
  align-items:center;
  gap: 12px;
}
.check-row input[type="checkbox"]{
  width: 18px;
  height: 18px;
}
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  overflow-x: hidden;
}