/* ===========================================================
   ATLAS DASHBOARD
   Shared admin shell styles: sidebar, topbar, cards, tables,
   status badges. Uses Atlas Theme variables (atlas-theme.css).
   =========================================================== */

/* ===========================================================
   LAYOUT SHELL
   =========================================================== */

.atlas-dashboard {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    min-height: 100vh;

    background: var(--atlas-bg);

}


/* ===========================================================
   SIDEBAR
   =========================================================== */

.atlas-sidebar {

    width: 260px;
    -ms-flex-negative: 0;
        flex-shrink: 0;

    background: var(--atlas-white);

    border-right: 1px solid var(--atlas-border);


    
    display: -webkit-box;


    
    display: -ms-flexbox;


    
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    padding: 24px 16px;

}


.atlas-sidebar-logo {

    

    display: -webkit-box;

    

    display: -ms-flexbox;

    

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    padding: 0 8px 24px;

    margin-bottom: 8px;

    border-bottom: 1px solid var(--atlas-border);

}


.atlas-sidebar-logo img {

    height: 32px;

}


.atlas-sidebar-nav {

    list-style: none;

    padding: 0;
    margin: 0;

    
    display: -webkit-box;

    
    display: -ms-flexbox;

    
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;

}


.atlas-sidebar-nav .nav-link {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;

    padding: 10px 12px;

    border-radius: var(--atlas-radius-sm);

    color: var(--atlas-text-light);

    font-weight: 600;
    font-size: 14px;

    -webkit-transition: all var(--atlas-speed);

    transition: all var(--atlas-speed);

}


.atlas-sidebar-nav .nav-link i {

    width: 18px;
    text-align: center;

}


.atlas-sidebar-nav .nav-link:hover {

    background: var(--atlas-bg);
    color: var(--atlas-text);

}


.atlas-sidebar-nav .nav-link.active {

    background: rgba(78, 196, 195, .12);
    color: var(--atlas-primary-hover);

}


/* ===========================================================
   MAIN AREA
   =========================================================== */

.atlas-main {

    -webkit-box-flex: 1;

        -ms-flex-positive: 1;

            flex-grow: 1;

    

    display: -webkit-box;

    

    display: -ms-flexbox;

    

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    min-width: 0;

}


/* ===========================================================
   TOPBAR
   =========================================================== */

.atlas-topbar {

    height: 68px;
    -ms-flex-negative: 0;
        flex-shrink: 0;

    

    display: -webkit-box;

    

    display: -ms-flexbox;

    

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;

    padding: 0 28px;

    background: var(--atlas-white);

    border-bottom: 1px solid var(--atlas-border);

}


.atlas-topbar-user {

    
    display: -webkit-box;

    
    display: -ms-flexbox;

    
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;

    font-weight: 600;

    color: var(--atlas-text);

}


.atlas-topbar-user .avatar {

    width: 36px;
    height: 36px;

    border-radius: 50%;

    background: var(--atlas-primary);

    color: white;

    
    display: -webkit-box;

    
    display: -ms-flexbox;

    
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    font-size: 14px;
    font-weight: 700;

}


/* ===========================================================
   CONTENT AREA
   =========================================================== */

.atlas-content {

    -webkit-box-flex: 1;

        -ms-flex-positive: 1;

            flex-grow: 1;

    width: 100%;
    max-width: 1500px;

    margin-left: auto;
    margin-right: auto;

    padding: 28px 40px 40px;

    background: var(--atlas-bg);

    -webkit-box-sizing: border-box;
            box-sizing: border-box;

}


.atlas-page-header {

    

        display: -webkit-box;

    

        display: -ms-flexbox;

    

        display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;

    gap: 16px;

    margin-bottom: 24px;

    -ms-flex-wrap: wrap;

        flex-wrap: wrap;

}


.atlas-page-title {

    margin-bottom: 4px;

}


.atlas-page-subtitle {

    color: var(--atlas-text-light);

    margin-bottom: 0;

}


/* ===========================================================
   CARDS (dashboard specific)
   =========================================================== */

.atlas-card {

    background: var(--atlas-white);

    border-radius: var(--atlas-radius);

    -webkit-box-shadow: var(--atlas-shadow-sm);

            box-shadow: var(--atlas-shadow-sm);

    border: 1px solid var(--atlas-border);

    padding: 24px;

}


.atlas-card-toolbar {

    
    display: -webkit-box;

    
    display: -ms-flexbox;

    
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;

    gap: 16px;

    margin-bottom: 20px;

    -ms-flex-wrap: wrap;

        flex-wrap: wrap;

}


.atlas-search {

    max-width: 320px;

    width: 100%;

}


/* ===========================================================
   TABLE
   =========================================================== */

.atlas-table {

    width: 100%;

    border-collapse: separate;
    border-spacing: 0;

}


.atlas-table thead th {

    text-transform: uppercase;

    font-size: 12px;

    letter-spacing: .03em;

    color: var(--atlas-text-light);

    font-weight: 700;

    border-bottom: 1px solid var(--atlas-border);

    padding: 12px 16px;

    background: transparent;

}


.atlas-table tbody td {

    padding: 14px 16px;

    border-bottom: 1px solid var(--atlas-border);

    vertical-align: middle;

    color: var(--atlas-text);

}


.atlas-table tbody tr:last-child td {

    border-bottom: none;

}


.atlas-user-name {

    font-weight: 600;

    color: var(--atlas-heading);

}


.atlas-user-email {

    color: var(--atlas-text-light);

    font-size: 13px;

}


/* ===========================================================
   STATUS BADGES
   =========================================================== */

.atlas-badge {

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;

    padding: 4px 12px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;

    text-transform: capitalize;

}


.atlas-badge:before {

    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;

}


.atlas-badge-active {

    background: rgba(46, 182, 125, .12);
    color: var(--atlas-success);

}


.atlas-badge-disabled {

    background: rgba(229, 72, 77, .12);
    color: var(--atlas-danger);

}


/* ===========================================================
   ACTION BUTTONS
   =========================================================== */

.atlas-action-btn {

    width: 34px;
    height: 34px;

    border-radius: var(--atlas-radius-sm);

    border: 1px solid var(--atlas-border);

    background: var(--atlas-white);

    color: var(--atlas-text-light);

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    -webkit-transition: all var(--atlas-speed);

    transition: all var(--atlas-speed);

}


.atlas-action-btn:hover {

    border-color: var(--atlas-primary);
    color: var(--atlas-primary);

}


.atlas-action-btn.text-danger:hover {

    border-color: var(--atlas-danger);
    color: var(--atlas-danger);

}


.atlas-action-btn.text-success:hover {

    border-color: var(--atlas-success);
    color: var(--atlas-success);

}


/* ===========================================================
   RESPONSIVE
   =========================================================== */

@media (max-width: 991px) {

    .atlas-sidebar {

        display: none;

    }

    .atlas-content {

        max-width: none;
        padding: 20px;

    }

}

@media (max-width: 575.98px) {

    .atlas-content {

        padding: 16px 12px 28px;

    }

}
/* =========================================
   Navigation – tredje niveau
   ========================================= */

.atlas-dropdown-submenu {
    position: relative;
}

.atlas-dropdown-submenu-toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 1rem;
}

.atlas-submenu-arrow {
    margin-left: auto;
    font-size: 0.75rem;
}

.atlas-dropdown-submenu-menu {
    position: absolute;
    top: -0.5rem;
    left: 100%;
    margin-left: 0.15rem;
    display: none;
}

.atlas-dropdown-submenu:hover > .atlas-dropdown-submenu-menu {
    display: block;
}

/* Leads table column widths */

.atlas-leads-table {
  width: 100%;
  table-layout: fixed;
}

.atlas-leads-table th:nth-child(1),
.atlas-leads-table td:nth-child(1) {
  width: 38%;
}

.atlas-leads-table th:nth-child(2),
.atlas-leads-table td:nth-child(2) {
  width: 12%;
}

.atlas-leads-table th:nth-child(3),
.atlas-leads-table td:nth-child(3) {
  width: 20%;
}

.atlas-leads-table th:nth-child(4),
.atlas-leads-table td:nth-child(4) {
  width: 16%;
}

.atlas-leads-table th:nth-child(5),
.atlas-leads-table td:nth-child(5) {
  width: 14%;
}

/* ===========================================================
   NAVIGATION TABLE COLUMN WIDTHS
   Isoleret til /platform/navigation
   =========================================================== */

.atlas-navigation-table {
    width: 100%;
    table-layout: fixed;
}

.atlas-navigation-table th,
.atlas-navigation-table td {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.atlas-navigation-table th:nth-child(1),
.atlas-navigation-table td:nth-child(1) { width: 22%; }

.atlas-navigation-table th:nth-child(2),
.atlas-navigation-table td:nth-child(2) { width: 12%; }

.atlas-navigation-table th:nth-child(3),
.atlas-navigation-table td:nth-child(3) { width: 10%; }

.atlas-navigation-table th:nth-child(4),
.atlas-navigation-table td:nth-child(4) { width: 18%; }

.atlas-navigation-table th:nth-child(5),
.atlas-navigation-table td:nth-child(5) { width: 10%; }

.atlas-navigation-table th:nth-child(6),
.atlas-navigation-table td:nth-child(6) { width: 7%; }

.atlas-navigation-table th:nth-child(7),
.atlas-navigation-table td:nth-child(7) { width: 7%; }

.atlas-navigation-table th:nth-child(8),
.atlas-navigation-table td:nth-child(8) { width: 8%; }

.atlas-navigation-table th:nth-child(9),
.atlas-navigation-table td:nth-child(9) {
    width: 110px;
    white-space: nowrap;
}

/* ===========================================================
   ATLAS V8.0
   Photographer Dashboard Mockup
   =========================================================== */

.atlas-photographer-dashboard {
  width: min(100% - 40px, 1240px);
  margin: 0 auto;
  padding: 42px 0 64px;
  color: #13283b;
}

.atlas-photographer-welcome {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 26px;
}

.atlas-photographer-eyebrow,
.atlas-photographer-section-label {
  display: block;
  margin-bottom: 7px;
  color: #2aa9aa;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.atlas-photographer-welcome h1 {
  margin: 0;
  color: #10263a;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 760;
  letter-spacing: -.045em;
}

.atlas-photographer-welcome p {
  max-width: 680px;
  margin: 10px 0 0;
  color: #6b7f91;
  font-size: 1rem;
}

.atlas-photographer-welcome-date {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #7890a3;
  font-size: .82rem;
  white-space: nowrap;
}

.atlas-photographer-welcome-date strong {
  color: #2e4357;
  font-size: 1rem;
}


.atlas-photographer-next-card {
  overflow: hidden;
  margin-bottom: 34px;
  border: 1px solid #dce7ec;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 22px 52px rgba(35, 63, 83, .08);
}

.atlas-photographer-next-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 30px 18px;
}

.atlas-photographer-next-header h2 {
  margin: 0;
  color: #10263a;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  font-weight: 760;
  letter-spacing: -.035em;
}

.atlas-photographer-contact-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: .73rem;
  font-weight: 750;
  white-space: nowrap;
}

.atlas-status-warning {
  background: #fff3d4;
  color: #996a10;
}

.atlas-status-success {
  background: #e6f7ed;
  color: #2f7d50;
}

.atlas-status-danger {
  background: #fde9eb;
  color: #a13d49;
}

.atlas-photographer-next-body {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 220px;
  gap: 30px;
  padding: 24px 30px 30px;
}

.atlas-photographer-date-block {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 20px;
  border-radius: 18px;
  background: #effafa;
}

.atlas-photographer-date-day {
  color: #209fa0;
  font-size: 3.2rem;
  font-weight: 780;
  line-height: 1;
  letter-spacing: -.06em;
}

.atlas-photographer-date-block div {
  display: flex;
  flex-direction: column;
}

.atlas-photographer-date-block strong {
  color: #1d3c50;
  font-size: .95rem;
}

.atlas-photographer-date-block span:last-child {
  color: #7690a2;
  font-size: .76rem;
}

.atlas-photographer-primary-info {
  min-width: 0;
}

.atlas-photographer-time {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
}

.atlas-photographer-time span,
.atlas-photographer-meta-item span,
.atlas-photographer-task-plan span {
  color: #8799a8;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.atlas-photographer-time strong {
  color: #193247;
  font-size: 1.4rem;
  font-weight: 750;
}

.atlas-photographer-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 18px 28px;
}

.atlas-photographer-meta-item {
  min-width: 0;
}

.atlas-photographer-meta-item strong {
  display: block;
  margin-top: 4px;
  color: #20384c;
  font-size: .94rem;
}

.atlas-photographer-meta-item small {
  display: block;
  margin-top: 3px;
  color: #6f8496;
  font-size: .78rem;
  overflow-wrap: anywhere;
}

.atlas-photographer-meta-wide {
  grid-column: 1 / -1;
}

.atlas-photographer-readiness {
  padding: 20px;
  border-radius: 18px;
  background: #f7fafb;
}

.atlas-readiness-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  color: #526a7e;
  font-size: .82rem;
  font-weight: 650;
}

.atlas-readiness-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
}

.atlas-readiness-dot-warning {
  background: #e6ad36;
}

.atlas-readiness-dot-success {
  background: #45b77a;
}

.atlas-photographer-next-actions {
  display: flex;
  gap: 12px;
  padding: 20px 30px 28px;
  border-top: 1px solid #edf2f4;
}

.atlas-photographer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 12px 20px;
  border: 0;
  border-radius: 14px;
  font-size: .88rem;
  font-weight: 750;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.atlas-photographer-button:hover,
.atlas-photographer-button:focus {
  transform: translateY(-1px);
}

.atlas-photographer-button-primary {
  background: #4ec4c3;
  box-shadow: 0 10px 22px rgba(78, 196, 195, .22);
  color: #0b3e40;
}

.atlas-photographer-button-primary:hover,
.atlas-photographer-button-primary:focus {
  background: #43b7b6;
  color: #082f31;
}

.atlas-photographer-button-secondary {
  border: 1px solid #d5e2e7;
  background: #fff;
  color: #2d465a;
}

.atlas-photographer-button-secondary:hover,
.atlas-photographer-button-secondary:focus {
  background: #f5f9fa;
  color: #172f43;
}


.atlas-photographer-upcoming {
  padding: 30px;
  border: 1px solid #dce7ec;
  border-radius: 24px;
  background: #fff;
}

.atlas-photographer-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.atlas-photographer-section-header h2 {
  margin: 0;
  color: #142b3e;
  font-size: 1.35rem;
  font-weight: 750;
  letter-spacing: -.02em;
}

.atlas-photographer-section-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #278f91;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
}

.atlas-photographer-section-link:hover,
.atlas-photographer-section-link:focus {
  color: #176f71;
}

.atlas-photographer-task-list {
  display: grid;
  gap: 10px;
}

.atlas-photographer-task-card {
  display: grid;
  grid-template-columns: 68px minmax(220px, 1fr) auto 130px 34px;
  align-items: center;
  gap: 18px;
  min-height: 82px;
  padding: 12px 14px;
  border: 1px solid #e1e9ed;
  border-radius: 17px;
  background: #fff;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.atlas-photographer-task-card:hover {
  transform: translateY(-1px);
  border-color: #c9dedf;
  box-shadow: 0 11px 24px rgba(35, 63, 83, .07);
}

.atlas-photographer-task-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 15px;
  background: #f1f8f8;
}

.atlas-photographer-task-date strong {
  color: #218f91;
  font-size: 1.25rem;
  line-height: 1;
}

.atlas-photographer-task-date span {
  margin-top: 4px;
  color: #7890a3;
  font-size: .67rem;
  font-weight: 750;
  text-transform: uppercase;
}

.atlas-photographer-task-main {
  min-width: 0;
}

.atlas-photographer-task-main h3 {
  margin: 0;
  color: #1c3448;
  font-size: .98rem;
  font-weight: 750;
}

.atlas-photographer-task-main p {
  margin: 5px 0 0;
  color: #718698;
  font-size: .78rem;
}

.atlas-photographer-task-plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.atlas-photographer-task-plan strong {
  margin-top: 4px;
  color: #395267;
  font-size: .78rem;
}

.atlas-photographer-task-open {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 11px;
  background: #f0f7f7;
  color: #278f91;
}

.atlas-photographer-task-open:hover,
.atlas-photographer-task-open:focus {
  background: #e2f3f3;
  color: #176f71;
}


@media (max-width: 991.98px) {
  .atlas-photographer-next-body {
    grid-template-columns: 140px minmax(0, 1fr);
  }

  .atlas-photographer-readiness {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
  }

  .atlas-photographer-task-card {
    grid-template-columns: 64px minmax(180px, 1fr) auto 34px;
  }

  .atlas-photographer-task-plan {
    display: none;
  }
}


@media (max-width: 767.98px) {
  .atlas-photographer-dashboard {
    width: min(100% - 24px, 1240px);
    padding-top: 26px;
  }

  .atlas-photographer-welcome {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .atlas-photographer-welcome-date {
    align-items: flex-start;
  }

  .atlas-photographer-next-card,
  .atlas-photographer-upcoming {
    border-radius: 20px;
  }

  .atlas-photographer-next-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .atlas-photographer-next-body {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .atlas-photographer-date-block {
    min-height: 0;
  }

  .atlas-photographer-meta-grid {
    grid-template-columns: 1fr;
  }

  .atlas-photographer-meta-wide {
    grid-column: auto;
  }

  .atlas-photographer-readiness {
    grid-column: auto;
    display: block;
  }

  .atlas-photographer-next-actions {
    flex-direction: column;
  }

  .atlas-photographer-button {
    width: 100%;
  }

  .atlas-photographer-section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .atlas-photographer-task-card {
    grid-template-columns: 58px minmax(0, 1fr) 34px;
    gap: 12px;
    min-height: 92px;
  }

  .atlas-photographer-task-card .atlas-photographer-contact-status {
    grid-column: 2;
    justify-self: start;
  }

  .atlas-photographer-task-open {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

/* ===========================================================
   ATLAS V8.0.1
   Photographer dashboard actions and read-only task page
   =========================================================== */

.atlas-photographer-task-note {
  padding: 14px 16px;
  border: 1px solid #dce9ec;
  border-radius: 14px;
  background: #f7fbfb;
}

.atlas-photographer-task-note > span {
  color: #278f91;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.atlas-photographer-task-note p {
  margin: 7px 0 0;
  color: #40586c;
  font-size: .84rem;
  line-height: 1.55;
}

.atlas-photographer-task-open {
  text-decoration: none;
}


.atlas-photographer-task-view {
  width: min(100% - 40px, 1120px);
  margin: 0 auto;
  padding: 34px 0 64px;
  color: #13283b;
}

.atlas-task-page-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 22px;
  margin-bottom: 24px;
}

.atlas-task-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid #d9e5e9;
  border-radius: 13px;
  background: #fff;
  color: #3d566a;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}

.atlas-task-back:hover,
.atlas-task-back:focus {
  background: #f5f9fa;
  color: #1f3a4e;
}

.atlas-task-heading h1 {
  margin: 0;
  color: #10263a;
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 770;
  letter-spacing: -.045em;
}

.atlas-task-heading p {
  margin: 8px 0 0;
  color: #708697;
  font-size: .94rem;
}

.atlas-task-overview-card,
.atlas-task-note-card,
.atlas-task-plan-card {
  margin-bottom: 20px;
  padding: 26px;
  border: 1px solid #dce7ec;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 15px 36px rgba(35, 63, 83, .06);
}

.atlas-task-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 22px 30px;
}

.atlas-task-overview-item > span {
  color: #8799a8;
  font-size: .71rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.atlas-task-overview-item strong {
  display: block;
  margin-top: 5px;
  color: #20384c;
  font-size: .96rem;
}

.atlas-task-overview-item small {
  display: block;
  margin-top: 4px;
  color: #6f8496;
  font-size: .8rem;
  overflow-wrap: anywhere;
}

.atlas-task-overview-wide {
  grid-column: 1 / -1;
}

.atlas-task-overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #edf2f4;
}

.atlas-task-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.atlas-task-section-heading h2 {
  margin: 0;
  color: #172f43;
  font-size: 1.2rem;
  font-weight: 760;
}

.atlas-task-note-status {
  color: #2f7d50;
  font-size: .76rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity .18s ease;
}

.atlas-task-note-status-visible {
  opacity: 1;
}

.atlas-task-note-input {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  padding: 15px 16px;
  border: 1px solid #d7e3e8;
  border-radius: 15px;
  background: #fbfdfd;
  color: #263f53;
  font: inherit;
  font-size: .9rem;
  line-height: 1.55;
  outline: none;
}

.atlas-task-note-input:focus {
  border-color: #4ec4c3;
  box-shadow: 0 0 0 4px rgba(78, 196, 195, .12);
}

.atlas-task-note-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.atlas-task-plan-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #3d6b53;
  font-size: .78rem;
  font-weight: 720;
}

.atlas-task-day-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 13px;
  padding: 16px 18px;
  border-radius: 15px;
  background: #f3f9f9;
}

.atlas-task-day-heading div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.atlas-task-day-heading strong {
  color: #1b8587;
  font-size: .85rem;
}

.atlas-task-day-heading span {
  color: #60798c;
  font-size: .8rem;
}

.atlas-task-day-heading > span {
  color: #2d465a;
  font-weight: 750;
  white-space: nowrap;
}

.atlas-task-timeline {
  display: grid;
  gap: 10px;
}

.atlas-task-timeline-item {
  --atlas-task-accent: #4ec4c3;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #dfe8ec;
  border-left: 5px solid var(--atlas-task-accent);
  border-radius: 16px;
  background: #fff;
}

.atlas-task-break {
  --atlas-task-accent: #4f9fd8;
  background: #f7fbff;
}

.atlas-task-break-short {
  --atlas-task-accent: #4f9fd8;
}

.atlas-task-time {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 14px;
  border-right: 1px solid #e3ebee;
}

.atlas-task-time strong {
  color: #1b3347;
  font-size: .92rem;
}

.atlas-task-time span {
  color: #7a8fa1;
  font-size: .76rem;
}

.atlas-task-item-content {
  min-width: 0;
  padding: 14px 16px;
}

.atlas-task-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.atlas-task-item-top h3 {
  margin: 0;
  color: #173045;
  font-size: 1rem;
  font-weight: 760;
}

.atlas-task-item-top span {
  color: #678094;
  font-size: .76rem;
  font-weight: 650;
  white-space: nowrap;
}

.atlas-task-item-content p {
  margin: 5px 0 0;
  color: #4f687c;
  font-size: .82rem;
}

.atlas-task-item-content small {
  display: block;
  margin-top: 6px;
  color: #75899b;
  font-size: .76rem;
}


@media (max-width: 767.98px) {
  .atlas-photographer-task-view {
    width: min(100% - 20px, 1120px);
    padding-top: 20px;
  }

  .atlas-task-page-header {
    grid-template-columns: 1fr auto;
    gap: 14px;
  }

  .atlas-task-back {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .atlas-task-heading {
    min-width: 0;
  }

  .atlas-task-page-header .atlas-photographer-contact-status {
    align-self: start;
  }

  .atlas-task-overview-card,
  .atlas-task-note-card,
  .atlas-task-plan-card {
    padding: 18px;
    border-radius: 19px;
  }

  .atlas-task-overview-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .atlas-task-overview-wide {
    grid-column: auto;
  }

  .atlas-task-overview-actions {
    flex-direction: column;
  }

  .atlas-task-overview-actions .atlas-photographer-button {
    width: 100%;
  }

  .atlas-task-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .atlas-task-note-actions .atlas-photographer-button {
    width: 100%;
  }

  .atlas-task-day-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .atlas-task-timeline-item {
    grid-template-columns: 70px minmax(0, 1fr);
    border-radius: 14px;
  }

  .atlas-task-time {
    padding: 14px 10px;
  }

  .atlas-task-item-content {
    padding: 13px 12px;
  }

  .atlas-task-item-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .atlas-task-item-top span {
    white-space: normal;
  }

  .atlas-photographer-next-actions {
    flex-direction: column;
  }

  .atlas-photographer-next-actions .atlas-photographer-button {
    width: 100%;
  }
}