/* Tablets */

input[type="submit"], button {
    -webkit-appearance: none;
    appearance: none;
}

@media (max-width: 1024px) {
    /* Basic */

    html {
        -webkit-text-size-adjust: 100%;
    }

    td, th {
        padding: 10px;
        font-size: 0.875rem;
    }

    .small {
        font-size: 0.75rem;
    }

    /* Layout */

    #container {
        min-width: 0;
    }

    #content {
        padding: 15px 20px 20px;
    }

    div.breadcrumbs {
        padding: 10px 30px;
    }

    /* Header */

    #header {
        flex-direction: column;
        padding: 15px 30px;
        justify-content: center;/*(old:flex-start)penny edit 20241210*/
        height: 146px;/*penny add 20241210*/
    }

    #site-name {
        margin: 0 0 8px;
        line-height: 1.2;
    }

    #user-tools {
        margin: 0;
        font-weight: 400;
        line-height: 1.85;
        text-align: left;
        font-size: 0.875rem;/*penny add 20241210*/
    }

    #user-tools a {
        display: inline-block;
        line-height: 1.4;
    }
    /*penny add below 20241211*/
    .sticky {top: calc(146px + 41px);height: calc(100vh - 41px - 146px);}
    .dashboard .sticky {top: 146px;height: calc(100vh - 146px);}
    nav {top: 146px;}
    #notification-list {top: 146px;}

    /* sidebar */ /*penny add below 20241209*/
    #nav-sidebar>.module>table>caption>a {font-size: 1rem;}

    /* Dashboard */

    .dashboard #content {
        width: auto;
    }

    #content-related {
        margin-right: -290px;
    }

    .colSM #content-related {
        margin-left: -290px;
    }

    .colMS {
        margin-right: 290px;
    }

    .colSM {
        margin-left: 290px;
    }

    .dashboard .module table td a {
        padding-right: 0;
    }

    td .changelink, td .addlink {
        font-size: 0.8125rem;
    }

    /* Changelist */

    #toolbar {
        border: none;
        padding: 15px;
    }

    #changelist-search > div {
        display: flex;
        flex-wrap: nowrap;
        max-width: 480px;
        align-items: center;/*penny add 20241206*/
    }

    #changelist-search label {
        line-height: 1.375rem;
    }

    #toolbar form #searchbar {
        flex: 1 0 auto;
        width: 0;
        height: 1.375rem;
        margin: 0 10px 0 6px;
    }

    #toolbar form input[type=submit] {
        flex: 0 1 auto;
    }

    #changelist-search .quiet {
        width: 0;
        flex: 1 0 auto;
        margin: 5px 0 0 25px;
    }

    #changelist .actions {
        display: flex;
        flex-wrap: wrap;
        padding: 15px 0;
    }

    #changelist .actions label {
        display: flex;
    }

    #changelist .actions select {
        background: var(--body-bg);
    }

    #changelist .actions .button {
        min-width: 48px;
        margin: 0 10px;
    }

    #changelist .actions span.all,
    #changelist .actions span.clear,
    #changelist .actions span.question,
    #changelist .actions span.action-counter {
        font-size: 0.6875rem;
        margin: 0 10px 0 0;
    }

    #changelist-filter {
        flex-basis: 200px;
    }

    .change-list .filtered .results,
    .change-list .filtered .paginator,
    .filtered #toolbar,
    .filtered .actions,

    #changelist .paginator {
        border-top-color: var(--hairline-color); /* XXX Is this used at all? */
    }

    #changelist .results + .paginator {
        border-top: none;
        font-size: 0.875rem;/*penny add 20241206*/
    }

    #changelist table thead th, table thead th .text span {
        font-size: 1rem;/*penny add 20241206*/
    }


    /* Forms */

    label {
        font-size: 0.875rem;
    }

    .form-row input[type=text],
    .form-row input[type=password],
    .form-row input[type=email],
    .form-row input[type=url],
    .form-row input[type=tel],
    .form-row input[type=number],
    .form-row textarea,
    .form-row select,
    .form-row .vTextField {
        box-sizing: border-box;
        margin: 0;
        padding: 6px 8px;
        min-height: 2.25rem;
        font-size: 0.875rem;
    }

    .form-row select {
        height: 2.25rem;
    }

    .form-row select[multiple] {
        height: auto;
        min-height: 0;
    }

    fieldset .fieldBox + .fieldBox {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--hairline-color);
    }

    textarea {
        max-width: 100%;
        max-height: 120px;
    }

    .aligned label {
        padding-top: 6px;
    }

    .aligned .related-lookup,
    .aligned .datetimeshortcuts,
    .aligned .related-lookup + strong {
        align-self: center;
        margin-left: 15px;
    }

    form .aligned div.radiolist {
        margin-left: 2px;
    }

    .submit-row {
        padding: 8px;
    }

    .submit-row a.deletelink {
        padding: 10px 7px;
    }

    .button, input[type=submit], input[type=button], .submit-row input, a.button {
        padding: 7px;
    }

    /* Selector */

    .selector {
        display: flex;
        width: 100%;
    }

    .selector .selector-filter {
        display: flex;
        align-items: center;
    }

    .selector .selector-filter label {
        margin: 0 8px 0 0;
    }

    .selector .selector-filter input {
        width: 100%;
        min-height: 0;
        flex: 1 1;
    }

    .selector-available, .selector-chosen {
        width: auto;
        flex: 1 1;
        display: flex;
        flex-direction: column;
    }

    .selector select {
        width: 100%;
        flex: 1 0 auto;
        margin-bottom: 5px;
    }

    .selector ul.selector-chooser {
        width: 26px;
        height: 52px;
        padding: 2px 0;
        border-radius: 20px;
        transform: translateY(-10px);
    }

    .selector-add, .selector-remove {
        width: 20px;
        height: 20px;
        background-size: 20px auto;
    }

    .selector-add {
        background-position: 0 -120px;
    }

    .selector-remove {
        background-position: 0 -80px;
    }

    a.selector-chooseall, a.selector-clearall {
        align-self: center;
    }

    .stacked {
        flex-direction: column;
        max-width: 480px;
    }

    .stacked > * {
        flex: 0 1 auto;
    }

    .stacked select {
        margin-bottom: 0;
    }

    .stacked .selector-available, .stacked .selector-chosen {
        width: auto;
    }

    .stacked ul.selector-chooser {
        width: 52px;
        height: 26px;
        padding: 0 2px;
        transform: none;
    }

    .stacked .selector-chooser li {
        padding: 3px;
    }

    .stacked .selector-add, .stacked .selector-remove {
        background-size: 20px auto;
    }

    .stacked .selector-add {
        background-position: 0 -40px;
    }

    .stacked .active.selector-add {
        background-position: 0 -40px;
    }

    .active.selector-add:focus, .active.selector-add:hover {
        background-position: 0 -140px;
    }

    .stacked .active.selector-add:focus, .stacked .active.selector-add:hover {
        background-position: 0 -60px;
    }

    .stacked .selector-remove {
        background-position: 0 0;
    }

    .stacked .active.selector-remove {
        background-position: 0 0;
    }

    .active.selector-remove:focus, .active.selector-remove:hover {
        background-position: 0 -100px;
    }

    .stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover {
        background-position: 0 -20px;
    }

    .help-tooltip, .selector .help-icon {
        display: none;
    }

    .datetime input {
        width: 50%;
        max-width: 120px;
    }

    .datetime span {
        font-size: 0.8125rem;
    }

    .datetime .timezonewarning {
        display: block;
        font-size: 0.6875rem;
        color: var(--body-quiet-color);
    }

    .datetimeshortcuts {
        color: var(--border-color); /* XXX Redundant, .datetime span also sets #ccc */
    }

    .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField {
        width: 75%;
    }

    .inline-group {
        overflow: auto;
    }

    /* Messages */

    ul.messagelist li {
        padding-left: 55px;
        background-position: 30px 12px;
    }

    ul.messagelist li.error {
        background-position: 30px 12px;
    }

    ul.messagelist li.warning {
        background-position: 30px 14px;
    }

    /* Login */

    .login #header {
        padding: 15px 20px;
    }

    .login #site-name {
        margin: 0;
    }

    /* GIS */

    div.olMap {
        max-width: calc(100vw - 30px);
        max-height: 300px;
    }

    .olMap + .clear_features {
        display: block;
        margin-top: 10px;
    }

    /* Docs */

    .module table.xfull {
        width: 100%;
    }

    pre.literal-block {
        overflow: auto;
    }
    /* phone call */
    .record-grid {grid-template-columns: repeat(2, 1fr);} /*penny add 20241209*/
}

/* Mobile */

@media (max-width: 767px) {
    /* Layout */

    #header, #content, #footer {
        padding: 15px;
    }

    #footer:empty {
        padding: 0;
    }

    div.breadcrumbs {
        padding: 10px 15px;
    }

    #site-name {font-size: 2.25rem;} /*penny add 20241209*/
    #site-name>a>img {height: 2.5rem;} /*penny add 20241209*/

    /* Dashboard */

    .colMS, .colSM {
        margin: 0;
    }

    #content-related, .colSM #content-related {
        width: 100%;
        margin: 0;
    }

    #content-related .module {
        margin-bottom: 0;
    }

    #content-related .module h2 {
        padding: 10px 15px;
        font-size: 1rem;
    }

    /* Changelist */

    #changelist {
        align-items: stretch;
        flex-direction: column;
    }

    #toolbar {
        padding: 10px;
    }

    #changelist-filter {
        margin-left: 0;
    }

    #changelist .actions label {
        flex: 1 1;
    }

    #changelist .actions select {
        flex: 1 0;
        width: 100%;
    }

    #changelist .actions span {
        flex: 1 0 100%;
    }

    #changelist-filter {
        position: static;
        width: auto;
        margin-top: 30px;
    }

    .object-tools {
        float: none;
        margin: 0 0 15px;
        padding: 0;
        overflow: hidden;
    }

    .object-tools li {
        height: auto;
        margin-left: 0;
    }

    .object-tools li + li {
        margin-left: 15px;
    }

    /* Forms */

    .form-row {
        padding: 15px 0;
    }

    .aligned .form-row,
    .aligned .form-row > div {
        max-width: 100vw;
    }

    /* .aligned .form-row > div {
        width: calc(100vw - 30px);
    } *//*penny cm 20241209*/

    .flex-container {
        flex-flow: column;
    }

    .flex-container.checkbox-row {
        flex-flow: row;
    }

    textarea {
        max-width: none;
    }

    .vURLField {
        width: auto;
    }

    fieldset .fieldBox + .fieldBox {
        margin-top: 15px;
        padding-top: 15px;
    }

    fieldset.collapsed .form-row {
        display: none;
    }

    .aligned label {
        width: 100%;
        min-width: auto;
        padding: 0 0 10px;
    }

    .aligned label:after {
        max-height: 0;
    }

    .aligned .form-row input,
    .aligned .form-row select,
    .aligned .form-row textarea {
        flex: 1 1 auto;
        /* max-width: 100%; */
        width: 100%; /*penny edit 20241209*/
    }

    .aligned .checkbox-row input {
        flex: 0 1;/*(old:0 1 auto)penny edit 20241216*/
        margin: 0;
    }

    .aligned .vCheckboxLabel {
        flex: 1 0;
        padding: 1px 0 0 5px;
    }

    .aligned label + p,
    .aligned label + div.help,
    .aligned label + div.readonly {
        /* padding: 0; */ /*penny cm 20241209*/
        margin-left: 0;
    }

    .aligned p.file-upload {
        font-size: 0.8125rem;
    }

    span.clearable-file-input {
        margin-left: 15px;
    }

    span.clearable-file-input label {
        font-size: 0.8125rem;
        padding-bottom: 0;
    }

    .aligned .timezonewarning {
        flex: 1 0 100%;
        margin-top: 5px;
    }

    form .aligned .form-row div.help {
        width: 100%;
        margin: 5px 0 0;
        padding: 0;
    }

    form .aligned ul,
    form .aligned ul.errorlist {
        margin-left: 0;
        padding-left: 0;
    }

    form .aligned div.radiolist {
        margin-top: 5px;
        margin-right: 15px;
        margin-bottom: -3px;
    }

    form .aligned div.radiolist:not(.inline) div + div {
        margin-top: 5px;
    }

    /* Related widget */

    .related-widget-wrapper {
        width: 100%;
        display: flex;
        align-items: flex-start;
    }

    .related-widget-wrapper .selector {
        order: 1;
    }

    .related-widget-wrapper > a {
        order: 2;
    }

    .related-widget-wrapper .radiolist ~ a {
        align-self: flex-end;
    }

    .related-widget-wrapper > select ~ a {
        align-self: center;
    }

    /* Selector */

    .selector {
        flex-direction: column;
        gap: 10px 0;
    }

    .selector-available, .selector-chosen {
        flex: 1 1 auto;
    }

    .selector select {
        max-height: 96px;
    }

    .selector ul.selector-chooser {
        display: block;
        width: 52px;
        height: 26px;
        padding: 0 2px;
        transform: none;
    }

    .selector ul.selector-chooser li {
        float: left;
    }

    .selector-remove {
        background-position: 0 0;
    }

    .active.selector-remove:focus, .active.selector-remove:hover {
        background-position: 0 -20px;
    }

    .selector-add  {
        background-position: 0 -40px;
    }

    .active.selector-add:focus, .active.selector-add:hover {
        background-position: 0 -60px;
    }

    /* Inlines */

    .inline-group[data-inline-type="stacked"] .inline-related {
        border: 1px solid var(--hairline-color);
        border-radius: 4px;
        margin-top: 15px;
        overflow: auto;
    }

    .inline-group[data-inline-type="stacked"] .inline-related > * {
        box-sizing: border-box;
    }

    .inline-group[data-inline-type="stacked"] .inline-related .module {
        padding: 0 10px;
    }

    .inline-group[data-inline-type="stacked"] .inline-related .module .form-row {
        border-top: 1px solid var(--hairline-color);
        border-bottom: none;
    }

    .inline-group[data-inline-type="stacked"] .inline-related .module .form-row:first-child {
        border-top: none;
    }

    .inline-group[data-inline-type="stacked"] .inline-related h3 {
        padding: 10px;
        border-top-width: 0;
        border-bottom-width: 2px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .inline-group[data-inline-type="stacked"] .inline-related h3 .inline_label {
        margin-right: auto;
    }

    .inline-group[data-inline-type="stacked"] .inline-related h3 span.delete {
        float: none;
        flex: 1 1 100%;
        margin-top: 5px;
    }

    .inline-group[data-inline-type="stacked"] .aligned .form-row > div:not([class]) {
        width: 100%;
    }

    .inline-group[data-inline-type="stacked"] .aligned label {
        width: 100%;
    }

    .inline-group[data-inline-type="stacked"] div.add-row {
        margin-top: 15px;
        border: 1px solid var(--hairline-color);
        border-radius: 4px;
    }

    .inline-group div.add-row,
    .inline-group .tabular tr.add-row td {
        padding: 0;
    }

    .inline-group div.add-row a,
    .inline-group .tabular tr.add-row td a {
        display: block;
        padding: 8px 10px 8px 26px;
        background-position: 8px 9px;
    }

    /* Submit row */

    .submit-row {
        /* padding: 10px; *//*penny cm20241213*/
        margin: 0 0 15px;
        flex-direction: column;
        gap: 8px;
    }

    .submit-row input, .submit-row input.default, .submit-row a {
        text-align: center;
    }

    .submit-row a.closelink {
        padding: 10px 0;
        text-align: center;
    }

    .submit-row a.deletelink {
        margin: 0;
    }

    /* Messages */

    ul.messagelist li {
        padding-left: 40px;
        background-position: 15px 12px;
    }

    ul.messagelist li.error {
        background-position: 15px 12px;
    }

    ul.messagelist li.warning {
        background-position: 15px 14px;
    }

    /* Paginator */

    .paginator .this-page, .paginator a:link, .paginator a:visited {
        padding: 4px 10px;
    }

    /* Login */

    body.login {
        padding: 0 15px;
    }

    .login #container {
        width: auto;
        max-width: 480px;
        margin: 50px auto;
    }

    /* .login #header,
    .login #content {
        padding: 15px;
    } *//*penny cm 20241211*/

    .login #content-main {
        float: none;
    }

    .login .form-row {
        padding: 0;
    }

    .login .form-row + .form-row {
        margin-top: 15px;
    }

    .login .form-row label {
        margin: 0 0 5px;
        line-height: 1.2;
    }

    /* .login .submit-row {
        padding: 15px 0 0;
    } *//*penny cm 20241211*/

    .login br {
        display: none;
    }

    .login .submit-row input {
        margin: 0;
        text-transform: uppercase;
    }

    .errornote {
        margin: 0 0 20px;
        padding: 8px 12px;
        font-size: 0.8125rem;
    }

    /* Calendar and clock */

    .calendarbox, .clockbox {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        margin: 0;
        border: none;
        overflow: visible;
    }

    .calendarbox:before, .clockbox:before {
        content: '';
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.75);
        transform: translate(-50%, -50%);
    }

    .calendarbox > *, .clockbox > * {
        position: relative;
        z-index: 1;
    }

    .calendarbox > div:first-child {
        z-index: 2;
    }

    .calendarbox .calendar, .clockbox h2 {
        border-radius: 4px 4px 0 0;
        overflow: hidden;
    }

    .calendarbox .calendar-cancel, .clockbox .calendar-cancel {
        border-radius: 0 0 4px 4px;
        overflow: hidden;
    }

    .calendar-shortcuts {
        padding: 10px 0;
        font-size: 0.75rem;
        line-height: 0.75rem;
    }

    .calendar-shortcuts a {
        margin: 0 4px;
    }

    .timelist a {
        background: var(--body-bg);
        padding: 4px;
    }

    .calendar-cancel {
        padding: 8px 10px;
    }

    .clockbox h2 {
        padding: 8px 15px;
    }

    .calendar caption {
        padding: 10px;
    }

    .calendarbox .calendarnav-previous, .calendarbox .calendarnav-next {
        z-index: 1;
        top: 10px;
    }

    /* History */

    table#change-history tbody th, table#change-history tbody td {
        font-size: 0.8125rem;
        word-break: break-word;
    }

    table#change-history tbody th {
        width: auto;
    }

    /* Docs */

    table.model tbody th, table.model tbody td {
        font-size: 0.8125rem;
        word-break: break-word;
    }

    .list_button{display: block;}

    /* 隱藏原本的 sidebar */
    #nav-sidebar {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 1000;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    /* 顯示漢堡選單按鈕 */
    .mobile-nav-toggle {
        display: block;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1001;
        padding: 5px;  /* 調整padding */
        background: #02859cc0;  /* 移除背景色 */
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    /* 設定選單圖示大小 */
    .mobile-nav-toggle img {
        width: 24px;  /* 設定圖示寬度 */
        height: 24px;  /* 設定圖示高度 */
        display: block;
    }

    /* 展開時的樣式 */
    #nav-sidebar.show {
        display: block;
    }

    /* 調整選單內容樣式 */
    .module table {
        width: 100%;
    }

    .module caption a {
        padding: 10px;
        display: block;
        background: #417690;
        color: white;
    }

    .module tr th {
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }
}

/*penny add below 20241209*/
@media (max-width: 576px) {
    #site-name {font-size: 1.725rem;} 
    #site-name>a>img {height: 1.625rem;}
    #site-name a {gap: 0.4rem;}
    /* register */
    form>p {flex-wrap: wrap;}
    form>p>input[type="text"], form>p>input[type="password"], 
    form>p>input[type="email"], form>p>select, form>p>label {flex: 1 1;}
    form>p>.helptext {width: 100%;}
    .checkbox-grid {grid-template-columns: repeat(1, 1fr);}
    /* subsystem */
    .subsystem-grid {grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));}
    /* phone call */
    .record-grid {grid-template-columns: repeat(1, 1fr);} /*penny add 20241209*/
    /* login */
    #appqrcode {font-size: 1rem;gap: 0.5rem;}
    #appqrcode img {width: 80px;}
}