/* ============================================================
   Responsive overrides for ViewTasks and the login pages (mobile / tablet).
   The desktop CSS uses fixed pixel widths (975px). On narrow
   viewports we unconstrain the shell and fold the menus into a
   hamburger drop down. Below 700px the task grid collapses to the
   title plus one column (col-keep, chosen in BuildList2.js) and
   the other column values appear in a .task-meta line under the
   title. The title cell already carries the priority flag,
   attachment icon, and description toggle.
   ============================================================ */

/* Only used on narrow screens (below)... */
#menu-toggle { display: none; }
.task-meta { display: none; }

@media (max-width: 900px) {
 html, body { overflow-x: hidden; }
 #page, #header, #footer { width: auto !important; max-width: 100%; padding-left: 8px; padding-right: 8px; box-sizing: border-box; }
 /* Keep the 60px bar height, the logo is a 60px tab drawn to sit flush in header-back.gif... */
 #header { position: relative; height: 60px; margin-bottom: 10px; }
 #logo { float: left; width: 163px; height: 60px; padding: 0; overflow: hidden; }
 #logo img { display: block; }

 /* Hamburger button, toggles #header.menu-open... */
 #menu-toggle { display: block; position: absolute; right: 8px; top: 10px; width: 44px; height: 40px; padding: 10px 9px; box-sizing: border-box; background: #fff; border: 1px solid #ccc; border-radius: 4px; }
 #menu-toggle span { display: block; height: 3px; margin-bottom: 5px; background: #6a960f; border-radius: 2px; }
 #menu-toggle span:last-child { margin-bottom: 0; }

 /* Both menus drop down below the header when open... */
 #header-right { display: none; float: none; width: auto; position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; background: #fff; border-top: 1px solid #ccc; box-shadow: 0 6px 12px rgba(0,0,0,0.2); text-align: left; }
 #header.menu-open #header-right { display: block; }
 #main-menu-nest { float: none; width: auto; height: auto; overflow: visible; }
 #main-menu-nest ul { height: auto; border-left: 0; }
 #main-menu-nest ul li { float: none; }
 #main-menu-nest ul a { padding: 12px 10px; border-right: 0; border-left: 0; border-bottom: 1px solid #ccc; text-align: left; }
 #account-menu { float: none; width: auto; margin: 0; }
 #account-menu ul { float: none; height: auto; }
 #account-menu ul li { float: none; border-right: 0; }
 #account-menu ul a { padding: 12px 10px; font-size: 14px; text-align: left; border-bottom: 1px solid #eee; }

 .page-title-left, .page-title-right { float: none !important; }
 .page-title-right > div { float: none !important; margin: 6px 0 !important; }
 .select-tasks { width: auto !important; display: block; max-width: 100%; box-sizing: border-box; }
 .tasks-dropdown, .ui-multiselect { max-width: 100% !important; box-sizing: border-box; }

 #footer-1, #footer-2 { float: none; width: auto; padding: 6px 10px; text-align: center; }

 /* Login / forgot password box... */
 #login-page { margin: 16px; }
 #login-page img { max-width: 100%; height: auto; }
 .extern-box { width: auto; max-width: 450px; box-sizing: border-box; }
 #login { width: auto; max-width: 420px; padding: 20px 16px; box-sizing: border-box; }
 #login table, #login table tbody, #login table tr { display: block; }
 #login table tr td { display: block; padding: 4px 0 !important; width: auto !important; }
 #login table tr td:empty { display: none; }
 #login .cat_textbox, #login table .textbox { width: 100%; box-sizing: border-box; }
 #login .note br { display: none; }

 /* Respond / Accept and other boxed external pages... */
 #response-page { margin: 16px; }
 #response-page img { max-width: 100%; height: auto; }
 #response { width: auto; max-width: 450px; padding: 20px 16px; box-sizing: border-box; }
 .task-details-table td { overflow-wrap: anywhere; }
 .task-details-form-table td { display: block; padding: 4px 0; width: auto !important; }
 .task-details-form-table textarea { width: 100% !important; box-sizing: border-box; }

 /* Page title row, the right side carries inline widths on some pages... */
 .page-title-left, .page-title-right { width: auto !important; }
 .task-note { padding: 4px 10px; text-align: left; }
 .breadcrumbs { padding: 0 8px; height: auto; overflow: hidden; }
 .breadcrumbs em { padding: 10px 18px 10px 4px; }

 /* Task details: title, then the facts box, then the history grid... */
 .task-history { display: flex; flex-direction: column; padding: 12px 8px 20px 8px; }
 .task-history-2 { display: contents; }
 .task-history-2 h2 { order: -2; }
 .task-history-1 { order: -1; float: none; width: auto; margin-bottom: 20px; padding: 12px; }
 .task-history-facts { width: 100%; }
 .task-history-facts td { overflow-wrap: anywhere; }
 td.task-history-facts-label:not([colspan]) { white-space: nowrap; overflow-wrap: normal; padding-right: 12px; }

 /* History rows (date, time, user, action) become small cards: date + time on one line, then user, then action... */
 .task-history-grid, .task-history-grid tbody { display: block; }
 .task-history-grid tr.task-history-grid-title { display: none; }
 .task-history-grid tr { display: block; padding: 8px 4px; border-bottom: 1px solid #ebebeb; }
 .task-history-grid td { display: inline; padding: 0; border: 0; overflow-wrap: anywhere; }
 .task-history-grid td:nth-child(1), .task-history-grid td:nth-child(2) { font-size: 11px; color: #888; margin-right: 6px; }
 .task-history-grid td:nth-child(3) { display: block; font-weight: bold; font-size: 13px; margin-top: 2px; }
 .task-history-grid td:nth-child(4) { display: block; font-size: 13px; }

 /* Update task form: one column, full width fields... */
 .add-task-form { padding: 12px 8px 16px 8px; }
 .add-task-form-left, .add-task-form-right, .add-task-form-right .webform { float: none; width: auto; }
 .add-task-form .medium-textbox, .add-task-form .medium-listbox, .add-task-form .medium-filebox { width: 100% !important; max-width: 100%; box-sizing: border-box; }
 .add-task-form input[name="title"] { width: calc(100% - 50px) !important; }
 .add-task-form input[type="file"] { max-width: 100%; }
 .add-task-buttons { margin-bottom: 20px; }
 .add-task-form select, .add-task-form .small-textbox { max-width: 100%; box-sizing: border-box; }
 .add-task-form .webform .webform td, #task-row-dates > td, #task-row-priority > td { width: 50%; }
 .add-task-form-right .small-dropdown, .add-task-form-right .small-textbox { width: 100% !important; }
 /* Recurring task "Repeats" options, fixed 60px high on desktop... */
 .recur-options { height: auto !important; padding: 12px 8px !important; overflow: hidden; }
 .recur-options > div { margin: 0 8px 8px 0 !important; }

 /* Account pages: the side menu becomes a row of wrapping tabs above the content... */
 .column-1, .column-2 { float: none; width: auto !important; margin: 0 !important; }
 .column-2 > div { padding: 12px 10px 30px 10px !important; overflow-wrap: anywhere; }
 #sub-menu { margin: 10px 8px 0 8px; padding: 0; background: none; }
 #sub-menu ul { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; background: none; }
 #sub-menu ul li { font-size: 13px; text-align: left; }
 #sub-menu ul li a:link, #sub-menu ul li a:visited, #sub-menu ul li a:active,
 #sub-menu ul li a:hover { padding: 6px 11px; background: #f4f8e4; border: 1px solid #d5dfb0; border-radius: 15px; }
 #sub-menu ul li.selected a:link, #sub-menu ul li.selected a:visited, #sub-menu ul li.selected a:active { background: #6a960f; border-color: #6a960f; color: #fff; }
 .column-2 .cat_textbox, .column-2 .cat_listbox, .column-2 .cat_dropdown { max-width: 100%; box-sizing: border-box; }
 /* Billing lays out with width="550" tables... */
 .column-2 table[width], .column-2 td[width] { width: auto !important; }
 .column-2 table { max-width: 100%; }
 .system-message { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
 .message-warning, .message-bigwarning, .message-alert { padding-left: 45px; }
 /* Task Columns: the two lists side by side with the arrows between, up/down underneath... */
 .columns-picker, .columns-picker tbody { display: block; }
 .columns-picker tr { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: start; }
 .columns-picker td { padding: 0; }
 .columns-picker td:nth-child(4) { grid-column: 1 / -1; }
 .columns-picker td:nth-child(4) br { display: none; }
 .columns-picker td:nth-child(4) > * { display: inline-block; margin: 0 8px 0 0 !important; vertical-align: middle; }
 .columns-picker select { width: 100% !important; box-sizing: border-box; }

 /* Empty state boxes (sign-offs etc)... */
 .message-empty-view { padding: 16px; }
 .message-empty-view ul { width: auto !important; padding-left: 18px; }
 .message-empty-view .link-button-gray { width: auto; max-width: 250px; }

 /* Folder, recurring task, contact grids: one card per row. ViewTasks has its own rules above... */
 table.grid:not(#tasks), table.grid:not(#tasks) > tbody { display: block; }
 table.grid:not(#tasks) > tbody > tr { display: block; padding: 8px 10px; border-top: 1px solid #ebebeb; }
 table.grid:not(#tasks) > tbody > tr > td { display: inline-block; vertical-align: middle; width: auto !important; padding: 2px 10px 2px 0; border: 0; overflow-wrap: anywhere; }
 table.grid:not(#tasks) > tbody > tr > td:first-child { display: block; padding-left: 0; font-weight: bold; }
 table.grid:not(#tasks) > tbody > tr > td:empty { display: none; }
 table.grid:not(#tasks) > tbody > tr.grid-header { padding: 0; border-top: 0; }
 table.grid:not(#tasks) > tbody > tr.grid-header > td:first-child { padding: 10px 12px; font-size: 15px; }
 table.grid:not(#tasks) > tbody > tr.grid-header > td:not(:first-child) { display: none; }
 table.grid-recur:not(#tasks) > tbody > tr.grid-header { display: none; }
 .grid-title-inside .grid-title-table { margin: 0; }

 /* Labels for the values that make no sense on their own... */
 table.grid-folders:not(#tasks) > tbody > tr:not(.grid-header) > td:nth-child(2)::before { content: "Shared with "; color: #888; font-size: 11px; }
 table.grid-folders:not(#tasks) > tbody > tr:not(.grid-header) > td:nth-child(4) { display: inline-flex; align-items: center; gap: 6px; }
 table.grid-folders:not(#tasks) > tbody > tr:not(.grid-header) > td:nth-child(4)::before { content: "Public"; color: #888; font-size: 11px; }
 table.grid-recur:not(#tasks) > tbody > tr > td:nth-child(n+2):nth-child(-n+5) { display: block; padding: 1px 0; }
 table.grid-recur:not(#tasks) > tbody > tr > td:nth-child(2)::before { content: "Folder: "; color: #888; }
 table.grid-recur:not(#tasks) > tbody > tr > td:nth-child(3)::before { content: "Assigned to: "; color: #888; }
 table.grid-recur:not(#tasks) > tbody > tr > td:nth-child(4)::before { content: "Occurs: "; color: #888; }
 table.grid-recur:not(#tasks) > tbody > tr > td:nth-child(5)::before { content: "Until: "; color: #888; }

 /* fancybox positions from its own measurement, pin it to the screen instead... */
 #fancybox-wrap { left: 8px !important; width: calc(100vw - 16px) !important; box-sizing: border-box; }
 #fancybox-content { width: auto !important; height: auto !important; }
 .dialog-window { padding: 16px; box-sizing: border-box; }
 .dialog-window .cat_textbox { width: 100%; box-sizing: border-box; }
}

@media (max-width: 700px) {
 /* Hide every column past the title except col-keep on the outer task grid.
    Direct-child selector keeps the nested .grid-title-table cells visible. */
 table#tasks.grid > tbody > tr > td:nth-of-type(n+2):not(.col-keep) { display: none !important; }

 /* The title takes whatever col-keep leaves, long titles wrap. */
 table#tasks.grid { width: 100%; table-layout: fixed; }
 table#tasks.grid td.grid-title,
 table#tasks.grid td.grid-title-big {
   border-right: 0 !important;
   background: none !important;
   padding-left: 6px !important;
 }
 /* Fixed layout takes the widths from the header row. The "Showing x/y" row spans
    every column, so the hidden ones must be squeezed out explicitly... */
 table#tasks.grid tr.grid-header td.grid-title-big { width: 100%; }
 table#tasks.grid.has-keep tr.grid-header td.grid-title-big { width: 70%; }
 table#tasks.grid td.col-keep { width: 30%; white-space: normal; overflow-wrap: anywhere; }

 /* The other column values, under the title... */
 .task-meta { display: block; margin: 2px 0 0 0; font-size: 12px; line-height: 1.4; color: #777; overflow-wrap: anywhere; }
 .grid-title-table { width: 100% !important; margin-left: 0 !important; }
 .grid h4, .grid h4 a, .task-description { word-wrap: break-word; overflow-wrap: break-word; }
 .panel, .panel-top, .panel-bottom { width: auto !important; background-image: none; }

 /* The drag handle is unusable on touch and just steals horizontal space. */
 td.grid-row-options { display: none; }
}